自动采集编写(看来在jQuery插件中的编写文档正适合你)

　　自动采集编写(看来在jQuery插件中的编写文档正适合你)

　　看起来您对 jQuery 的使用很感兴趣，并且想学习如何编写自己的插件。很好，这份文件是为你准备的。使用插件和方法扩展 jQuery 非常强大，将最智能的功能封装到插件中可以为您和您的团队节省大量的开发时间。

　　开始

　　写一个jQuery插件，需要在jQuery.fn对象中添加一个新的函数属性，属性名就是插件的名字

　　jQuery.fn.myPlugin = function() {

　　// 插件的具体内容放在这里

　　};

　　等一下！我知道和喜爱的美元在哪里？它仍然存在，只是为了确保您的插件不与使用 $ 的其他库冲突，有一个最佳实践：将 jQuery 传递给 IIFE（立即调用的函数）并将其映射到 $ ，这样可以避免执行被其他库覆盖范围内。

　　（函数（$）{

　　$.fn.myPlugin = function() {

　　// 插件的具体内容放在这里

　　};

　　})(jQuery);

　　嗯，这更好。现在，在这个闭包中，我们可以随意用 $ 替换 jQuery。

　　语境

　　现在外壳已经到位，是时候开始编写实际的插件代码了。但在此之前，关于上下文，我有话要说。在插件函数的直接作用域中，关键字 this 指的是调用插件的 jQuery 对象。这是一个经常出错的地方，因为在某些情况下 jQuery 接受一个回调函数，其中 this 引用本地 DOM 元素。这通常会导致开发人员不必要地在 jQuery 函数中再次包装 this 关键字。

　　(函数($){

　　$.fn.myPlugin = function() {

　　// 不需要再次执行 $(this)，因为 "this" 已经是一个 jQuery 对象

　　// $(this) 和 $($('#element')) 一样

　　this.fadeIn('正常', function(){

　　// 这里 this 关键字指向 DOM 元素

　　});

　　};

　　})(jQuery);

　　$('#element').myPlugin();

　　根据

　　现在我们了解了 jQuery 插件的上下文，让我们编写一个实际做某事的插件。

　　(函数($){

　　$.fn.maxHeight = 函数（） {

　　变量最大值 = 0;

　　这个每个（函数（）{

　　最大值 = Math.max( 最大值，$(this).height() );

　　});

　　返回最大值；

　　};

　　})(jQuery);

　　--

　　var 最高 = $('div').maxHeight(); // 返回最高 div 的高度

　　这个简单的插件利用 .height() 返回页面中最高 div 的高度

　　保持可链接性

　　前面的示例返回页面上最高 div 的整数值，但很多时候插件只是以某种方式修改元素集并将它们传递给调用链中的下一个方法。这就是 jQuery 设计的美妙之处，也是它如此受欢迎的原因之一。为了保持插件的可链接性，必须确保插件返回 this 关键字。

　　(函数($){

　　$.fn.lockDimensions = 函数（类型）{

　　返回 this.each(function() {

　　var $this = $(this);

　　if ( !type || type == 'width' ) {

　　$this.width($this.width());

　　}

　　if ( !type || type == 'height' ) {

　　$this.height($this.height());

　　}

　　});

　　};

　　})(jQuery);

　　--

　　$('div').lockDimensions('width').css('color', 'red');

　　该插件在直接作用域内返回 this 关键字，保持可链接性，因此 jQuery 集合可以通过其他方法进行操作，例如 .css()。因此，如果插件不需要真正的返回值，则应始终在插件函数的直接范围内返回 this 关键字。此外，正如您所料，调用插件时的参数被传递到插件函数的直接作用域中。在上面的例子中，字符串“width”成为插件函数的类型参数。

　　默认设置和选项

　　对于提供许多选项的更复杂、可配置的插件，最佳实践是提供一个可以在调用插件时扩展（通过 $.extend ）的默认设置。这样在调用插件的时候就不需要很多参数了，只需要一个对象参数，内容就是你想要与默认值不同的部分设置。方法如下：

