jQuery——开发插件

当我们编写的代码可以供其他人甚至我们自己重用的时候，可以通过将这些代码打包成一个新插件。

###**在插件中使用别名∗∗自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法，或者也可以在内部定义一个别名**
自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法，或者也可以在内部定义一个别名∗∗自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法，或者也可以在内部定义一个别名。

对于代码比较长的插件来说，很多人觉得不能使用$别名会导致代码难以理解。为了解决这个问题，可以在插件的作用域内定义这个快捷方式，方法就是定义一个函数并马上调用它。这种定义并立即调用函数的语法通常称为立即调用的函数表达式:

(function($){

       //在这里添加代码

       })(jQuery);

这个包装函数只接受一个参数，通过这个参数传入了jQuery对象。这个参数的名字是$，因此在这个函数内部，使用$别名就不会有冲突了。

###添加新的全局函数

jQuery内置的某些功能是通过全局函数提供的。

所谓全局函数，实际就是jQuery对象的方法，但从实践的角度来看，它们是位于jQuery命名空间内部的函数。

使用这种技术的典型例子就是$.ajax()函数。$.ajax()所做的一切都可以通过简单地调用一个名为ajax()的常规全局函数来实现，但是，这种方式会给我们带来函数名冲突的问题。

通过把这个函数放在jQuery的命名空间内，只需避免它与其他的jQuery方法冲突即可。对想要使用插件的人而言，想要用这个插件，必须要有jQuery库。

核心jQuery库提供的很多全局函数都是实用方法。所谓实用方法，就是一些常用功能的快捷方式，但即使手工编写同样功能的代码也不是很难。

要向jQuery的命名空间中添加一个函数，只需将这个新函数指定为jQuery对象的一个属性。

扩展全局jQuery对象

利用$.extend()函数，可以来定义全局函数。

调用$.extend()函数可以给全局jQuery对象添加属性（如果原来有相同的属性，就会替换原来的属性）。

使用命名空间隔离函数

由于可能其他插件定义相同的函数名，为了避免这种情况，把属于一个插件的全局函数都封装到一个对象中。

这个方法的本质是为所有的全局函数又创建了一个命名空间，叫做jQuery.mathUtils。在调用它们时必须得加上插件的名字：$.mathUtils.sum(sum);

###添加jQuery对象方法

jQuery中大多数内置的功能都是通过其对象实例的方法提供的。

当函数需要操作DOM时，就是将函数创建为jQuery实例方法的好机会。

一个合理的实例方法应该包含对它的上下文的操作。

####对象方法的上下文

在任何插件方法内部，关键字this引用的都是当前的jQuery对象。因而，可以在this上面调用任何内置的jQuery方法，或者提取它包含的DOM节点并操作该节点。

####隐式迭代

jQuery的选择符表达式可能会匹配零、一或多个元素。因此，在设计插件时必须考虑到这些可能的情况。

要在无论匹配多个元素的情况下都保证行为正确，最简单的方式就是始终在方法的上下文上调用.each(）方法；这样就会执行隐式迭代，而执行隐式迭代对于维护插件与内置方法的一致性是至关重要的。

this的含义

在对象方法体内，关键字this引用的是一个jQuery对象，但在每次调用的.each()方法中，this引用的则是一个DOM元素。

###使用jQuery UI部件工厂创建插件

jQuery UI库的核心包含了一个工厂方法，叫$.widget()方法。使用这个方法可以确保我们的代码达到所有jQuery UI部件用户任何的API标准。

###插件设计建议

为避免$别名与其他库发生冲突，可以使用jQuery，或者在立即调用的函数表达式中传入$，使其成为一个局部变量。
无论是以$.myPlugin的方式扩展jQuery，还是以$.fn.myPlugin的方式扩展jQuery的原型，给$命名空间添加的属性都不要超过一个。更多的公有方法和属性应该添加到插件的命名空间中。（例如：$.myPlugin/publicMethod或$.fn.myPlugin Property）。
别忘了为插件提供一个默认选项的对象：$.fn.myPlugin.defaults = {size:‘large’ }。
要允许插件用户提供一个默认选项的对象，包括影响后续方法的调用（$.fn.myPlugin.defaults.size = ‘medium’;）和单独调用($(‘div’).myPlugin({size:‘small’})?。
多数情况下，扩展jQuery原型时（$.fn.myPlugin）要返回this，以便插件用户通过连缀语法调用其他的jQuery方法（$.(‘div’）.myPlugin().find(‘p’).addClass(‘foo’)）。
在扩展jQuery原型时($.fn.myPlugin)，通过调用this.each()强制执行隐式迭代。
合适的时候，利用回调函数支持灵活地更改插件行为，从而不必修改插件代码。
如果插件时为了实现用户界面元素，或者需要跟踪元素的状态，使用jQuery UI部件工厂来创建。
利用Qunit等测试框架为自己的插件维护一组自动的单元测试，以确保插件能够按预期工作。
使用Git或其他版本控制系统跟踪代码的版本。可以考虑把插件公开托管到Github上，以便其他人帮你改进。
在把自己的插件提供给别人使用时，务必明确许可条款。建议考虑使用MIT许可，这也是jQuery使用的许可。

巴特西

jQuery——开发插件

最新文章

热门文章