在JavaScript中重寫jQuery對象的方法

時間 2019-11-08

標籤 javascript 重寫 jquery 對象方法欄目 JavaScript 简体版

原文原文鏈接

jQuery是一個很好的類庫，它給咱們解決了不少的客戶端編程，任何東西都不是萬能的，當它不能知足咱們的需求時咱們須要對它進行重寫，同時也不要影響其原有的功能或者修改其原有的功能；我如今的web應用程序大多數時候的數據交互都是經過Ajax來完成的，這樣就能夠將一些隱藏字段的數據保存在HTML標籤的屬性中，使HTML標籤的代碼量減小，如：ID，Timestamp等等，這些不須要用戶輸入但又不得不提交的字段，經過表單提交的作法是 <input name="ID" value="343" type="hidden" /> 把ID的值保存在一個隱藏標籤中，而後隨表單提交。html

<div>jquery

<label data-field="id" data-property="data-id" data-id="343">First Name</label><input type="text" data-field="FirstName" />web

</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>