深刻理解jQuery插件开发

时间  2019-12-11
标签 深刻 理解 jquery 插件 开发 栏目 JQuery 繁體版
原文   原文链接

若是你看到这篇文章，我确信你毫无疑问会认为jQuery是一个使用简便的库。jQuery可能使用起来很简单，可是它仍然有一些奇怪的地方，对它基本功能和概念不熟悉的人可能会难以掌握。可是不用担忧，我下面已经把代码划分红小部分，作了一个简单的指导。那些语法看起来可能过于复杂，可是若是进入到它的思想和模式中，它是很是简单易懂的。html

下面，咱们有了一个插件的基本层次：jquery

  1. // Shawn Khameneh  
  2. // ExtraordinaryThoughts.com  
  3.    
  4. (function($) {  
  5.     var privateFunction = function() {  
  6.         // 代码在这里运行  
  7.     }  
  8.    
  9.     var methods = {  
  10.         init: function(options) {  
  11.             return this.each(function() {  
  12.                 var $this = $(this);  
  13.                 var settings = $this.data('pluginName');  
  14.    
  15.                 if(typeof(settings) == 'undefined') {  
  16.    
  17.                     var defaults = {  
  18.                         propertyName: 'value',  
  19.                         onSomeEvent: function() {}  
  20.                     }  
  21.    
  22.                     settings = $.extend({}, defaults, options);  
  23.    
  24.                     $this.data('pluginName', settings);  
  25.                 } else {  
  26.                     settings = $.extend({}, settings, options);  
  27.                 }  
  28.    
  29.                 // 代码在这里运行  
  30.    
  31.             });  
  32.         },  
  33.         destroy: function(options) {  
  34.             return $(this).each(function() {  
  35.                 var $this = $(this);  
  36.    
  37.                 $this.removeData('pluginName');  
  38.             });  
  39.         },  
  40.         val: function(options) {  
  41.             var someValue = this.eq(0).html();  
  42.    
  43.             return someValue;  
  44.         }  
  45.     };  
  46.    
  47.     $.fn.pluginName = function() {  
  48.         var method = arguments[0];  
  49.    
  50.         if(methods[method]) {  
  51.             method = methods[method];  
  52.             arguments = Array.prototype.slice.call(arguments, 1);  
  53.         } else if( typeof(method) == 'object' || !method ) {  
  54.             method = methods.init;  
  55.         } else {  
  56.             $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );  
  57.             return this;  
  58.         }  
  59.    
  60.         return method.apply(this, arguments);  
  61.    
  62.     }  
  63.    
  64. })(jQuery); 

你可能会注意到，我所提到代码的结构和其余插件代码有很大的不一样。根据你的使用和需求的不一样，插件的开发方式也可能会呈现多样化。个人目的是澄清代码中的一些概念，足够让你找到适合本身的方法去理解和开发一个jQuery插件。app

 jquery

如今，来解剖咱们的代码吧！ 函数

容器：一个即时执行函数this

根本上来讲，每一个插件的代码是被包含在一个即时执行的函数当中，以下：spa

  1. (function(arg1, arg2) {  
  2.    // 代码  
  3. })(arg1, arg2); 

即时执行函数，顾名思义，是一个函数。让它不同凡响的是，它被包含在一对小括号里面，这让全部的代码都在匿名函数的局部做用域中运行。这并非说DOM（全局变量）在函数内是被屏蔽的，而是外部没法访问到函数内部的公共变量和对象命名空间。这是一个很好的开始，这样你声明你的变量和对象的时候，就不用担忧着变量名和已经存在的代码有冲突。prototype

如今，由于函数内部全部的全部公共变量是没法访问的，这样要把jQuery自己做为一个内部的公共变量来使用就会成为问题。就像普通的函数同样，即时函数也根据引用传入对象参数。咱们能够将jQuery对象传入函数，以下：插件

  1. (function($) {  
  2.    
  3.    // 局部做用域中使用$来引用jQuery  
  4. })(jQuery); 

