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 ...
随机推荐
- docker镜像文件的导入与导出（docker镜像迁移）
1.查看镜像ID # docker images [root@localhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE myto ...
- Jmeter（四十三）WebSocket Sampler 和 Ajax Request
权利被放出牢笼,就很难再被关入笼中:奴性被唤出来,腰杆和膝盖很难再直起来. ----宅猪<牧神记> websocket: 参考:https://blog.csdn.net/minmint ...
- CentOS的文件属性:命令 ls -l
第一列:有11位 1)第一位表示文件类型 1)l表示链接文件 2)d表示目录 3)-普通文件 4)b块设备 磁盘分区就是这种类型 5)c 串行端口设备文件(字符设备文件),比如键盘,鼠标,打印机,t ...
- 第16课 右值引用（3）_std::forward与完美转发
1. std::forward原型 template <typename T> T&& forward(typename std::remove_reference< ...
- 第11章 拾遗4：IPv6（2）_给计算机配置IPv6地址
4. 给计算机配置IPv6地址 4.1 无状态自动配置IPv6地址 (1)网络拓扑 ①无状态地址自动配置是指不需要DHCP服务器进行管理,由客户端向路由器发送前缀请求(RS)询问其所在网段.路由器收到 ...
- http与https之间的区别
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂 ...
- Fragment onActivityResult提前响应，startActivityForResult执行后立即响应onActivityResult的解决方法
找不到病根真是让人愁白了头: 今天写了一个startActivityForResult,开启一个Activity并拿到返回的结果,但是startActivityForResult刚走,onActivi ...
- 「NOI2018」屠龙勇士(CRT)
/* 首先杀每条龙用到的刀是能够确定的, 然后我们便得到了许多形如 ai - x * atki | pi的方程 而且限制了x的最小值 那么exgcd解出来就好了 之后就是扩展crt合并了 因为全T调了 ...
- oi造数据
#include<cstdio> #include<cstdlib> #include<cstring> #include<ctime> #includ ...
- SDOI2018IIIDX
/* 题目转换为 n个节点的一片森林,n个权值,要给每个节点分配一个权值,保证子节点的权值不小于父节点的权值,并且1~n的权值的字典序最大. 考场上的贪心很显然 建立出 树来 将所有数值从大到小排序 ...