我討厭 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();
});