js的面向对象开发被运用在前端开发领域处理数据展示非常方便。
例如有一个文章列表功能，封装在articlelist列表类里面，实现列表排序，增删改查管理菜单，
多选文件转存和批量转移目录。这个类功能完善，现在业务需要扩展，希望能列出文章的评论管理
用户点赞和分享的数据管理列表，单独做一个页面，分给其他运营账号进行监控管理；
此时，公用articlelist类实现此页面肯定是好事。那么怎么来实现这个呢？
方法第一种：在articlelist类里面增加if等判断代码，增加传入参数，区别两个页面的显示；
这样可以实现，最后却变得代码繁重，功能不单一，难以维护。
方法第二种，采用插件开发模式，在评论管理列表新建一个commentlist类，在此类里面通过插件plugins
实现对articlelist功能的差异化处理；
这里描述一下js插件的实现方法：
OC.Plugins = {
/**
* @type Array.<OC.Plugin>
*/
_plugins: {},
/**
* Register plugin
*
* @param {String} targetName app name / class name to hook into
* @param {OC.Plugin} plugin
*/
register: function(targetName, plugin) {
var plugins = this._plugins[targetName];
if (!plugins) {
plugins = this._plugins[targetName] = [];
}
plugins.push(plugin);
},
/**
* Returns all plugin registered to the given target
* name / app name / class name.
*
* @param {String} targetName app name / class name to hook into
* @return {Array.<OC.Plugin>} array of plugins
*/
getPlugins: function(targetName) {
return this._plugins[targetName] || [];
},
/**
* Call attach() on all plugins registered to the given target name.
*
* @param {String} targetName app name / class name
* @param {Object} object to be extended
* @param {Object} [options] options
*/
attach: function(targetName, targetObject, options) {
var plugins = this.getPlugins(targetName);
for (var i = 0; i < plugins.length; i++) {
if (plugins[i].attach) {
plugins[i].attach(targetObject, options);
}
}
},
/**
* Call detach() on all plugins registered to the given target name.
*
* @param {String} targetName app name / class name
* @param {Object} object to be extended
* @param {Object} [options] options
*/
detach: function(targetName, targetObject, options) {
var plugins = this.getPlugins(targetName);
for (var i = 0; i < plugins.length; i++) {
if (plugins[i].detach) {
plugins[i].detach(targetObject, options);
}
}
},
/**
* Plugin
*
* @todo make this a real class in the future
* @typedef {Object} OC.Plugin
*
* @property {String} name plugin name
* @property {Function} attach function that will be called when the
* plugin is attached
* @property {Function} [detach] function that will be called when the
* plugin is detached
*/
};在articlelist对象初始化后，注册一个钩子，可以让其他对象注入插件；
例如： articlelist.init = function(){
………………
OC.Plugins.attach('articlelsit.attach', this);
………………
}
然后再commentlist对象实现一个attach 方法：
var commentlist = {
attach: function(articlelist) {
这里拿到了 articlelist 对象的实例，
可以对它的方法做 重新，属性覆盖，等待操作；
}
……………………
};
把 这个commentlist对象 注册到插件数组，实现 对articlelist的修改；
OC.Plugins.register('articlelsit.attach', commentlist);
这里最后要强调一下这些对象的导入顺序：
plugins 、articlelist、comentlist 对象这样的顺序实现加载优先级。
