在JavaScript中重寫jQuery物件的方法實例教學_jquery
- WBOY原創
- 2016-05-16 16:38:451207瀏覽
jQuery是一個款非常優秀的類別庫，它給我們解決了很多的客戶端編程，但是任何東西都不是萬能的，當它不能滿足我們的需求時我們就需要對它進行重寫，同時也不要影響其原有的功能或修改其原有的功能；例如我現在的web應用程式大多數時候的資料互動都是透過Ajax來完成的，這樣就可以將一些隱藏欄位的資料保存在HTML標籤的屬性中，使HTML標籤的代碼量減少，如：ID，Timestamp等等，這些不需要用戶輸入但又不得不提交的字段，透過表單提交的做法是
<input name="ID" value="343" type="hidden" />
把ID的值保存在一個隱藏標籤中，然後隨表單提交。
程式碼如下圖：
<div> <label data-field="id" data-property="data-id" data-id="343">First Name</label><input type="text" data-field="FirstName" /> </div>
注意藍色的部分這個屬性名稱請不要太在意，您完全可以取一些更簡潔名字，現在我們來重寫jQuery的val方法來讀取和設定data-id的值，給$.prototype. val重新定義一個函數，以閉包的形式將基類函數傳入，以便在新函數中呼叫它，看下面這段程式碼:
<script>
$.prototype.val = function (base) {
return function () {
var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset ? arguments[0] : null;
//这里调用基类方法，当然基类方法在何时调用或者是否要调用取决于您的业务逻辑，在这里我们是要调用的，因为要保持它原有的功能。
if (isset&&typeof(base)=="function") { base.call(s, v); } else { v = base.call(s); }
if (p) {
if (isset) { s.attr(p, v); return s }
else { return s.attr(p) }
}
else {
if (!s.is(":input"))
{ if (isset) { s.text(v); return s; } else { return s.text(); } }
else { return isset ? s : v; }
}
}
//在这里传入基类方法
}($.prototype.val);
</script>
這個重寫了之後，當在標籤中指定了data-property屬性時，jQuery物件呼叫val() 等同於呼叫attr("data-property")，但沒有指定data-property也就是預設情況下，如果是非表單元素則是val()等同於text()，如果是表單元素則保持原來的功能也就是讀寫value屬性的值，這樣就可以通過這種方式：$("[data-field= 'id']").val(345)和$("[data-field='id']").val() 讀取或設定它的值了，「data-field」 這個屬性將會對應到伺服器上對應類型的欄位中，關於重寫JavaScript中的jQuery的方法就到這裡了，其他方法的重寫是異曲同工的，大家可以舉一反三的思考。
全部程式碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>在JavaScript中重写对象的方法</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery-ui-1.8.24.min.js"></script>
<script>
$.prototype.val = function (base) {
return function () {
var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset ? arguments[0] : null;
if (isset&&typeof(base)=="function") { base.call(s, v); } else { v = base.call(s); }
if (p) {
if (isset) { s.attr(p, v); return s }
else { return s.attr(p) }
}
else {
if (!s.is(":input"))
{ if (isset) { s.text(v); return s; } else { return s.text(); } }
else { return isset ? s : v; }
}
}
}($.prototype.val);
</script>
</head>
<body>
<span id="lbl">Hello world!</span>
<input type="text" id="txt" value="hello world" />
<input type="checkbox" value="哈哈哈。。。" />
</body>
</html>
希望本文所述對大家的web前段設計有幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn