我讨厌 YUI 3 .....第三天 Node Plugin

前言: Node Plugin

这篇本章会介绍如何制作 YUI Plugin ，使用 YUI Plugin ，Plugin 到底是什么呢? 相信这个字眼大家都很常见，Plugin就是外挂，在YUI3 中，他可以挂在 node(html tag object) 身上的，所以要先取得 node 物件，再把 plugin 功能挂上去，在开始使用之前呢，要记得载入 plugin 喔 (YUI().use('plugin') )。

YUI Node Plugin 属性

• NS : namespace , 命名空间，简单说就是取一个不会跟别人冲到的名称
• NAME : Plugin 名称
• ATTRS : 一些相关的属性? 待补充

YUI Node Plugin Prototype

Node Plugin 的使用非常的简单，只要使用 Javascript 一般的 prototype 功能，将新的 function 写进 prototype 即可完成一个简单的 node plugin。

现在就写一个简单的 Javascript，指定将所有的 anchor 变成灰色，首先定义一个 function Object (在 Javascript 的世界里 ， function = object , object = function) ， 接著给他一个 Namespace ，之后要使用这个 Plugin 时，都要用这个 Namespace 来呼叫，最后再写一段将 anchor 变成灰色的语法。

YUI().use('node', function (Y) {
function NewMethod(config) {
   this._node = config.host;
}
NewMethod.NS = "proto"
NewMethod.prototype.disable =function(){
   var node = this._node;
   var nodes = node.all("a");
   nodes.setStyles({color:"#cecece"}); //Give gray color to  node's font.
}
}

把 Plugin 绑进 Node 里

上一段已经把 Plugin 都写好了，这里就直接把 Plugin 挂上Node，挂上去之后 Node就可以透过刚刚给定的 Namespace 来操作新的功能。

• node.plug : 绑定 plugin 语法
• node.unplug : 拿掉 plugin 语法，这个语法只会拿掉 plugin 的 method，不会将颜色变回来，unplug 会执行 destroy method ，如果你要把颜色变回来，就得实做 destroy method，以及继承 YUI 的 Y.Plugin.Base ，这里只介绍最简单的 Node Plugin ，并没有继承 Y.Plugin.Base。

var container = Y.one(".box");
container.plug(NewMethod);

执行 disable，如果你想要使用 Plugin ，必须先知道 Plugin 的 Namespace ，上一段已经定义 plugin namespce = proto ，所以我们使用 proto.disable() 来操作 plugin。

container.proto.disable();

Example Demo

多个plugin应用

YUI 可以针对同一个 Node，绑上无限个 plugin，你想要什么功能，就绑上什么功能即可，非常的实用，如果发现 plugin 的功能不够，你可以选择自已开发新的 plugin ，或是使用 extend 的方式，强化 plugin的功能 ，接下来要实作绑上「缩放」和「拖拉」 的 plugin。

• 拖拉 ：library 需载入 dd-plugin

• 缩放 ：library 需载入 resize-plugin

YUI().use("node","resize","resize-plugin","dd-plugin",function(Y){
 
   var s= Y.Node.create("<div>测试使用外挂功能，挂上拖拉与缩放</div>"); //建立一个新的 Node
   s.setStyles({'background':'#EEEEEE',width:"200px",height:"150px",padding:"10px",position: "absolute",border: "2px solid #A2A2A2"});
   s.plug(Y.Plugin.Resize); //绑缩放 plugin
   
   s.plug(Y.Plugin.Drag); //绑拖拉 plugin
   s.appendTo("body");
        //固定比例缩放
   var re=new Y.Resize({node:"#result"});
   re.plug(Y.Plugin.ResizeConstrained,{preserveRatio: true,wrap: true,maxHeight:670,maxWidth:800});
   re.render();
});