jquery 设计的思路-----初级
jquery.js 很经典，其中有一些设计思路简直非常经典
1.安全的创建一个构造函数并进行调用；
<script>
// 这是一种安全的构造函数的创建方法，在调用构造函数G的时候，不论使用G()进行调用，还是使用new G()进行调用，返回的东西都是相同的
var G = function() {
// 先判定this 是不是G的实例，如果是，则说明this 可以调用G的属性和方法，也可是使用G.prototype 上的属性和方法
if (this instanceof G) {
return this;
} else {
// 如果不是G的实例，说明现在的this没有指向G,也就是不能调用G的原型链上的东西，那么在调用的时候，就重新实例化一个G(),这样就可以调用原型链上的东西了
return new G();
}
};
G.prototype = {
length: 123,
size: function() {
return this.length;
}
};
// 因为不论使用new G() 还是G()调用构造函数，得到的结果都是一样的，所以以下结果相同；
// 最开始都是返回一个构造函数的实例，然后通过原型链，可以调用构造函数的原型对象G.prototype,顺着原型链，可以找到函数的size()方法；
console.log(new G().size());
console.log(G().size());
</script>
2. 另一种设计方式，调用构造函数G时，返回G上挂载的对象
<script>
// 设置一个构造函数G，当调用它时，返回挂载在它身上的fn对象
var G = function() {
return G.fn;
};
// 把G上的fn 对象指向G的原型对象，即指向 G.prototype
G.fn = G.prototype = {
length: 12345,
size: function() {
return this.length;
}
};
console.log(G().size()); //
console.log(new G().size()); //
console.log(G.prototype.size()); //
</script>
运行结果：
3. 再进一步，当调用构造函数G时，返回G上的对象fn上的函数 init(),同时把fn对象指向构造函数G的原型对象，即G.prototype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 设置一个构造函数G，当调用它时，返回挂载在它身上的fn对象上的 init() 函数
var G = function(id) {
return G.fn.init(id);
};
// 把G上的fn 对象指向G的原型对象，即指向 G.prototype
G.fn = G.prototype = {
length: 12345,
size: function() {
return this.length;
},
init: function(id) {
return document.getElementById(id);
}
};
window.onload = function() {
G("box").style.background = 'red';
G("box").size();
}
</script>
<div id="box">hello,huanyign2015,这里正在进行测试！</div>
</body>
</html>
运行结果：
4. 改变this的指向，使this指向G.prototype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 设置一个构造函数G，当调用它时，返回挂载在它身上的fn对象上的 init() 函数
var G = function(id) {
return G.fn.init(id);
};
// 把G上的fn 对象指向G的原型对象，即指向 G.prototype
G.fn = G.prototype = {
init: function(id) {
this[0] = document.getElementById(id);
this.length = 1;
return this;
},
length: 0,
size: function() {
return this.length;
}
};
window.onload = function() {
G("box")[0].style.background = 'red';
G("box2")[0].style.background = '#ccc';
console.log(G("box").size());
console.log(G("box2"));
}
</script>
<div id="box">第一行，hello,huanyign2015,这里正在进行测试！</div>
<div id="box1">第二行，hello,huanyign2015,这里正在进行测试！</div>
<div id="box2">第三行，hello,huanyign2015,这里正在进行测试！</div>
</body>
</html>
运行结果：
5. 当构造函数返回的不是G上的fn对象上的init()函数，而是G上的fn上的init对象的实例的时候，这时就不能调用size()函数了，因为在init()实例的原型链上没有size()函数；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 设置一个构造函数G，当调用它时，返回挂载在它身上的fn对象上的 init() 函数对象的实例
var G = function(id) {
return new G.fn.init(id);
};
// 把G上的fn 对象指向G的原型对象，即指向 G.prototype
G.fn = G.prototype = {
init: function(id) {
this[0] = document.getElementById(id);
this.length = 1;
return this;
},
length: 0,
size: function() {
return this.length;
}
};
window.onload = function() {
console.log(G("box2"));
console.log(G("box").size());
}
</script>
<div id="box">第一行，hello,huanyign2015,这里正在进行测试！</div>
<div id="box1">第二行，hello,huanyign2015,这里正在进行测试！</div>
<div id="box2">第三行，hello,huanyign2015,这里正在进行测试！</div>
</body>
</html>
运行结果：
6.解决能够调用size()函数的问题，需要把init的原型对象指向G.prototype 上就可以了；也就是指向G.fn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 设置一个构造函数G，当调用它时，返回挂载在它身上的fn对象上的 init() 函数对象的实例
var G = function(id) {
return new G.fn.init(id);
};
// 把G上的fn 对象指向G的原型对象，即指向 G.prototype
G.fn = G.prototype = {
init: function(id) {
this[0] = document.getElementById(id);
this.length = 1;
return this;
},
length: 0,
size: function() {
return this.length;
}
};
// 把G.fn.init对象的实例加载到G.prototype的原型链上来，这样就可以通过原型链调用size()函数了
G.fn.init.prototype = G.fn;
window.onload = function() {
console.log(G("box2"));
console.log(G("box").size());
}
</script>
<div id="box">第一行，hello,huanyign2015,这里正在进行测试！</div>
<div id="box1">第二行，hello,huanyign2015,这里正在进行测试！</div>
<div id="box2">第三行，hello,huanyign2015,这里正在进行测试！</div>
</body>
</html>
运行结果：
7. 构造一个Id与元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div,
p {
padding: 3px;
margin: 3px;
border: 1px solid green;
}
</style>
</head>
<body>
<script>
// 设置一个构造函数G，当调用它时，返回挂载在它身上的fn对象上的 init() 函数对象的实例
var G = function(selector, context) {
return new G.fn.init(selector, context);
};
// 把G上的fn 对象指向G的原型对象，即指向 G.prototype
G.fn = G.prototype = {
constructor: G,
init: function(selector, context) {
this.length = 0;
context = context || document;
if (selector.indexOf("#") == 0) { // 说明选择器是Id this[0] = document.getElementById(selector.substring(1)); // 构造函数上设置数字索引0属性，值为对应的选中Id元素
this.length = 1; // 构造函数上设置一个length属性，值为元1，因为Id只选中一个元素 } else { // 说明是元素选择器， （备注，在这里只设置支持元素选择器和id选择器）
var aNode = context.getElementsByTagName(selector);
for (var i = 0, len = aNode.length; i < len; i++) {
this[i] = aNode[i]; // 构造函数上设置数字索引属性，值为对应的元素
}
this.length = len; // 构造函数上设置一个length属性，值为元素的个数len
};
this.selector = selector; // 构造函数上设置一个selector属性，值为传入的selector
this.context = context; // 构造函数上设置一个selector属性，值为传入的context
return this;
},
length: 0,
size: function() {
return this.length;
}
};
// 把G.fn.init对象的实例加载到G.prototype的原型链上来，这样就可以通过原型链调用size()函数了
G.fn.init.prototype = G.fn;
window.onload = function() {
console.log(G('#box1')[0]);
var aP = G('p');
for (var i = 0, len = aP.size(); i < len; i++) {
aP[i].style.backgroundColor = 'blue';
}
}
</script>
<div id="box">
<p>huanying2015,思维改变世界</p>
<p>huanying2015,思维改变世界</p>
<p>huanying2015,思维改变世界</p>
<p>huanying2015,思维改变世界</p>
<p>huanying2015,思维改变世界</p>
<ul>huanying2015,思维改变世界,这是ul元素</ul>
<p>huanying2015,思维改变世界</p>
<p>huanying2015,思维改变世界</p>
<p>huanying2015,思维改变世界</p>
</div>
<div id="box1">第二行，hello,huanyign2015,这里正在进行测试！</div>
<div id="box2">第三行，hello,huanyign2015,这里正在进行测试！</div>
</body>
</html>
运行结果：
jquery 设计的思路-----初级的更多相关文章
- jquery 设计的扩展---初级
1. 写一个构造函数G,调用G 时,返回G上的fn 对象的init() 的实例 2.设置G.fn 的指向,使用G.fn 与G.prototype指向同一个对象 2.1 重写G.prototype 对象 ...
- jQuery设计思想
jQuery设计思想 原文网址:http://jqfundamentals.com/book/ 阮一峰 翻译整理 [目录] 一.选择网页元素 二.改变结果集 三.链式操作 四.元素的操作:取值和赋值 ...
- MySQL性能调优与架构设计——第 17 章 高可用设计之思路及方案
第 17 章 高可用设计之思路及方案 前言: 数据库系统是一个应用系统的核心部分,要想系统整体可用性得到保证,数据库系统就不能出现任何问题.对于一个企业级的系统来说,数据库系统的可用性尤为重要.数据库 ...
- jQuery源代码框架思路
開始计划时间读源代码,第一节jQuery框架阅读思路整理 (function(){ jQuery = function(){}; jQuery一些变量和函数和给jQuery对象加入一些方法和属性 ex ...
- JQuery系列（6） - jQuery设计思想
jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. JQuery设计 ...
- window.onload多个共存 - 借鉴jQuery.noConflict的思路
一.背景 window.onload方法只能存在一个,如果多次赋值给window.onload,则后者会覆盖前者. 二.浅谈jQuery.noConflict的实现方式 1)源代码 // 简化抽离出 ...
- 浅谈游戏中BOSS设计的思路
对于大多数游戏来说,BOSS在其设计上都有着不可替代的作用,也是玩家印象最为深刻的一部分.近期自己也有在做BOSS的设计工作,有一些心得想要分享一下: 1.明确BOSS的设计目的 在设计之初,我们一定 ...
- MySql（十七）：MySql架构设计——高可用设计之思路及方案
前言: 数据库系统是一个应用系统的核心部分,要想系统整体可用性得到保证,数据库系统就不能出现任何问题.对于一个企业级的系统来说,数据库系统的可用性尤为重要.数据库系统一旦出现问题无法提供服务,所有系统 ...
- WEB网页监控系统的设计框架思路具体解释
提示:也能够直接在LCD上显示摄像头数据.这个參考luvcview源代码.设计思路思将YUV或者MJPEG格式的数据转换成RGB格式的数据,然后实现图片的缩放,图像缩放算法:点击这里!,然后写到fra ...
随机推荐
- sleep function error （"Advanced Programming in the UNIX Environment" Third Edition No.374）
测试证明代码: #include <unistd.h> #include <fcntl.h> #include <time.h> #include "ap ...
- view之自定义控件
转载自:http://blog.163.com/ppy2790@126/blog/static/103242241201382210910473/ 开发自定义控件的步骤: 1.了解View的工作原理 ...
- git知识讲解
git初始化 1.设置名字和邮箱 git config --global user.name "zhangsan" git config --global user.email & ...
- win10使用4G 模块RNDIS模式上网
Windons使用RNDIS模式上网步骤 Chapter 1 模块端配置 1模块设置为RNDIS模式 1. 以EC20CEFAG模块为例 2. 命令如下: 1) ...
- window安装mysql教程
1.下载mysql安装包到指定文件: 比如如图我把下载的mysql zip的内容解压到这个文件里面,具体文件内容如下: my.ini 需要自己创建,里面的内容如下: [mysqld] #basedir ...
- hdfs底层存储分隔符
字段分割 \ map字段里面key \ value \ 每行结尾用linux换行符 \0a '\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格,通常敲一个回车键,即是回车,又是换行( ...
- vue从入门到女装？？：从零开始搭建后台管理系统（二）用vue-docute生成线上文档
教程 vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架 一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如: vue-docu ...
- python-模块的导入import
#-*- coding:utf-8 -*- #本次学习:模块的导入 ''' 1.模块名不能与第三方库或者本地库名字重名/冲突 2.导入模块时,寻找顺序:现在当前目录找,再去我们环境变量配置的pytho ...
- httpd-2.4.6
1.基础 安装: [root@tri manual]# yum install httpd-manual httpd 源码编译: configure配置选项 配置选项 默认值 备注 -prefix ...
- thinkphp在linux下报mkdir()错误
这个主要是由于缓存文件的权限不够,一般我们git下来的文件时,这个runtime是没有下来的. 解决办法:进入到TP项目下:修改父级目录权限为0777即可linux: chmod -R 777 ./r ...