插件封装规范

Posted 2020-11-02 伊痕殿

插件需要满足的条件

一个可复用的插件需要满足以下条件：

• 插件自身的作用域与用户当前的作用域相互独立，也就是插件内部的私有变量不能影响使用者的环境变量；
• 插件需具备默认设置参数；
• 插件除了具备已实现的基本功能外，需提供部分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
        }]
    }