细说 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/

您可能感兴趣的文章：
细说 jQuery 插件篇（二） – 添加实例方法
细说 jQuery 插件篇（一） – 添加全局函数
国外一个超赞的jQuery插件开发模式借鉴
细说 jQuery Ajax操作篇（一） – 数据加载
jQuery插件教程
jQuery源码分析系列
细说 jQuery Ajax操作篇（三） – 过程处理
jQuery自定义函数应用以及解析
学习JQuery插件开发教程
细说 jQuery 事件篇（五） – 事件的移除和重绑定