深入懂得jQuery插件开发

深入理解jQuery插件开发

英文原文：Extraordinary Thougths  ，编译：伯乐在线——戴嘉华

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

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

现在，来解剖我们的代码吧！
 
容器：一个即时执行函数
根本上来说，每个插件的代码是被包含在一个即时执行的函数当中，如下：
上面的代码中的函数可以像其他的jQuery函数那样通过“$(‘#element’).pluginName()”来调用。注意，我是如何把“return this”语句加进去的；这小片的代码通过返回一个原来元素的集合（包含在this当中）的引用来产生链式调用的效果，而这些元素是被一个jQuery对象所包裹的。你也应该注意，“this”在这个特定的作用域中是一个jQuery对象，相当于“$(‘#element’)”。
 
根据返回的对象，我们可以总结出，在上面的代码中，使用“$(‘#element’).pluginName()”的效果和使用“$(‘#element’)”的效果是一样的。在你的即时执行函数作用域中，没必要用“$(this)”的方式来把this包裹到一个jQuery对象中，因为this本身已经是被包装好的jQuery对象。
 
多个元素：理解Sizzle
jQuery使用的选择器引擎叫Sizzle，Sizzle可以为你的函数提供多元素操作（例如对所有类名相同的元素）。这是jQuery几个优秀的特性之一，但这也是你在开发插件过程中需要考虑的事情。即使你不准备为你的插件提供多元素支持，但为这做准备仍然是一个很好的实践。
 
这里我添加了一小段代码，它让你的插件代码为多元素集合中每个元素单独地起作用：
// Shawn Khameneh// ExtraordinaryThoughts.com (function($) {    varprivateFunction = function() {        // 执行代码    }     varmethods = {        init:function(options) {             // 在每个元素上执行方法            returnthis.each(function() {                var$this= $(this);                 // 尝试去获取settings，如果不存在，则返回“undefined”                varsettings = $this.data('pluginName');                 // 如果获取settings失败，则根据options和default创建它                if(typeof(settings) == 'undefined') {                     vardefaults = {                        propertyName:'value',                        onSomeEvent:function() {}                    }                     settings = $.extend({}, defaults, options);                     // 保存我们新创建的settings                    $this.data('pluginName', settings);                }else{                    / 如果我们获取了settings，则将它和options进行合并（这不是必须的，你可以选择不这样做）                    settings = $.extend({}, settings, options);                     // 如果你想每次都保存options，可以添加下面代码：                    // $this.data('pluginName', settings);                }                 // 执行代码             });        },        destroy:function(options) {            // 在每个元素中执行代码            return$(this).each(function() {                var$this= $(this);                 // 执行代码                 // 删除元素对应的数据                $this.removeData('pluginName');            });        },        val:function(options) {            // 这里的代码通过.eq(0)来获取选择器中的第一个元素的，我们或获取它的HTML内容作为我们的返回值            varsomeValue = this.eq(0).html();             // 返回值            returnsomeValue;        }    };     $.fn.pluginName = function() {        varmethod = arguments[0];         if(methods[method]) {            method = methods[method];            arguments = Array.prototype.slice.call(arguments, 1);        }elseif(typeof(method) == 'object'|| !method ) {            method = methods.init;        }else{            $.error('Method ' +  method + ' does not exist on jQuery.pluginName' );            returnthis;        }         returnmethod.apply(this, arguments);     } })(jQuery);

在上面的代码中，我检验了元素的数据是否存在。如果数据不存在，“options”和“default”会被合并，构建成一个新的settings，然后用“data（）”保存在元素中。
 
完成：请继续阅读学习！
下面是一些参考资料的链接：
●jQuery Documentation – Plugins/Authoring
●jjQuery Documentation – Context, Call, and Apply
●jAlternative Method Using “$.fn.extend()”
●jAnother Guide Demonstrating Secondary Functions
最后但同样重要的一点是，我还强烈推荐《JavaScript模式》这本书。我发现的一些最好的书是关于代码模式的，这本书会带领你开始开发更清晰的代码和插件。