jQuery 插件格式 规范

方式一（自定义对象）：

(function($, window, document) {

 var Plugin, defaults, pluginName;

调用时的函数名：
    pluginName = "slidesjs";
     

默认配置：
    defaults= {

      width: 940,
      height: 528,
      callback: {
        loaded: function() {},
        start: function() {},
        complete: function() {}
      }
    };

 

构建自定义对象：

    Plugin = (function() {
      function Plugin(element, options) {
        this.element = element;
        this.options = $.extend(true, {}, defaults, options);          //拓展用户自定义参数
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
      }
      return Plugin;
    })();

 

拓展一系列方法：

Plugin.prototype.init  = function() { ... }

Plugin.prototype.next = function() { ... }

 ...  

 

拓展到jQuery的fn上：

return $.fn[pluginName] = function(options) {

//把选中的每个元素都进行实例化

      return this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {

          return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
      });
  };

 

 })(jQuery, window, document);

 

使用：

$(function() {
      $('#slides').slidesjs({
        width: 940,
        height: 528
      });
  });

 

或者这样扩展进jQuery也可以：

$.fn.Swipe = function(params) {

      return this.each(function() {

          $(this).data('Swipe', new Swipe($(this)[0], params));

      });

  }

 

 

方式2（简单点的）：

(function($) {
    "use strict";

    $.fn.boxRefresh = function(options) {
        var _option= $.extend({
            trigger: ".refresh-btn",
            onLoadStart: function(box) {},
            onLoadDone: function(box) {}
        }, options)；
        return this.each(function() { ... });
    };

})(jQuery);

 

另一种方式，使用extend：

(function(f) {

    jQuery.fn.extend({slimScroll: function(h) {

                   ...

    }});

 

    jQuery.fn.extend({slimscroll: jQuery.fn.slimScroll})

})(jQuery);

 

转载于:https://www.cnblogs.com/chuangweili/p/5166504.html