jQuery插件开发的模式和结构.docxVIP

jQuery插件开发一般来说，jQuery插件的开发分为两种：一种是挂在jQuery命名空间下的全局函数，也可称为静态方法；另一种是jQuery对象级别的方法，即挂在jQuery原型下的方法，这样通过选择器获取的jQuery对象实例也能共享该方法。一、在讲解jQuery插件基本结构和模式前，先介绍下两个重要的方法，还有不知啥原因，代码无法折叠，导致整体篇幅稍微有点长，阅读时请加点耐心：1、$.extend(target, [object1], [objectN])该方法主要用于合并两个或更多对象的内容(属性)到第一个对象，并返回合并后的第一对象。如果该方法只有一个参数target，则该参数将扩展jQuery的命名空间，即作为静态方法挂在jQuery全局对象下，如jQuery里的$.ajax、$.getJSON全局函数等：// 将hello方法挂在jquery全局对象下，作为静态方法$.extend({hello: function() {alert(hello);} });又如，在jQuery全局对象中扩展一个hcy命名空间：$.extend({ hcy: { } });并将hello方法扩展到之前扩展的JQuery的hcy命名空间中去：$.extend($.hcy, {hello: function() {alert(hello);}});在开发插件时，也可以将方法扩展到jQuery的原型中去，如：$.extend($.fn, {hello: function() {alert(hello);}});值得注意的是：多个对象参数合并时，会破坏第一个对象的结构，所以可传递一个空对象作为第一个参数，如：$.extend({}, object1, object2);另外，对于深度拷贝，即如果对象中也嵌套子对象，则会拷贝并覆盖子对象(如果有同名属性)全部的属性，需要设置第一个参数deep为true值，如：$.extend(true, target, object1, [objectN])。2、$.fn.extend(target)在jQuery中，$.fn本质上是等于jQuery的原型，即$.fn = $.prototype，所以该方法实际上是为jQuery原型添加方法，即把target对象的方法添加到jQuery原型中去，这样jQuery对象实例就可以访问添加的方法了，这也是jQuery插件开发常用的方法，特别是添加多个接口时。如：// 将hello、hello2方法添加到jquery原型中$.fn.extend({hello: function() {alert(hello!);}, hello2: function() {alert(hello again!);}});如果添加单个方法到jQuery原型中，可使用$.fn.pluginName方法添加，如：// 将hello方法添加到jquery原型中$.fn.hello = function() { // ... };??二、在开发过一些 jQuery 插件后，慢慢的探索出了一套开发jQuery插件的基本结构和模式。这样在面对复杂多变的需要方案时，只要专注最主要的逻辑代码就行了。另外，使用相同的设计模式和架构也让修复bug或者二次开发更容易。在这里分享一些平时遇到和总结的经验：1、把全部代码放在闭包(一个即时执行函数)里此时闭包相当于一个私有作用域，外部无法访问到内部的信息，并且不会存在全局变量的污染情况。官方创建开发规范的解释是：a) 避免全局依赖；b) 避免第三方破坏；c) 兼容jQuery操作符$和jQuery 。如下所示：(function($) { // 局部作用域中使用$来引用jQuery // ...})(jQuery);这段代码在被解析时可理解成以下代码：varjQ = function($) { // code goes here}; jQ(jQuery);2、提供插件的默认参数选项一个扩展性良好的插件应该是可以让使用者根据需求自定义参数选项，并控制插件的行为，所以提供恢复默认选项是很有必要的。你可以通过jQuery的extend方法来设置这些选项：var defaults = { name: hcy, age: 22,job: student,walk: function() { // ... } };$.extend({}, defaults, options || {});注：参数选项设置时也可以使用如下模式，即把参数对象挂在插件命名空间下：?$.fn.pluginName.defaults = { name: hcy, age: 22,job: stud