通过前面两篇博文的积累,
使用闭包构造模块(基础篇)——Object-Oriented Javascript之三
使用闭包构造模块(优化篇)——Object-Oriented Javascript之四
我们现在已经具备了足够的知识,去完成一个比较有挑战性的任务——构造一个简化版的jQuery库——myQuery。
我选择去构造myQuery的动机是:
1 jQuery足够优秀,是模块封装的典范;
2 如果我们能够实现一个良好的jQuery模块,那么就意味着我们能够应付绝大多数的模块封装问题。
如果读者读过jQuery源码,本文依然能够为你带来一些价值,因为在本文中封装myQuery所使用的方法是与jQuery完全不同的,而且还实现了jQuery所没有做到的底层数据的私有性。
jQuery最大好处在于免除了开发人员学习那糟糕的DOM API。另外从编码的角度去看,jQuery的选择器和链式调用等,大大简化了代码。
为了实现以上的优点,jQuery将DOM元素和相应DOM操作封装成一个jQuery对象,使得我们能够舍弃糟糕的DOM API,而去拥抱简单易用的jQuery API
jQuery还有一个重要的特点,它是可以被动态扩展的,我们可以简单地添加自己的jQuery API/插件。为实现这一点,jQuery的数据和方法是“分开”定义的,方法的集合对象暴漏出去,让开发人员有机会往里面加自定义的内容。分开的数据和方法,最后以某种方式结合起来,统一为一个jQuery对象。方法可以不和数据耦合在一起,“分开”定义,听起来很不可思议,但是javascript利用this延迟绑定就能够做到这一点。我们可以在不同的地方分别定义数据和方法,然后可以利用 apply/call/bind/原型链 简单地将二者结合起来。这给人的感觉就像,可以简单地把任意的数据和方法拼成一个模块。
我们的myQuery将着眼于如何封装实现上面提及到jQuery的重要特点,需求如下:
1. selector支持#id和tagName
2. 支持text(),text(str),each(function(index,dom)), size()方法
3. 支持链式调用
4. 支持方法的扩展
尽管需求很少,但是在这些需求实现的背后,往往是我们封装模块的时候最可能遇到的问题,而且在这个简化版jQuery的基础上,完全可以扩展为一个完整的jQuery。
目录:
私有模式实现myQuery
委托模式实现myQuery
私有模式实现myQuery
myQuery架构思想:
1. 底层数据:使用一个[],存放选择器选择出来的dom元素;
2. 对外方法:使用一个{},存放所有公用方法。
3. 关联数据与方法:调用$("xxx")时,dom元素数组和公用方法object关联起来构成一个myQuery对象。
对看过jQuery源码的同学说的话:jQuery底层数据其实是一个由dom元素构成的“类数组”,所有的方法都是操作这个类数组。但是jQuery的类数组不是私有的,可以被直接修改,例如$("div")[0] = document.getElementById("xxx")。我们可以使用前两章学过的闭包克服这个缺点,将dom数组隐藏起来,使外界完全不可能直接修改dom数组,仅仅能修改dom数组的成员,就是说类数组[div1,div2]中的div1、div2的属性可以改变,但是[div1,div2]不能变成[div1,div3]。
实现如下
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>闭包实现myQuery</TITLE> </HEAD> <BODY> <div id="lazy2009">hello,lazy2009!</div> <div id="lazy_">hello,lazy_!</div> <script> if (!Function.prototype.bind) { Function.prototype.bind = function(context) { var args = Array.prototype.slice.call(arguments, 1); var that = this; return function() { return that.apply(context, args.concat(Array.prototype.slice.call(arguments))); } } } (function(win) { var slice = Array.prototype.slice; //使用闭包实现的类似jQuery的封装 //selector只支持#id和tagName两种选择器,例如$("#id"),$("div") var myQuery = function(selector) { //私有成员,不让外界直接修改 var arrDom = []; //调用document.getElementById或者document.getElementsByTagName获取元素集合 if (selector.charAt(0) === '#') { arrDom[0] = document.getElementById(selector.substring(1)); } else { var elements = document.getElementsByTagName(selector); for ( var i = 0; i < elements.length; i++) { arrDom[i] = elements[i]; } } var myQueryObj = {}; //导入myQuery对象公用方法 var methods = myQuery.methods; for ( var methodName in methods) { myQueryObj[methodName] = methods[methodName].bind(myQueryObj, arrDom); } return myQueryObj; }; //myQuery导出到window全局作用域 win.$ = win.myQuery = myQuery; //myQuery对象公用方法 myQuery.methods = { version : function() { return "1.0"; }, text : function(arrDom, s) { if (!s) { return arrDom[0].innerText; } else { for ( var i = 0; i < arrDom.length; i++) { arrDom[i].innerText = s; } } return this; }, each : function(arrDom, fn) { for ( var i = 0; i < arrDom.length; i++) { if (false === fn.call(arrDom[i], i, arrDom[i])) { break; } } return this; }, get : function(arrDom, index) { if (!index) { return slice.call(arrDom); } else { return arrDom[i]; } }, size : function(arrDom) { return arrDom.length; } }; })(window); </script> <script> //封装DOM API alert($("#lazy2009").text()); alert($("#lazy_").text()); //链式代码 $("div").text("hello, world").each(function(i, o) { alert(o.innerText + "==" + this.innerText); }); alert($("div").size()); //扩展方法 if (!myQuery.methods.toArray) { myQuery.methods.toArray = function(arrDom) { return arrDom.slice(0); } } alert($("div").toArray()); </script> </BODY> </HTML>
下面重点解析代码的几个地方
var arrDom = []; //调用document.getElementById或者document.getElementsByTagName获取元素集合 if (selector.charAt(0) === '#') { arrDom[0] = document.getElementById(selector.substring(1)); } else { var elements = document.getElementsByTagName(selector); for ( var i = 0; i < elements.length; i++) { arrDom[i] = elements[i]; } } var myQueryObj = {};
var myQueryObj = {}; //导入myQuery对象公用方法 var methods = myQuery.methods; for ( var methodName in methods) { myQueryObj[methodName] = methods[methodName].bind(myQueryObj,arrDom); }
-
第1步 使用bind"改造"公用方法,返回一个绑定了具体数据的新方法(this确定为myQueryObj,第一个参数确定为arrDom)。
-
第2步 将"改造"后的方法,设置到最终要导出的对象中
//导入myQuery对象公用方法 var methods = myQuery.methods; for ( var methodName in methods) { myQueryObj[methodName] = (function() { var _methodName = methodName;//这一步的意义是什么?循环中访问闭包的变量要注意 return function() { return methods[_methodName].apply(myQueryObj, [ arrDom ].concat(slice.call(arguments)));//闭包访问arrDom } })(); }
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>"私有"模式实现Counter</TITLE> </HEAD> <BODY> <script> if (!Function.prototype.bind) { Function.prototype.bind = function(context) { var args = Array.prototype.slice.call(arguments, 1); var that = this; return function() { return that.apply(context, args.concat(Array.prototype.slice .call(arguments))); } } } (function() { //定义方法 var methods = { add : function(data) { data.i++; return this; }, sub : function(data) { data.i--; return this; }, get : function(data) { return data.i; } }; function createCounter(num) { //定义返回对象 var ret = {}; //定义私有数据 var data = { i : num||0 }; //关联数据与方法,构成一个模块 for ( var methodName in methods) { ret[methodName] = methods[methodName].bind(ret, data); } //返回对象 return ret; } window.createCounter = createCounter; })(); var Counter = createCounter(1); alert(Counter.add().add().sub().get());//2 </script> </BODY> </HTML>
委托模式实现myQuery
有一种封装的方法,既能够做到底层数据是私有的,又能保证生成对象的高效,具体代码如下:
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>闭包实现myQuery</TITLE> </HEAD> <BODY> <div id="lazy2009">hello,lazy2009!</div> <div id="lazy_">hello,lazy_!</div> <script> (function(win) { var slice = Array.prototype.slice; //使用闭包实现的类似jQuery的封装 //selector只支持#id和tagName两种选择器,例如$("#id"),$("div") var myQuery = function(selector) { //私有成员,不让外界直接修改 var arrDom = []; //调用document.getElementById或者document.getElementsByTagName获取元素集合 if (selector.charAt(0) === '#') { arrDom[0] = document.getElementById(selector.substring(1)); } else { var elements = document.getElementsByTagName(selector); for ( var i = 0; i < elements.length; i++) { arrDom[i] = elements[i]; } } var myQueryObj = {}; //导入myQuery对象公用方法 var methods = myQuery.methods; //myQuery对象执行exec方法,会根据methodName委托到真正要执行的函数 myQueryObj.exec = function(methodName) { return methods[methodName].apply(myQueryObj, [ arrDom ] .concat(slice.call(arguments, 1))); } return myQueryObj; }; //myQuery导出到window全局作用域 win.$ = win.myQuery = myQuery; //myQuery对象公用方法 myQuery.methods = { version : function() { return "1.0"; }, text : function(arrDom, s) { if (!s) { return arrDom[0].innerText; } else { for ( var i = 0; i < arrDom.length; i++) { arrDom[i].innerText = s; } } return this; }, each : function(arrDom, fn) { for ( var i = 0; i < arrDom.length; i++) { if (false === fn.call(arrDom[i], i, arrDom[i])) { break; } } return this; }, get : function(arrDom, index) { if (!index) { return slice.call(arrDom); } else { return arrDom[i]; } }, size : function(arrDom) { return arrDom.length; } }; })(window); </script> <script> //封装DOM API alert($("#lazy2009").exec("text")); alert($("#lazy_").exec("text")); //链式代码 $("div").exec("text", "hello, world").exec("each", function(i, o) { alert(o.innerText + "==" + this.innerText); }); alert($("div").exec("size")); //扩展方法 if (!myQuery.methods.toArray) { myQuery.methods.toArray = function(arrDom) { return arrDom.slice(0); } } alert($("div").exec("toArray")); </script> </BODY> </HTML>这个myQuery实现与私有模式的唯一区别仅仅在于
//myQuery对象执行exec方法,会根据methodName委托到真正要执行的函数 myQueryObj.exec = function(methodName) { return methods[methodName].apply(myQueryObj, [ arrDom ] .concat(slice.call(arguments, 1))); }
myQuery对象只有一个方法exec,这个方法的第一个参数是实际上要执行方法的名字,当执行exec时候,exec委托了第一个参数指定的方法去执行。execMethod接下来的其他参数是依次传递到要执行方法的参数。
这个实现版本确实满足了生成对象的高性能以及底层数据的私有性,但是缺点是调用语法不符合常规。jQuery easy ui采取了类似这样的模式来封装api,不过目的不是为了私有性,而是为了每一次方法调用都返回一个jQuery对象。例如$("div").datagrid('addRow',{xxx:xxx}).datagrid('deleteRow',3)。尽管直觉上$("div").getDatagrid().addRow({XXX:XXX}).deleteRow(3)更可读,但是中途getDatagrid()就不是返回一个jQuery对象了。委托模式除了调用语法有些别扭之外,其余在性能、扩展性、适应各种变态要求上等等方面是非常好的,大家可以将之作为一种候选的封装模式。
相关推荐
### Object-Oriented JavaScript #### 知识点一:面向对象编程在JavaScript中的应用 - **定义**:面向对象编程(Object-Oriented Programming,OOP)是一种编程范式,它将程序设计围绕“对象”进行组织。在...
在标题“Object-oriented-javascript”和描述“关于javascipt的一本很不错的书,主要是从初级开始的,面向对象的书。”中,我们可以提取出关于面向对象JavaScript编程的知识点。这本书由Stoyan Stefanov所著,出版于...
JavaScript,作为互联网上最广泛使用的脚本语言,其面向对象特性是开发者必须掌握的核心技能之一。这本书籍为读者提供了全面且深入的理解,帮助他们更好地利用这些特性来构建高效、可维护的代码。 首先,我们要理解...
面向对象编程(Object-Oriented Programming,简称OOP)是一种广泛应用于软件开发的方法论,它通过将数据和处理这些数据的方法组织在一起,形成“对象”,从而实现对复杂系统的抽象和管理。《面向对象的JavaScript...
在 JavaScript 中,可以通过函数作用域、闭包和模块模式等方式实现封装。 - **继承**:继承允许子类继承父类的属性和方法,减少代码重复。JavaScript 使用原型链来实现继承,每个对象都有一个指向其原型对象的内部...
### Object_Oriented_Javascript #### 重要概念与知识点概览 **JavaScript**作为一种流行的编程语言,在Web开发中占据着核心地位。随着技术的发展,它不仅限于浏览器环境中的脚本编写,还扩展到了服务器端(如Node...
标题中的"-___-__-_-_-_-“似乎是一种占位符或者编码,没有明确的含义,这可能是指一个未命名或未完整填写的项目。在实际的IT环境中,标题通常会包含具体的话题或者项目的名称,比如"JavaScript高级编程技巧"或"Web...
6. **面向对象编程**:探讨JavaScript的原型继承、构造函数和类,以及模块化开发的策略。 在jQuery部分,你将接触到以下内容: 1. **选择器**:学习jQuery丰富的选择器,如ID选择器、类选择器、属性选择器等,使得...
1. **模块**:在JavaScript中,可以通过自定义对象或立即执行函数表达式来模拟模块,限制全局变量的使用,提高代码可维护性。 2. **命名空间**:通过创建一个主对象,将相关的函数和变量作为其属性,可以避免命名...
面向对象编程(Object-Oriented Programming,简称OOP)是软件开发中的一种重要思想,它在JavaScript中的应用为开发者提供了更高效、结构化的代码组织方式。JavaScript作为一种动态类型的脚本语言,起初并不是设计来...
3.JavaScript 闭包 4.JavaScript 事件 5.javascript 跨域 6.javascript 命名空间 Oject-Oriented 1.JavaScript Expressive 2. Interfaces 3.Introduction 4. Inheritance 5.AOP Jquery [jQuery][9] [jQuery...
面向对象编程(Object-Oriented Programming,简称OOP)是一种编程范式,它基于“对象”的概念,将数据和操作数据的方法封装在一起。在JavaScript中,尽管它最初设计为函数式语言,但随着时间的发展,已经引入了丰富...
在本项目中,“object-oriented-[removed]Udacity类的项目”主要关注的是面向对象编程的概念,特别是使用JavaScript语言来实现。面向对象编程(Object-Oriented Programming, OOP)是一种编程范式,它基于“对象”的...
JavaScript中的闭包是一种强大的特性,它允许函数访问和操作其外部作用域的变量,即使在其外部函数执行完毕后,这些变量依然保持活动状态。闭包是JavaScript中内存管理的重要概念,能够有效地避免全局变量污染,同时...
- **模块模式**:通过闭包实现私有成员,并暴露公共API,提高代码的封装性和安全性。 - **组合模式**:将对象组合成树形结构来表示“部分-整体”的层次关系,使得用户可以以一致的方式处理单个对象以及对象组合。 - ...
JavaScript,作为一种广泛应用于Web开发的动态编程语言,其面向对象编程(Object-Oriented Programming,简称OOP)特性是理解其高级用法的关键。本文档深入探讨了JavaScript中的面向对象特性,包括类、对象、继承、...
原书名: Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries. JavaScript作为一门浏览器语言的核心思想; 面向对象编程的基础知识及其在JavaScript中...
在JavaScript的世界里,面向对象编程(Object-Oriented Programming,简称OOP)是一种重要的编程范式,它允许我们以类和对象的方式来组织代码,提高代码的复用性和可维护性。jQuery,作为JavaScript库的巨头,虽然其...