如何使用jQuery封装插件

jQuery官方给了一套对象级别开发插件的模板 。

如果使用的是 sublimeText 编辑器，推荐安装插件 jQuery，在文件中输入 plugin + Enter 会自动生成代码片段。

安装成功后在 js 文件中输入 plugin ，会出现下图所示内容：

选择 plugin （method basic），出现以下内容：

(function($) {
// What does the pluginName plugin do?
$.fn.pluginName = function(options) {

  if (!this.length) { return this; }

  var opts = $.extend(true, {}, $.fn.pluginName.defaults, options);

  this.each(function() {
    var $this = $(this);

  });

  return this;
};

// default options
$.fn.pluginName.defaults = {
  defaultOne: true,
  defaultTwo: false,
  defaultThree: 'yay!'
};

})(jQuery);

给插件起个名字，添加到红框内 ，在绿框内设置所需的参数，在蓝框内编写插件的主方法。

在 HTML 中调用该插件：

引入 jQuery 和插件 js 文件，选择 DOM 元素，调用插件。

可以参考下面这个封装插件的实例：

---

期待您的关注！