细说 jQuery 插件篇（一） - 添加全局函数

当咱们但愿将一些功能性代码重复使用，能够将其打包成一个 jQuery 插件来使用。

使用 $ 别名

首先咱们在编写插件时必须保证 jQuery 库已经载入，可是咱们不能保证 $ 必定可用，为了使用 $ 别名，咱们能够利用 IIFE （Immediately Invoked Function Expression），即当即执行函数：

(function($) {
  //...
}(jQuery));

函数只接收一个参数，咱们经过这个参数传入了jQuery对象。所以在这个函数内部，使用 $ 别名就不会有冲突了。

添加全局函数

所谓全局函数就是 jQuery 对象的方法，例如在 Ajax 一篇中介绍的 $.get 等方法。咱们来添加一个新的全局函数 $.sum：

(function($) {
  $.sum = function(array) {
    var total = 0;
    $.each(array, function(index, value) {
      value = $.trim(value);
      value = parseFloat(value) || 0;
      total += value;
    });
    return total;
  };
}(jQuery));

咱们来测试下这个为数组元素求和的方法是否生效：

隔离函数

如今咱们已经在 jQuery 命名空间中建立了一个新的全局函数，但这样写有可能会污染命名空间，例如当其余插件也使用 sum 命名时就会出现冲突，为了不冲突的发生，咱们能够使用命名空间来隔离函数，即将函数封装到一个对象中。

(function($) {
  $.myPlugin = {
    sum: function(array) {
      var total = 0;
      $.each(array, function(index, value) {
        value = $.trim(value);
        value = parseFloat(value) || 0;
        total += value;
      });
      return total;
    },
  }
}(jQuery));

此时咱们能够这样来使用：

将上述代码保存到 jQuery.myPlugin.js 文件中，就能够将其做为一个简单的插件来使用了。

参考

http://book.douban.com/subject/24669823/