1. 程式人生 > >插件封裝規範

插件封裝規範

基本 scrip type idt plugin del clas dde height

插件需要滿足的條件

一個可復用的插件需要滿足以下條件:

  • 插件自身的作用域與用戶當前的作用域相互獨立,也就是插件內部的私有變量不能影響使用者的環境變量;
  • 插件需具備默認設置參數;
  • 插件除了具備已實現的基本功能外,需提供部分API,使用者可以通過該API修改插件功能的默認參數,從而實現用戶自定義插件效果;
  • 插件需提供監聽入口,及針對指定元素進行監聽,使得該元素與插件響應達到插件效果;
  • 插件支持鏈式調用。

原生JavaScript插件編寫指南參見http://geocld.github.io/2016/03/10/javascript_plugin/

jquery插件開發流程

1、插件全局函數
將插件的所有功能寫在一個立即執行函數中

(function ($) {
      //....封裝組件邏輯
})(jQuery);

2、定義自己的組件的代碼

$.fn.rxgrid = function (options, param) {
  ...
  this.options = $.extend({}, this.defaults, options);
  ...
};
  • this.options = $.extend({}, this.defaults, options)用來合並默認參數和用戶傳進來的參數

3、定義組件的方法

$.fn.rxgrid.prototype = {
  initGrid: function(){},
  draw: function(){},
  ...
}

4、默認參數列表

$.fn.rxgrid.defaults = {
        width: 850,
        height: 500,
        caption: ‘‘,
        //數據
        data: [],
        //列名
        colNames: [‘guid‘, ‘name‘],
        colModel: [{
            name: ‘‘,
            index: ‘‘,
            width: ‘‘,
            hidden: false
        }]
    }

插件封裝規範