jQ链式写法详解

jQ的链式写法详解:

  jq的链式写法很好用,直接打【.】就能够了,提及来JQ 是如何实现链式写法的呢?函数

  不少人都说jq的链式写法就是 return this   那么return this表明了什么呢?this

  简单说return this就是要返回下一个函数的执行父级(原谅我语文很差,找不到一个更好的词代替父级这俩个字。)spa

  那么下面写个例子,来实现一个简单的链式写法:prototype

 

 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函数也能够进行操做,固然这个在项目中不这么写。code

  在写个项目中可使用的链式写法:blog

 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是如何实现链式写法的呢?确定不是这么简单对吧?zepto

 介绍下jq是如何实现链式写法的。字符串

  在jq中有这么一行代码定义了it

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函数里进行了处理初始化操做,好比选择器,拼接字符串等等,这里不一一介绍。io

 最后再将jq的prototype 赋值给init方法的prototype。

 这样就实现了链式写法。在工做中也常常会使用到JQ的链式写法,好比说:

  在作移动端项目的时候,一般你们会引入zepto。可是zepto大约27k左右,在移动端已经很大了,那么咱们就有必要不去引入zepto。而是咱们单独写一个经常使用方法库。

  而且使用链式写法,操做简单,并且仍是专门应对于咱们的项目。因此推荐你们不引入zepto。而是本身去写个经常使用方法库。

相关文章
相关标签/搜索