咱们传入了一个把公共变量“jQuery”传入了一个即时执行的函数里面，在函数局部（容器）中咱们能够经过“$”来引用它。也就是说，咱们把容器当作一个函数来调用，而这个函数的参数就是jQuery。由于咱们引用的“jQuery”做为公共变量传入，而不是它的简写“$”，这样咱们就能够兼容Prototype库。若是你不用Prototype或者其它用“$”作简写的库的话，你不这样作也不会形成什么影响，可是知道这种用法还是一件好事。code

 

插件：一个函数htm

一个jQuery插件本质上是咱们塞进jQuery命名空间中一个庞大的函数，固然，咱们能够很轻易地用“jQuery.pluginName=function”，来达到咱们的目的，可是若是咱们这样作的话咱们的插件的代码是处于没有被保护的暴露状态的。“jQuery.fn”是“jQuery.prototype”的简写，意味当咱们经过jQuery命名空间去获取咱们的插件的时候，它仅可写（不可修改）。它事实上能够为你干点什么事呢？它让你恰当地组织本身的代码，和理解如何保护你的代码不受运行时候不须要的修改。最好的说法就是，这是一个很好的实践！

经过一个插件，咱们得到一个基本的jQuery函数：

  1. (function($) {  
  2.    
  3.     $.fn.pluginName = function(options) {  
  4.    
  5.         // 代码在此处运行  
  6.    
  7.         return this;  
  8.     }  
  9.    
  10. })(jQuery); 

