jQuery插件编写：基础篇（一）

我相信每个使用过jQuery的朋友都会对它强大的魅力所折服。jquery给我们提供了一组跨浏览器的操作DOM的增强API，这使得我们开发拥有丰富功能的Web应用变得更加简单。另外，jQuery也采用了非常棒的插件机制，在增强了jQuery的功能的同时保持了jQuery核心库的体积很小。实际上，拥有众多插件的支持，也是我们使用jQuery的另一个重要原因。也许是为了项目需要，也许是为了自己能一试身手，我们想要自己开发插件。

jQuery给我们提供的操作方法分为两种，一种是工具型的函数，它们都直接添加到$命名空间上，如$.ajax(). $.trim()等等。另一种是jQuery对象上的方法，如：$("#divDemo").width(400)。同样，我们编写的插件也将分为两类：

（1）直接定义在$命名空间上的工具函数

（2）添加到jQuery包装集（jQuery对象）上的方法

在这一篇中，我们将先介绍如何开发第一种插件。

基于js的动态性，我们很容易就能完成一个简单的插件。

 

$.sayHello = function() {
    alert("Hello World!");
}
$.sayHello(); // alert "Hello World!"

但是我们有时不能保证$符号一定指代的是jQuery，用户可能使用了$.noConflict()。因此我们要采用一个小技巧来实现。

(function($) {
    // 这里还可以添加插件的私有变量

    $.sayHello = function() {
        alert("Hello World!");
    }
})(jQuery);
$.sayHello();// alert "Hello World!"

这里的不同之处是我们把插件代码放在了一个即时执行函数中，把jQuery作为参数传递给了函数内部的$变量中，这下我们就可以放心的使用我们心爱的$符号了。而且这种方式还给我们带来了一个惊喜，我们可以在这个匿名函数中定义一些临时变量，来辅助我们开发一些复杂的插件，而不会污染全局变量环境。如下面的例子所示：

(function($) {
    // 这里还可以添加插件的私有变量
    var title = "警告"; // 默认标题
    var content = "系统运行错误"; // 默认消息内容

    $.sayHello = function(t, c) {
        var msg = "";
        if(t) {
            msg += "TITLE:" + t;
        } else {
            msg += "TITLE:" + title; // 用户没指定就选择默认
        }
        msg += "\n";
        if(c) {
            msg += "CONTENT:" + c;
        } else {
            msg += "CONTENT:" + content; // 默认值
        }
        alert(msg);
    }
})(jQuery);
$.sayHello(); // alert TITLE:警告（换行）CONTENT:系统运行错误
$.sayHello("提示","操作成功"); // alert TITLE:提示（换行）CONTENT:操作成功

这里就有了一个插件的基本原型了，我们给它添加了默认配置值。插件使用者不传任何参数将以默认值来弹出提示，如果传入了参数就以用户传入的参数进行显示。其实我们所定义的title和content都是插件的配置项。有时候一个插件可能包含几十个配置项，这样一个个去判断用户是否传入参数显然不妥。而且按照这种参数列表的形式提供几十项配置更是不可能。这里我们有另外一个技巧可以解决上述问题。用一个普通JS对象作为函数的参数。

(function($) {
    var settings = {
        title : "警告",
        secondTitle : "系统警告",
        content : "系统运行错误"
    };
    $.sayHello = function(options) {
        settings = $.extend(settings, options || {}); // options 中的项会依次覆盖setings中的项
        var msg = "TITLE:" + settings.title + "\n";
        msg += "SECOND_TITLE:" + settings.secondTitle + "\n";
        msg += "CONTENT:" + settings.content;
        alert(msg);
    }
})(jQuery);
$.sayHello({
    title:"First",
    secondTitle:"Scond",
    content:"Hello"
}); // 按照这种方式去调用插件，里面的title，secondTitle, content 都是可选的

这种方式是目前比较常用的插件开发模式。采用一个options对象作为插件函数的参数，便可以提供大量可选的参数配置。而在插件内部使用一个settings对象来列出所有的默认配置值。再借助神奇的$.extend()函数，我们可以很方便的使用options来覆盖Settings中的默认值。关于$.extend()简单举一个例子，比如：

var settings = {
    name : "Jim",
    sex : "Boy"
}
var options = {
    name : "Lucy"
}
settings = $.extend(settings, options || {});
执行完成后，Settings = {name : "Lucy", sex : "Boy"}

另外第二个参数采用options || {} 是为了防止options未定义，就用空对象{}去覆盖。$.extend()函数还有其他的一些用法，可以查阅相关文档。

下面给出编写第一类插件（实用函数）的基本框架结构：

(function($) {
    var settings = {
        def1 : "def1",
        def2 : "def2",
        //... 更多默认配置
    };
    $.myPlugin = function(options) {
        settings = $.extend(settings, options || {}); // 合并默认和用户配置

        // 这里写你的插件逻辑
    }
})(jQuery);