组件的插件开发

一、介绍：

插件：定义为组件的扩展或者插件的扩展，可以针对特定组件和版本开发的扩展插件，也可以针对已有的插件进行开发扩展插件。

二、插件开发约定：

1. 插件所需要的model数据，如果是组件没有的，插件自身通过扩展服务端api来请求数据，与组件无关系。
2. 如果组件由一些事件切换导致数据刷新时（如查询时间改变了），由插件自身负责监听切换时间的事件，先缓存在插件内，然后到组件的render事件触发时，再通过缓存的条件请求新的数据，刷新插件信息。
3. 组件的插件针对所有加载的组件有效，如页面加载了五个曲线控件，插件同时对这5个曲线控件有效，暂时不支持只对2个有效，其他3个保留原样。
4. 建议插件不修改原组件的DOM结构，如：删除列（建议做隐藏该列）、修改列值（建议增加新列并隐藏原列）等。
5. 一个插件只能扩展一个组件。

三、组件内部代码示例：

  以overlay组件为例：

var backbone = require('backbone');

var overlay = backbone.View.extend({

     render: function(){

           //render之前触发事件
           overlay.trigger(overlay.triggerList.beforeRender, this);

           //overlay模块内的标签输出代码编写
           // some code


           //render之后触发事件
           overlay.trigger(overlay.triggerList.afterRender, this);
     }
}, backbone.Events);  //给类绑定backbone.Events事件，静态参数

//外部可访问事件列表
overlay.triggerList = {
    afterRender: 'Overlay:AfterRender',
    beforeRender: 'Overlay:BeforeRender'
};

overlay-plugin 插件示例代码

var overlay = require('overlay');
var backbone = require('backbone');

var overlayPlugin = backbone.View.extend({

     initialize: function(options){

           var that = this;

           //订阅组件render事件
           overlay.on(overlay.triggerList.afterRender, function(obj){

                that.render(obj);
           });

           //订阅组件render事件
           overlay.on(overlay.triggerList.beforeRender, function(obj){

                that.render(obj);
           });
     },

     render: function(obj){

           //针对组件的dom进行操作，实现组件的功能
     },

     dispose: function(){

            //移除事件
            overlay.off(overlay.triggerList.afterRender);
            overlay.off(overlay.triggerList.beforeRender);

            //清除组件dom元素
            $('.overlayPlugin').remove();
      }

}, backbone.Events);

//外部可访问事件列表
overlayPlugin.triggerList = {
    afterRender: 'OverlayPlugin:AfterRender',
    beforeRender: 'OverlayPlugin:BeforeRender'
}

插件模块的package.json：

{
    "name": "overlay-plugin",
    "version": "0.1.0",
    "description": "全屏窗体覆盖层插件，扩展于overlay",
    "keywords":["基础界面模块","对话框", "插件"], //keywords中必须有"插件"两个字
    "author": "zs <zs@strongsoft.net>",  
    "dependencies": {
       "jquery": "1.7.2",
       "underscore": ">1.3.3",
       "backbone": "1.2.3-2.3.4",
       "async": "~1.0.0"
    },
    "output": { 
       "overlay-plugin.js": "."
     },
     "hostModule": {    //用于描述该插件所扩展的组件，一个插件只能扩展一个组件
         "name": "overlay",
         "version": "~0.1"
     }
}

插件加载：

插件加载通过seajs.config函数进行配置，通常存放在seajs-helper.js中，此种加载方式仅在对应组件被seajs加载时，插件模块才会被加载。

seajs.config({
    "preload": [ "plugin-json", "plugin-text", "plugin-addons" ],
    "alias": {
        "overlay": "overlay/0.1.21/overlay",
        "overlay-plugin": "overlay-plugin/0.1.8/overlay-plugin",
    },
    "addons": {
        "overlay/0.1.21/overlay": [ "overlay-plugin/0.1.0/overlay-plugin" ]
    }
});

其中：

1. preload 必须加入 "plugin-addons"这个项
2. 增加 addons 属性，用于描术每个组件的相应插件id
3. 所需插件必须通过 spm install 安装

spm安装文件配置

项目通过配置文件进行安装时，如果有用到插件需要配置插件节点，如下：

// 新增 plugins，数组结构
plugins: [{
  "name": "overlay-pulgin",
  "version": "~0"
}, {
  "name": "overlay2-pulgin",
  "version": "~0"
}]

最后，写好的组件的插件如何集成到系统上：

1）在系统上（的ZhswEmergency/web/update的）config.json中进行配置：

    写一个：

"plugins": [{
        "name": "tilemap-around-plugin",
        "version": "~0"
    }],

2）运行之后，在系统上的 sea-modules/seajs-helper.js 中会出现以下：

  （自动）

seajs.config({
    "preload": [ "plugin-json", "plugin-text", "plugin-addons" ],
    "alias": {
        "xx-homepage": "xx-homepage/0.1.8/xx-homepage",
        "yy-index": "yy-index/0.1.32/yy-index",
    },
    "debug": true,
    "addons": {
        "base-map-popup-box": [ "base-map-popup-box-detail-plugin/0.1.17/base-map-popup-box-detail-plugin" ],
        "tilemap": [ "tilemap-around-plugin/0.1.11/tilemap-around-plugin" ]
    },  //这个tilemap-around-plugin 就是系统需要用到的插件了呀~