上面的代码中的函数能够像其余的jQuery函数那样经过“$(‘#element’).pluginName()”来调用。注意，我是如何把“return this”语句加进去的；这小片的代码经过返回一个原来元素的集合（包含在this当中）的引用来产生链式调用的效果，而这些元素是被一个jQuery对象所包裹的。你也应该注意，“this”在这个特定的做用域中是一个jQuery对象，至关于“$(‘#element’)”。

根据返回的对象，咱们能够总结出，在上面的代码中，使用“$(‘#element’).pluginName()”的效果和使用“$(‘#element’)”的效果是同样的。在你的即时执行函数做用域中，不必用“$(this)”的方式来把this包裹到一个jQuery对象中，由于this自己已是被包装好的jQuery对象。

多个元素：理解Sizzle

jQuery使用的选择器引擎叫Sizzle，Sizzle能够为你的函数提供多元素操做（例如对全部类名相同的元素）。这是jQuery几个优秀的特性之一，但这也是你在开发插件过程当中须要考虑的事情。即便你不许备为你的插件提供多元素支持，但为这作准备仍然是一个很好的实践。

这里我添加了一小段代码，它让你的插件代码为多元素集合中每一个元素单独地起做用：

  1. function($) {  
  2.    
  3.     // 向jQuery中被保护的“fn”命名空间中添加你的插件代码，用“pluginName”做为插件的函数名称  
  4.     $.fn.pluginName = function(options) {  
  5.    
  6.         // 返回“this”（函数each（）的返回值也是this），以便进行链式调用。  
  7.         return this.each(function() {  
  8.    
  9.             // 此处运行代码，能够经过“this”来得到每一个单独的元素  
  10.             // 例如： $(this).show()；  
  11.             var $this = $(this);  
  12.    
  13.         });  
  14.    
  15.     }  
  16.    
  17. })(jQuery); 

在以上示例代码中，我并非用 each（）在个人选择器中每一个元素上运行代码。在那个被 each（）调用的函数的局部做用域中，你能够经过this来引用每一个被单独处理的元素，也就是说你能够经过$(this)来引用它的jQuery对象。在局部做用域中，我用$this变量存储起jQuery对象，而不是每次调用函数的时候都使用$(this)，这会是个很好的实践。固然，这样作并不老是必要的；但我已经额外把它包含在个人代码中。还有要注意的是，咱们将会对每一个单独方法都使用 each（），这样到时咱们就能够返回咱们须要的值，而不是一个jQuery对象。

下面是一个例子，假如咱们的插件支持一个 val 的方法，它能够返回咱们须要的值：

  1. $('#element').pluginName('val');  
  2. // 会返回咱们须要的值，而不是一个jQuery对象 

功能：公有方法和私有方法

一个基本的函数可能在某些状况下能够良好地工做，可是一个稍微复杂一点的插件就须要提供各类各样的方法和私有函数。你可能会使用不一样的命名空间去为你的插件提供各类方法，可是最好不要让你的源代码由于多余的命名空间而变得混乱。

下面的代码定义了一个存储公有方法的JSON对象，以及展现了如何使用插件中的主函数中去判断哪些方法被调用，和如何在让方法做用到选择器每一个元素上。

  1. (function($) {  
  2.    
  3.     // 在咱们插件容器内，创造一个公共变量来构建一个私有方法  
  4.     var privateFunction = function() {  
  5.         // code here  
  6.     }  
  7.    
  8.     // 经过字面量创造一个对象，存储咱们须要的共有方法  
  9.     var methods = {  
  10.         // 在字面量对象中定义每一个单独的方法  
  11.         init: function() {  
  12.    
  13.             // 为了更好的灵活性，对来自主函数，并进入每一个方法中的选择器其中的每一个单独的元素都执行代码  
  14.             return this.each(function() {  
  15.                 // 为每一个独立的元素建立一个jQuery对象  
  16.                 var $this = $(this);  
  17.    
  18.                 // 执行代码  
  19.                 // 例如： privateFunction();  
  20.             });  
  21.         },  
  22.         destroy: function() {  
  23.             // 对选择器每一个元素都执行方法  
  24.             return this.each(function() {  
  25.                 // 执行代码  
  26.             });  
  27.         }  
  28.     };  
  29.    
  30.     $.fn.pluginName = function() {  
  31.         // 获取咱们的方法，遗憾的是，若是咱们用function(method){}来实现，这样会毁掉一切的  
  32.         var method = arguments[0];  
  33.    
  34.         // 检验方法是否存在  
  35.         if(methods[method]) {  
  36.    
  37.             // 若是方法存在，存储起来以便使用  
  38.             // 注意：我这样作是为了等下更方便地使用each（）  
  39.             method = methods[method];  
  40.    
  41.         // 若是方法不存在，检验对象是否为一个对象（JSON对象）或者method方法没有被传入  
  42.         } else if( typeof(method) == 'object' || !method ) {  
  43.    
  44.             // 若是咱们传入的是一个对象参数，或者根本没有参数，init方法会被调用  
  45.             method = methods.init;  
  46.         } else {  
  47.    
  48.             // 若是方法不存在或者参数没传入，则报出错误。须要调用的方法没有被正确调用  
  49.             $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );  
  50.             return this;  
  51.         }  
  52.    
  53.         // 调用咱们选中的方法  
  54.         // 再一次注意咱们是如何将each（）从这里转移到每一个单独的方法上的  
  55.         return method.call(this);  
  56.    
  57.     }  
  58.    
  59. })(jQuery); 

注意我把 privateFunction 当作了一个函数内部的全局变量。考虑到全部的代码的运行都是在插件容器内进行的，因此这种作法是能够被接受的，由于它只在插件的做用域中可用。在插件中的主函数中，我检验了传入参数所指向的方法是否存在。若是方法不存在或者传入的是参数为对象， init 方法会被运行。最后，若是传入的参数不是一个对象而是一个不存在的方法，咱们会报出一个错误信息。

一样要注意的是，我是如何在每一个方法中都使用 this.each() 的。当咱们在主函数中调用 method.call(this) 的时候，这里的 this 事实上就是一个jQuery对象，做为 this 传入每一个方法中。因此在咱们方法的即时做用域中，它已是一个jQuery对象。只有在被 each（）所调用的函数中，咱们才有必要将this包装在一个jQuery对象中。