　　(函数($){

　　$.fn.tooltip = 函数（选项）{

　　// 创建一些默认值，使用提供的任何选项扩展它们

　　var 设置 = $.extend( {

　　“位置”：“顶部”，

　　“背景色”：“蓝色”

　　}， 选项）;

　　返回 this.each(function() {

　　// 这里是工具提示插件代码

　　});

　　};

　　})(jQuery);

　　--

　　$('div').tooltip({

　　“位置”：“左”

　　});

　　在此示例中，使用给定选项调用工具提示插件后，默认位置设置被覆盖为“左”，但背景颜色设置仍为默认“蓝色”。最终设置对象如下所示：

　　{

　　'位置' : '左',

　　“背景色”：“蓝色”

　　}

　　这是提供高度可配置插件的好方法，无需强制开发人员定义所有选项。

　　命名空间

　　为插件正确定义命名空间是插件开发的重要部分。正确定义命名空间可确保您的插件很难被同一页面上的其他插件或其他代码覆盖。命名空间还可以让插件开发人员的生活更轻松，因为它们可以帮助您跟踪您的方法、事件和数据。

　　插件方法

　　一个插件不应该在 jQuery.fn 对象中声明多个命名空间

　　(函数($){

　　$.fn.tooltip = 函数（选项）{

　　// 这

　　};

　　$.fn.tooltipShow = 函数（）{

　　// 不

　　};

　　$.fn.tooltipHide = 函数（）{

　　// 好的

　　};

　　$.fn.tooltipUpdate = 功能（内容）{

　　//!!!

　　};

　　})(jQuery);

　　这非常糟糕，因为它弄乱了 $.fn 命名空间。要解决此问题，您应该将所有插件方法采集到一个对象定义中，并通过传递方法名称字符串来调用它。

　　(函数($){

　　变种方法 = {

　　初始化：函数（选项）{

　　// 这

　　},

　　显示：函数（）{

　　// 非常

　　},

　　隐藏：函数（）{

　　// 好的

　　},

　　更新：功能（内容）{

　　//!!!

　　}

　　};

　　$.fn.tooltip = 函数（方法）{

　　// 方法调用逻辑

　　如果（方法[方法]）{

　　返回方法[方法].apply(this, Array.prototype.slice.call(arguments, 1));

　　} else if ( typeof method === 'object' || ! method ) {

　　返回方法.init.apply（这个，参数）；

　　} 别的 {

　　$.error( '方法' + 方法 + ' 在 jQuery.tooltip 上不存在' );

　　}

　　};

　　})(jQuery);

　　// 调用初始化方法

　　$('div').tooltip();

　　// 调用初始化方法

　　$('div').tooltip({

　　富：'酒吧'

　　});

　　--

　　// 调用隐藏方法

　　$('div').tooltip('hide');

　　--

　　// 调用更新方法

　　$('div').tooltip('update', '这是新的提示内容！');

　　这种插件架构允许你将所有方法封装在插件的父闭包中，调用时传递方法名字符串，然后将你需要的其他参数传递给方法。这种封装和架构是 jQuery 插件社区的标准，并已被无数插件使用，包括 jQueryUI 中的插件和小部件。

　　事件

　　bind 方法有一个鲜为人知的特性：它支持为绑定事件定义命名空间。如果你的插件要绑定事件，最好为它定义一个命名空间。这样，当您返回 unbind 时，它不会影响同一事件类型上的其他绑定事件。要为事件定义命名空间，请附加“.”。到要绑定的事件类型。

　　(函数($){

　　变种方法 = {

　　初始化：函数（选项）{

　　返回 this.each(function(){

　　$(window).bind('resize.tooltip', methods.reposition);

　　});

　　},

　　销毁：函数（）{

　　返回 this.each(function(){

　　$(window).unbind('.tooltip');

　　})

　　},

　　重新定位：函数（）{

　　// ...

　　},

　　显示：函数（）{

　　// ...

　　},

　　隐藏：函数（）{

　　// ...

　　},

　　更新：功能（内容）{

　　// ...

　　}

　　};

　　$.fn.tooltip = 函数（方法）{

　　如果（方法[方法]）{

　　返回方法[方法].apply(this, Array.prototype.slice.call(arguments, 1));

　　} else if ( typeof method === 'object' || ! method ) {

　　返回方法.init.apply（这个，参数）；

　　} 别的 {

　　$.error( '方法' + 方法 + ' 在 jQuery.tooltip 上不存在' );

　　}

　　};

　　})(jQuery);

　　--

　　$('#fun').tooltip();

　　// 一段时间之后...

　　$('#fun').tooltip('destroy');

　　在这个例子中，当 tooltip 被 init 方法初始化时，它会将 reposition 方法绑定到命名空间为“tooltip”的窗口对象的 resize 事件上。之后，如果开发者想要销毁该对象，可以将插件的命名空间（即“tooltip”）传递给unbind方法，解除插件所有事件的绑定。这使我们可以安全地从该插件中解除绑定事件，并避免意外影响绑定在插件之外的事件。

　　数据

　　在插件开发期间，您可能经常需要维护状态，或检查您的插件是否已在给定元素上初始化。jQuerydata 方法是跟踪每个元素的变量的好方法。但是最好有一个对象来保存所有变量并使用单个命名空间访问该对象，而不是跟踪一堆具有不同名称的数据。

　　(函数($){

　　变种方法 = {

　　初始化：函数（选项）{

　　返回 this.each(function(){

　　var $this = $(this),

　　数据 = $this.data('tooltip'),

　　工具提示 = $('

　　', {

　　文本：$this.attr('title')

　　});

　　// 如果插件还没有初始化

　　如果（！数据）{

　　/*

　　在这里做更多的设置

　　*/

　　$(this).data('tooltip', {

　　目标：$这个，

　　工具提示：工具提示

　　});

　　}

　　});

　　},

　　销毁：函数（）{

　　返回 this.each(function(){

　　var $this = $(this),

　　数据 = $this.data('tooltip');

　　// 命名空间 FTW

　　$(window).unbind('.tooltip');

　　数据.tooltip.remove();

　　$this.removeData('tooltip');

　　})

　　},

　　重新定位：函数（）{ // ... }，

　　显示：函数（）{ // ... }，

　　隐藏：函数（）{ // ... }，

　　更新：函数（内容）{ // ...}

　　};

　　$.fn.tooltip = 函数（方法）{

　　如果（方法[方法]）{

　　返回方法[方法].apply(this, Array.prototype.slice.call(arguments, 1));

　　} else if ( typeof method === 'object' || ! method ) {

　　返回方法.init.apply（这个，参数）；

　　} 别的 {

　　$.error( '方法' + 方法 + ' 在 jQuery.tooltip 上不存在' );

　　}

　　};

　　})(jQuery);

　　data 方法可帮助您跟踪插件的多个方法调用之间的变量和状态。将数据放在单个对象中并为其定义命名空间有助于集中访问插件的所有属性，同时还可以在需要时减少命名空间以供删除。

　　摘要和最佳实践

　　编写 jQuery 插件使库更高效。将您最聪明和最有用的功能抽象为可重用代码将节省您的时间并进一步提高开发效率。以下是本文档的简短摘要以及开发下一个 jQuery 插件时要记住的事项：

　　始终将插件包装在闭包中 { /* 插件放在这里 */ })( jQuery );

　　不要在插件函数的直接范围内另外包装这个关键字

　　始终使插件函数返回 this 关键字以保持可链接性，除非插件具有真正的返回值。

　　您应该传递一个可以覆盖插件默认选项的设置对象，而不是向插件传递大量参数。

　　不要在一个插件中使用多个命名空间来使 jQuery.fn 对象混乱。

　　始终为方法、事件和数据定义命名空间。

　　---------------------