组件的插件开发
一、介绍:
插件:定义为组件的扩展或者插件的扩展,可以针对特定组件和版本开发的扩展插件,也可以针对已有的插件进行开发扩展插件。
二、插件开发约定:
- 插件所需要的model数据,如果是组件没有的,插件自身通过扩展服务端api来请求数据,与组件无关系。
- 如果组件由一些事件切换导致数据刷新时(如查询时间改变了),由插件自身负责监听切换时间的事件,先缓存在插件内,然后到组件的render事件触发时,再通过缓存的条件请求新的数据,刷新插件信息。
- 组件的插件针对所有加载的组件有效,如页面加载了五个曲线控件,插件同时对这5个曲线控件有效,暂时不支持只对2个有效,其他3个保留原样。
- 建议插件不修改原组件的DOM结构,如:删除列(建议做隐藏该列)、修改列值(建议增加新列并隐藏原列)等。
- 一个插件只能扩展一个组件。
三、组件内部代码示例:
以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" ] } });
其中:
- preload 必须加入 "plugin-addons"这个项
- 增加 addons 属性,用于描术每个组件的相应插件id
- 所需插件必须通过 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 就是系统需要用到的插件了呀~
posted on 2017-01-05 17:51 CuriousZero 阅读(454) 评论(0) 编辑 收藏 举报