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前段設計有所幫助。
新聞熱點
疑難解答
