jQ的链式写法详解:
jq的链式写法很好用,直接打【.】就可以了,说起来JQ 是如何实现链式写法的呢?
很多人都说jq的链式写法就是 return this 那么return this代表了什么呢?
简单说return this就是要返回下一个函数的执行父级(原谅我语文不好,找不到一个更好的词代替父级这俩个字。)
那么下面写个例子,来实现一个简单的链式写法:
1 function a(){ 2 // 执行一些操作。 3 console.log(111); 4 return window; 5 } 6 function b(){ 7 console.log(22); 8 //执行一些操作。 9 return window; 10 } 11 a().b();
这算实现了链式写法吧? 我返回下一个函数的父级,当a函数执行完后,返回window,这样下个b函数也可以进行操作,当然这个在项目中不这么写。
在写个项目中可以使用的链式写法:
1 function a(){ 2 console.log(1); 3 return this; 4 } 5 function b(){ 6 console.log(2); 7 return this; 8 } 9 var obj={ 10 a:a, 11 b:b 12 } 13 obj.a().b();
那么jq是如何实现链式写法的呢?肯定不是这么简单对吧?
介绍下jq是如何实现链式写法的。
在jq中有这么一行代码定义了
1 jQuery = function (selector, context) { 2 return new jQuery.fn.init(selector, context, rootjQuery); 3 },
jQuery.fn = jQuery.prototype = {}
jQuery.fn.init.prototype = jQuery.fn;
简单说这几行代码实现了JQ的链式写法定义一个函数,return 一个实例,init函数里进行了处理初始化操作,比如选择器,拼接字符串等等,这里不一一介绍。
最后再将jq的prototype 赋值给init方法的prototype。
这样就实现了链式写法。在工作中也经常会使用到JQ的链式写法,比如说:
在做移动端项目的时候,通常大家会引入zepto。但是zepto大约27k左右,在移动端已经很大了,那么我们就有必要不去引入zepto。而是我们单独写一个常用方法库。
并且使用链式写法,操作简单,而且还是专门应对于我们的项目。所以推荐大家不引入zepto。而是自己去写个常用方法库。