下面是一些用法的例子：

  1. /*  
  2.  注意这些例子能够在目前的插件代码中正确运行，并非全部的插件都使用一样的代码结构   
  3. */ 
  4. // 为每一个类名为 ".className" 的元素执行init方法  
  5. $('.className').pluginName();  
  6. $('.className').pluginName('init');  
  7. $('.className').pluginName('init', {}); // 向init方法传入“{}”对象做为函数参数  
  8. $('.className').pluginName({}); // 向init方法传入“{}”对象做为函数参数  
  9.    
  10. // 为每一个类名为 “.className” 的元素执行destroy方法  
  11. $('.className').pluginName('destroy');  
  12. $('.className').pluginName('destroy', {}); // 向destroy方法传入“{}”对象做为函数参数  
  13.    
  14. // 全部代码均可以正常运行  
  15. $('.className').pluginName('init', 'argument1', 'argument2'); // 把 "argument 1" 和 "argument 2" 传入 "init"  
  16.    
  17. // 不正确的使用  
  18. $('.className').pluginName('nonexistantMethod');  
  19. $('.className').pluginName('nonexistantMethod', {});  
  20. $('.className').pluginName('argument 1'); // 会尝试调用 "argument 1" 方法  
  21. $('.className').pluginName('argument 1', 'argument 2'); // 会尝试调用 "argument 1" ，“argument 2”方法  
  22. $('.className').pluginName('privateFunction'); // 'privateFunction' 不是一个方法 

在上面的例子中屡次出现了 {} ，表示的是传入方法中的参数。在这小节中，上面代码能够能够正常运行，可是参数不会被传入方法中。继续阅读下一小节，你会知道如何向方法传入参数。

 

设置插件：传入参数

许多插件都支持参数传入，如配置参数和回调函数。你能够经过传入JS键值对对象或者函数参数，为方法提供信息。若是你的方法支持多于一个或两个参数，那么没有比传入对象参数更恰当的方式。

  1. (function($) {  
  2.     var methods = {  
  3.         init: function(options) {  
  4.    
  5.             // 在每一个元素上执行方法  
  6.             return this.each(function() {  
  7.                 var $this = $(this);  
  8.    
  9.                 // 建立一个默认设置对象  
  10.                 var defaults = {  
  11.                     propertyName: 'value',  
  12.                     onSomeEvent: function() {}  
  13.                 }  
  14.    
  15.                 // 使用extend方法从options和defaults对象中构造出一个settings对象  
  16.                 var settings = $.extend({}, defaults, options);  
  17.    
  18.                 // 执行代码  
  19.    
  20.             });  
  21.         }  
  22.     };  
  23.    
  24.     $.fn.pluginName = function() {  
  25.         var method = arguments[0];  
  26.    
  27.         if(methods[method]) {  
  28.             method = methods[method];  
  29.    
  30.             // 咱们的方法是做为参数传入的，把它从参数列表中删除，由于调用方法时并不须要它  
  31.             arguments = Array.prototype.slice.call(arguments, 1);  
  32.         } else if( typeof(method) == 'object' || !method ) {  
  33.             method = methods.init;  
  34.         } else {  
  35.             $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );  
  36.             return this;  
  37.         }  
  38.    
  39.         // 用apply方法来调用咱们的方法并传入参数  
  40.         return method.apply(this, arguments);  
  41.    
  42.     }  
  43.    
  44. })(jQuery); 

正如上面所示，一个“options”参数被添加到方法当中，和“arguments”也被添加到了主函数中。若是一个方法已经被声明，在参数传入方法以前，调用那个方法的参数会从参数列表中删除掉。我用了“apply（）”来代替了“call（）”，“apply（）”本质上是和“call（）”作着一样的工做的，但不一样的是它容许参数的传入。这种结构也容许多个参数的传入，若是你愿意这样作，你也能够为你的方法修改参数列表，例如：“init:function(arg1, arg2){}”。

若是你是使用JS对象做为参数传入，你可能须要定义一个默认对象。一旦默认对象被声明，你可使用“$.extend”来合并参数对象和默认对象中的值，以造成一个新的参数对象来使用（在咱们的例子中就是“settings”）；

