567
jquery插件的幾種寫法
最近Web應用程序中越來越多地用到了JQuery等Web前端技術。這些技術框架有效地改善了用戶的操作體驗，同時也提高了開發人員構造豐富客戶端UI的效率。JQuery本身提供了豐富的操作，但是，有時候我們需要根據我們自己的業務和係統特色（風格）構造一些我們常用的前端UI組件，而 JQuery的插件給了我們一個較好的方式來構造這些UI組件，方便我們日後反複重用這些組件。下麵，我將說明JQuery插件常用的寫法，以及這些插件的常用場景
首先，在具體說明編寫插件之前，我們先假定一個使用場景：有一個HTML頁麵，頁麵上放置了一個5行3列的表格，即：
標記，具體代碼如下：<table >
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
</table>
我要實現的功能是：鼠標移到表格的某一行時，當前行高亮顯示，其他行正常
結合這個場景，我們進一步探討如何利用JQuery插件實現上述功能。常用的JQuery插件有如下幾種寫法：
對JQuery自身的擴展插件
顧名思義，這種插件是對JQuery自身的方法庫進行擴展的。在使用的時候通過$.MethodName()的方式直接使用
插件代碼示例：
$.extend({
handleTableUI : function(table){
var thisTable = $("#" + table);
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
}
});
說明：當要對JQuery自身進行擴展的時候，需要采用$.extend();的形式進行開發，JQuery的extend()方法為我們提供了擴展 JQuery自身的方式，在extend()方法中，我們采用{...}的形式編寫具體的方法體。其中，最重要的是要定義我們自己的擴展方法，如示例中的 handleTableUI。定義的方式是：方法名 : function(參數){ 方法體 }。通過此種方式我們就可以定義JQuery自己的擴展方法，而且這個方法可以在web頁麵通過智能提示顯示出來。頁麵中調用的代碼如下：
<script type="text/javascript">
$(document).ready(function () {
$.handleTableUI("newTable");
});
</script>
對HTML標記或頁麵元素進行擴展
使用這種插件的擴展方式，在使用此插件時，需要首先引用經過JQuery包裝的頁麵元素，如：$("#tableId").Method()
插件代碼示例：
(function ($) {
$.fn.setTableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
});
};
})(jQuery);
說明：當要對頁麵元素進行JQuery擴展時，需要采用(function($){...})(JQuery);的方式進行開發。在“...”處，定義我們自己的方法，定義方式是：$.fn.自定義方法名 = function(參數){...};的形式定義擴展方法的具體內容。在頁麵調用的時候不同於對JQuery自身的擴展。具體調用代碼如下：
<script type="text/javascript">
$(document).ready(function () {
$("#newTable").setTableUI();
});
</script>
通過直接添加JQuery插件腳本引用實現對該插件的調用
一 般，如果需要用到一些全局的JQuery插件，即：插件的方法不需要顯式調用，而是引用腳本即可；同時，這種插件一般對整個Web頁麵起到全局配置或設置的作用，如：對<body></body>內部的內容進行整體布局，此時可以采用腳本引用的方式實現
插件代碼示例：
(function ($) {
$.tableUI = { set: function () {
var thisTable = $("table");
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
}
};
//此處需要進行自調用
$(function () {
$.tableUI.set();
});
})(jQuery);
說明：如果上麵這段代碼在js文件中，我們隻要在頁麵上添加對此腳本文件的引用即可，當然，在所有要用到JQuery的地方，需要首先添加對JQuery庫腳本的引用。在引用型插件的代碼中，最主要的就是在插件中要主動調用自己所寫的插件方法。否則，插件代碼將不會起作用
插件的基本要點
在編寫插件的時候，我們需要記住這些要點，雖然不這麼做不會影響使用，但是要是你的插件是不規範的代碼，那何必花苦心思去寫插件
jQuery插件的文件名推薦命名為jquery.[插件名].js，以免和其他JavaScript庫插件混淆。例如命名為jquery.color.js
所有的對象方法都應當附加到jQuery.fn對象上，而所有的全局函數都應當附加到jQuery對象本身上
在插件內部，this指向的是當前通過選擇器獲取的jQuery對象，而不像一般的方法那樣，例如click()方法，內部的this指向的是DOM元素。可以通過this.each來遍曆所有元素。
所有的方法或函數插件，都應當以分號結尾，否則壓縮的時候可能出現問題。為了更穩妥些，甚至可以在插件頭部先加上一個分號，以免他人的不規範代碼給插件帶來影響。插件應該返回一個jQuery對象，以保證插件的可鏈式操作。除非插件需要返回的是一些需要獲取的量，例如字符串或者數組等。
避免在插件內部使用$作為jQuery對象的別名，而應使用完整的jQuery來表示。這樣可以避免衝突。當然，也可以利用閉包這種技巧來回避這個問題，使插件內部繼續使用$作為jQuery的別名
一個插件的實例：
詳細的功能需求如下：
輸出的信息中自動包含時間
輸出的信息按照類型顯示不同的樣式
輸出的信息類型包括：普通信息、調試信息、警告、錯誤
可選按照時間升序輸出信息（稍作修改可以時間降序排列）
原理與實現
首先，來個簡單的原理。寫一個空的 plugin：
$.fn.message = function () {
return this;
}
這個 plugin 的用法就是：
var msg = $("#divMessage").message();
這裏麵的關鍵就是拿到了 this 這個對象，後麵的所有代碼、功能的實現都依賴於這個對象
接下來，實現 show 函數來做測試。show 函數將接受消息內容作為參數，然後顯示出來：
$.fn.message = function () {
this.show = function (msg) {
this.html(msg);
}
return this;
}
然後，可以這樣用：
<div >Messaeg</div>
<script>
$(document).ready(function () {
var msg = $("#divMessage").message();
msg.show("hello");
);
</script> //hello
於是，內容就出來了：hello
接下來，的代碼就很簡單了（jquery.message.js）：
/* 時間格式化函數 */
jQuery.utility = {
leading:function (char, width, value) {
var ret = value.toString();
while (width > 1) {
if (value >= (Math.pow(10,width - 1))) {
break;
} else {
ret = char + ret;
}
width--;
}
return ret;
},
now : function () {
var date = new Date();
var ret = {};
ret.hours = $.utility.leading('0', 2, date.getHours());
ret.minutes = $.utility.leading('0', 2, date.getMinutes());
ret.seconds = $.utility.leading('0', 2, date.getSeconds());
return ret;
}
};
/* 消息插件函數 */
$.fn.message = function () {
this.show = function (msg) {
this.html(msg);
}
this.clear = function () {
this.html('');
}
this.append = function (tag, msg) {
var date = $.utility.now();
var tagContent = "<span class='msg-" + tag + "'>" + tag + "</span><span class='msg-datetime'>" + date.hours + ":" + date.minutes + ":" + date.seconds + "</span>";
this.html(this.html() + "<br/>" + tagContent + "<span class='msg-message'>" + msg + "</span>");
}
this.warning = function (msg) {
this.append("warning", msg);
}
this.error = function (msg) {
this.append("error", msg);
}
this.succeed= function (msg) {
this.append("succeed", msg);
}
this.debug = function (msg) {
this.append("debug", msg);
}
this.info = function (msg) {
this.append("info", msg);
}
return this;
}
下麵把這個插件應用上看看效果：
<div ></div>
<script>
$(document).ready(function () {
var msg = $("#divMessage").message();
msg.succeed("Host web context ready.");
msg.debug("List title is 'Data List'.");
msg.error("List doesn't exist.")
});
</script>
結果顯示出來：
succeed11:07:52Host web context ready.
debug11:07:52List title is 'Data List'.
error11:07:52List doesn't exist.
最後更新：2017-06-14 18:02:02