一直認爲js插件是塊很難啃的骨頭，直到最近，公司封閉即將結束，抽了一些時間好好學習一下jQuery的插件編程基礎，總結一下內容。
一、本着快速上手的態度，從公司使用的框架入手，公司前端有自己的一套框架，其中使用了騰訊的artTemplate作爲模板渲染頁面，可以通過類似el表達式或者jsp的寫法渲染前端Html代碼，前者通過類似{{each list as value i}}{{/each}}後者通過類似<%for(i=0;i<list.size;i++)%>進行遍歷，宗旨都是通過js對象自動填充至html代碼內，並根據邏輯進行判斷或者循環。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>xgn插件DEMO</title>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.ztree.all-3.5.min.js"></script>
<script src="template.js"></script>
<script>
var myTemplateSource = '<h1>{{showTitle}}</h1><div id="container"><input type="text" id="inputText"/><input type="button" id="testBtn" value="測試"/>\
<div id="{{id}}_treeDiv" class="ztree" style="BORDER: silver 1px solid;height:160px;width:140px;display:none"></div>\
</div>';
;(function($,window,document,undefined){
var setting={
test:"haha",
callback:{
beforeDestroy:function(){
alert("DefaultFunction:before destroy");
}
}
}
var methods = {
init:function(options){
setting = $.extend(true,{},setting,options);
var $this = $(this);
$this.data("setting",setting);
//渲染樹
var render = template.compile(myTemplateSource);
var html = render(setting);
$("#"+setting.renderId).append(html);
var $inputText = $("#inputText");
var $treeDiv = $("#"+setting.id+"_treeDiv");
var $testBtn = $("#testBtn");
var ztreeSetting = {
treeId:setting.id,
data:{
simpleData:{
enable:true,
idKey:"id",
pIdKey:"pId"
}
},
callback:{
onClick:function(event, treeId, treeNode){
$("#inputText").val(treeNode.name);
$("#inputText").data("custom_val",treeNode.id);
$("#"+setting.id+"_treeDiv").hide();
}
}
};
$.fn.zTree.init($treeDiv,ztreeSetting,setting.list);
$("#inputText").on('focus',function(){$treeDiv.show();});
if($.isFunction(setting.callback.buttonClick)){
$testBtn.on("click",setting.callback.buttonClick);
}else{
$testBtn.on("click",function(){alert("所選值爲："+$("#inputText").data("custom_val"))});
}
},
destroy:function(){
if($.isFunction(this.data("setting").callback.beforeDestroy)){
alert("haha");
}
},
getValue:function(){
return $("#inputText").data("custom_val");
}
};
$.fn.xgnTree = function(methodName){
if(methods[methodName]){
return methods[methodName].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof methodName === 'object' || !methodName){
return methods.init.apply(this,arguments);
}else{
$.error('方法'+methodName+'不存在!');
}
};
})(jQuery,window,document)
</script>
<script>
$(function(){
var setting = {
id:"popTree",
renderId:"content",
showTitle:"jQuery插件下拉樹",
list: [{id:"sy",pId:"sy",name:"攝影"}, {id:"dy",pId:"dy",name:"電影"}, {id:"my",pId:"my",name:"民謠"},
{id:"lx",pId:"lx",name:"旅行"}, {id:"jt",pId:"jt",name:"吉他"}],
callback:{
buttonClick:function(event){
$("#content").xgnTree("destroy");
}
}
};
$("#content").xgnTree(setting);
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>其中,myTemplateSource就是未來渲染到頁面上的html代碼模板，在後續調用中通過template.compile(myTemplateSource)得到一個渲染對象，通過該對象將數據對象傳遞進去，就可以得到對應的html代碼，最後通過append方法添加到頁面中即可完成任務。
二、jQuery插件結構：看了一本《jQuery高級編程》的書，總結目前有3種方式進行插件的開發，（1）類級別插件開發，使用$.extend對jQuery全局對象進行添加類級別方法進行開發（2）對象級別插件開發，使用$.fn.pluginName進行開發，通過對jQuery對象進行開發；（3）使用widgetFactory插件開發，還不太瞭解，應該有一套相應的技術規範。主要使用第二種進行插件開發；
整個插件的架構像上面的代碼一樣，最外層通過一個自調用方法，傳入jQuery,window,document對象，確保方法內部可以獲得正確的環境變量；
$.fn.xgnTree = function(methodName){
if(methods[methodName]){
return methods[methodName].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof methodName === 'object' || !methodName){
return methods.init.apply(this,arguments);
}else{
$.error('方法'+methodName+'不存在!');
}
};當傳入一個字符串且有該名稱的方法時，調用相應的方法，如$("#content").xgnTree("destroy"),類似jqueryUi的用法；傳入一個obj或者空時，調用init初始化方法；傳入的字符串沒有這個方法時報錯。
三、setting的存儲還是要提一下，困惑了一下午，公司的前端並沒有採取這種對象字面量的形式，而是直接在方法裏，使用this.setting={}的形式使用，而在這個代碼裏是使用的一個私有變量，當時不清楚到底應不應該使用$.data方法將setting信息保存下來，但是又不知道其他的什麼好方法，看了別人的文章，發現就是通過$(this).data()進行存儲的，在別的方法裏再通過data將setting取出。
效果圖：