这里有一些例子，用来演示以上的逻辑：

  1. var options = {  
  2.     customParameter: 'Test 1',  
  3.     propertyName: 'Test 2' 
  4. }  
  5.    
  6. var defaults = {  
  7.     propertyName: 'Test 3',  
  8.     onSomeEvent: 'Test 4' 
  9. }  
  10.    
  11. var settings = $.extend({}, defaults, options);  
  12. /*  
  13. settings == {  
  14.     propertyName: 'Test 2',  
  15.     onSomeEvent: 'Test 4',  
  16.     customParameter: 'Test 1'  
  17. }  
  18. */ 

保存设置：添加持久性数据

有时你会想在你的插件中保存设置和信息，这时jQuery中的“data（）”函数就能够派上用场了。它在使用上是很是简单的，它会尝试获取和元素相关的数据，若是数据不存在，它就会创造相应的数据并添加到元素上。一旦你使用了“data（）”来为元素添加信息，请确认你已经记住，当再也不须要数据的时候，用“removeDate（）”来删除相应的数据。

  1. // Shawn Khameneh  
  2. // ExtraordinaryThoughts.com  
  3.    
  4. (function($) {  
  5.     var privateFunction = function() {  
  6.         // 执行代码  
  7.     }  
  8.    
  9.     var methods = {  
  10.         init: function(options) {  
  11.    
  12.             // 在每一个元素上执行方法  
  13.             return this.each(function() {  
  14.                 var $this = $(this);  
  15.    
  16.                 // 尝试去获取settings，若是不存在，则返回“undefined”  
  17.                 var settings = $this.data('pluginName');  
  18.    
  19.                 // 若是获取settings失败，则根据options和default建立它  
  20.                 if(typeof(settings) == 'undefined') {  
  21.    
  22.                     var defaults = {  
  23.                         propertyName: 'value',  
  24.                         onSomeEvent: function() {}  
  25.                     }  
  26.    
  27.                     settings = $.extend({}, defaults, options);  
  28.    
  29.                     // 保存咱们新建立的settings  
  30.                     $this.data('pluginName', settings);  
  31.                 } else {  
  32.                     / 若是咱们获取了settings，则将它和options进行合并（这不是必须的，你能够选择不这样作）  
  33.                     settings = $.extend({}, settings, options);  
  34.    
  35.                     // 若是你想每次都保存options，能够添加下面代码：  
  36.                     // $this.data('pluginName', settings);  
  37.                 }  
  38.    
  39.                 // 执行代码  
  40.    
  41.             });  
  42.         },  
  43.         destroy: function(options) {  
  44.             // 在每一个元素中执行代码  
  45.             return $(this).each(function() {  
  46.                 var $this = $(this);  
  47.    
  48.                 // 执行代码  
  49.    
  50.                 // 删除元素对应的数据  
  51.                 $this.removeData('pluginName');  
  52.             });  
  53.         },  
  54.         val: function(options) {  
  55.             // 这里的代码经过.eq(0)来获取选择器中的第一个元素的，咱们或获取它的HTML内容做为咱们的返回值  
  56.             var someValue = this.eq(0).html();  
  57.    
  58.             // 返回值  
  59.             return someValue;  
  60.         }  
  61.     };  
  62.    
  63.     $.fn.pluginName = function() {  
  64.         var method = arguments[0];  
  65.    
  66.         if(methods[method]) {  
  67.             method = methods[method];  
  68.             arguments = Array.prototype.slice.call(arguments, 1);  
  69.         } else if( typeof(method) == 'object' || !method ) {  
  70.             method = methods.init;  
  71.         } else {  
  72.             $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );  
  73.             return this;  
  74.         }  
  75.    
  76.         return method.apply(this, arguments);  
  77.    
  78.     }  
  79.    
  80. })(jQuery); 

在上面的代码中，我检验了元素的数据是否存在。若是数据不存在，“options”和“default”会被合并，构建成一个新的settings，而后用“data（）”保存在元素中。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程