YUI3组件框架之plugin

plugin相关源码分析：

plugin功能包括如下几个模块， 简单分析如下：

pluginhost-base

维护对象 this._plugins = {}；

并提供方法: plug、unplug、hasplug、_destroyPlugins、_initPlugins

plug: 初始化插件实例，并与host进行关联　　

if (Plugin && !L.isFunction(Plugin)) {
config = Plugin.cfg;
Plugin = Plugin.fn;
}

// Plugin should be fn by now
if (Plugin && Plugin.NS) {
ns = Plugin.NS;

config = config || {};
config.host = this;

if (this.hasPlugin(ns)) {
// Update config
if (this[ns].setAttrs) {
this[ns].setAttrs(config);
}
} else {
// Create new instance
this[ns] = new Plugin(config);
this._plugins[ns] = Plugin;
}
}

_initPlugins: 调用模块 pluginhost-config 中的_initConfigPlugins(config);

根据this._classes(原型链上的constructor对象)上的静态属性 _PLUG and _UNPLUG, 来初始化plugin

通过widget初始化时的config配置, 来初始化plugin

在YUI Widget体系中base-core模块用来初始化插件, 初始化所有ext和ATTRS后调用　　

PluginHost.prototype.\_initConfigPlugins = function(config) {

// Class Configuration
var classes = (this._getClasses) ? this._getClasses() : [this.constructor],
plug = [],
unplug = {},
constructor, i, classPlug, classUnplug, pluginClassName;
// TODO: Room for optimization. Can we apply statically/unplug in same pass?
for (i = classes.length - 1; i >= 0; i--) {
constructor = classes[i];

classUnplug = constructor._UNPLUG;
if (classUnplug) {
// subclasses over-write
Y.mix(unplug, classUnplug, true);
}

classPlug = constructor._PLUG;
if (classPlug) {
// subclasses over-write
Y.mix(plug, classPlug, true);
}
}

for (pluginClassName in plug) {
if (plug.hasOwnProperty(pluginClassName)) {
if (!unplug[pluginClassName]) {
this.plug(plug[pluginClassName]);
}
}
}

// User Configuration
if (config && config.plugins) {
this.plug(config.plugins);
}
};　　

pluginhost-config

_initConfigPlugins

静态方法： plug、unplug

提供给Y.Base引用

base-pluginhost

mixin Base and PluginHost， 即：

Y.mix(Base, PluginHost, false, null, 1);
Base.plug = PluginHost.plug;
Base.unplug = PluginHost.unplug;　　

plugin

继承Y.Base . 提供AOP的一系列方法， 如：

doBefore: function(strMethod, fn, context) {
var host = this.get("host"), handle;
if (strMethod in host) { // method
handle = this.beforeHostMethod(strMethod, fn, context);
} else if (host.on) { // event
handle = this.onHostEvent(strMethod, fn, context);
}
return handle;
},
doAfter: function() {
...
},
onHostEvent: function() {
var handle = this.get("host").on(type, fn, context || this);
this._handles.push(handle);
return handle;
},
afterHostEvent: function() {
...
},
beforeHostMethod: function() {
...
},
afterHostMethod: function() {
...
}　

如何写一个插件

1、 任何简单对象即可成为一个简单插件， 如:

function NodeDrag(config) {
var host = config.host;
drag(host);
}
function drag(host) {
...
}

2、YUI的Plugin基类提供了基于事件的AOP机制支持，可以通过继承它在不影响原有代码逻辑前提下，通过对代码执行过程的控制，达到改变原有代码逻辑或者增加插件功能的效果， 如：

function NodeDrag() {
NodeDrag.superclass.constructor.apply(this, arguments);
}
Y.extend(NodeDrag, Y.Plugin.Base, {
drag: function() {
...
}
});

使用插件的几种方式

给一个node节点添加一个插件

1、使用Base的静态方法, 实际调用的是pluginhost-config里面的plug方法

Y.Base.plug(Y.one('#foo'), NodeDrag, config);

2、node对象和继承了Y.Base对象的实例都可以通过实例直接调用plug方法使用插件

Y.one('#foo').plug(NodeDrag, config);

3、具体widget

function Widget() {}
Y.extend(Widget, Y.Base, {
initializer: function() {
...
}
});
var w = new Widget({plugins: NodeDrag});
//var w = new Widget({plugins: [NodeDrag, ..]});
//var w = new Widget({plugins: {fn: NodeDrag, cfg: {} });
//w.plug(NodeDrag, cfg);

　　

在一些情况，为了让调用者不必过多的关心实现细节的时候，也将插件的初始化放到具体widget的实现中, 如：

Widget.ATTRS = {
drag: {
value: false
}
};
Y.extend(Widget, Y.Base, {
initializer: function() {
if(this.get('drag')) {
this.plug(NodeDrag, cfg);
}
}
});

插件的一些优势和适合的场景

插件一般是基于host开发的扩展功能， 用以对host功能的增强，如一些动画效果、也类如dota游戏中一些英雄所具有的各种技能等

插件机制能对复杂功能进行更好的抽象, 减少代码逻辑的耦合

如，在代码中由于加入一个功能，会涉及到很多代码片段加入if else 判断逻辑, 那么可以考虑将这个功能作为一个plugin增强， 使用AOP的方式与原来代码逻辑关联起来

通过host进行统一的入口管理