淺談Jquery實現簡單的雙向綁定

var dom = toddyDetailObj.GetDom();  2                     var formObj = dom.find("input,textarea,select");  3 
                    formObj.each(function () {  5                         $(this).on("keyup", function () {  6                             if ($(this).attr("name") !== undefined) {  7                                 toddyDetailObj.AddDataObj($(this));  8  }  9  }); 10 
                        $(this).on("change", function () { 12                             if ($(this).attr("name") !== undefined) { 13                                 toddyDetailObj.AddDataObj($(this)); 14  } 15  }); 16 
                        $(this).on("blur", function () { 18                             if ($(this).attr("name") !== undefined) { 19                                 toddyDetailObj.AddDataObj($(this)); 20  } 21  }); 22                     });

先上一個代碼，主要是雙向綁定的基本概念就是在js里面有個緩存的model，當model發生變化，我們的頁面上對應的節點應該發生對應的變化，所以，依據這個點，我們在需要做的在頁面上面打下標識。

<dl class="dl-horizontal" toddy-data="default" style="position:relative;">
    <dt><b class="textwarning">*</b>任務ID：</dt>
    <dd>
        <input type="text" class="w200" name="ReasonID" value=""/>
        <em>系統自動生成.</em>
    </dd>
    <dt><b class="textwarning">*</b>任務名稱：</dt>
    <dd>
        <input type="text" class=" w200" name="ReasonName" value=""/>
        <em>可設置該任務的名稱.</em>
    </dd>

    <dt><b class="textwarning">*</b>出票時間段：</dt>
    <dd>
        <input type="text" class="w150" name="OutTicketTimeStart" value=""/>
 到 17         <input type="text" class="w150" name="OutTicketTimeEnd" value=""/>
        <em>請選擇需要獲取票號狀態的出票時間段</em>
    </dd>
    <dt><b class="red">*</b>起飛時間段：</dt>
    <dd>
        <span style=" color:#cdcdcd; margin-top:10px;">
            <input type="text" class=" w150" value=""/>
 到 25             <input type="text" class=" w150" value=""/>
            <em>請選擇需要獲取票號狀態的起飛時間段</em>
        </span>
    </dd>
    <dt>可退款客票狀態：</dt>
    <dd>
        <label><input name="nationality[]" type="checkbox" value="VOID">VOID</label>
        <label><input name="nationality[]" type="checkbox" value="REFUNDED">REFUNDED</label>
        <label><input name="nationality[]" type="checkbox" value="OPEN FOR USE">OPEN FOR USE</label>
        <label><input name="nationality[]" type="checkbox" value="SUSPENDE">SUSPENDE</label>
        <label><input name="nationality[]" type="checkbox" value="EXCHANGED">EXCHANGED</label>
        <label><input name="nationality[]" type="checkbox" value="USED/FLOWN">USED/FLOWN</label>
        <label><input name="nationality[]" type="checkbox" value="LIFT/BOARDED">LIFT/BOARDED</label>
        <label><input name="nationality[]" type="checkbox" value="CHECKED IN">CHECKED IN</label>
    </dd>
    <dt>備注：</dt>
    <dd>
        <textarea name="Remark" style="width:300px; height:100px;"></textarea>
    </dd>

    <dd toddy-data="PersonList">
        <table width="500" border="0" cellspacing="0" cellpadding="0" class="wintable">
            <tbody>
            <tr>
                <th align="left"><span>判斷條件</span></th>
                <th align="right"><span>操作</span></th>
            </tr>
            <tr>
                <td align="left"><span>
              <select class="w180">
                  <option>買入賣出退票手續費一致</option>
                  <option>行程單取消或未打印</option>
              </select>
              </span></td>
                <td align="right"><span>
              <input type="button" class="add" style="width: 20px;" value="+">
              </span></td>
            </tr>
            <tr>
                <td align="left"><span><input type="text" class="w150" name="Condition" value=""/></span></td>
                <td align="right"><span>
              <input type="button" class="reduce" style="width: 20px;" value="-">
              </span></td>
            </tr>
            <tr>
                <td align="left"><span><input type="text" class="w150" name="Condition" value=""/></span></td>
                <td align="right"><span>
              <input type="button" class="reduce" style="width: 20px;" value="-">
              </span></td>
            </tr>
            </tbody>
        </table>
    </dd>
</dl>

 

我們這里推薦使用的toddy-data來判斷，所以只要在頁面上面寫上這個一個標識這樣的一個標識的概念其實和Angular的想法有點類似，這樣我們在js里面只需要通過查詢這樣的一個標識就可以了。只需要獲取body里面所有的標簽上面有標識的即可，就可以把對應最外層的dom保存下面，后面可以使用，我們一般寫一個公用的方法來獲取。

                /** * 獲取整個DOM,默認獲取第一個 */ GetDom: function () { var domObj = $(config.tagName), dom, num = 0; for (var i = 0; i < domObj.length; i++) { if ($(domObj[i]).attr(tagPrefix + "-data") !== undefined && $(domObj[i]).attr(tagPrefix + "-data") !== "" && num === 0) { dom = $(domObj[i]); num++; } } return dom; }, 

 接下來就是很簡單的給每一個內部的標簽上面的表單含有name的加上keyup事件和blur事件，blur是防止中文輸入法離開的時候不觸發keyup事件，這樣可以保證拿到的是對應的值。接下來就是把對應的值放到對應的json對象里面，可以根據自己的想法來處理。

我這里是根據發現標識的層級確定json格式的。其實一般的頁面也就2層。多的頁面就過於復雜了。這個時候需要使用者自行處理，所以一般會留下一個回調函數。下面貼上js和html。

/**  2  * Created by luocheng on 2015/10/20.  3  */
;  5 (function ($) {  6  $.extend({  7         toddy: function (data) {  8 
            var tagPrefix = "toddy", nowObj, dataTemp = {};  10 
            /**  12  * 初始化參數  13  * @type {{callBack: null}}  14              */
            var config = {  16                 tagName: "form",  17  data: {},  18                 callBack: null
 };  20 
            /**  22  * 公布參數  23              */
 $.extend(config, data);  25 
            /**  27  *  28  * @type {{getDom: getDom}}  29              */
            var toddyDetailObj = {  31                 /**  32  * 獲取整個DOM,默認獲取第一個  33                  */
                GetDom: function () {  35                     var domObj = $(config.tagName), dom, num = 0;  36                     for (var i = 0; i < domObj.length; i++) {  37                         if ($(domObj[i]).attr(tagPrefix + "-data") !== undefined && $(domObj[i]).attr(tagPrefix + "-data") !== "" && num === 0) {  38                             dom = $(domObj[i]);  39                             num++;  40  }  41  }  42 
                    return dom;  44  },  45                 /**  46  * 同步加載對象  47  * @param obj  48  * @constructor  49                  */
                AddDataObj: function (obj) {  51                     var $this = $(obj), isParent = toddyDetailObj.IsParentDom($this, true);  52                     if (isParent !== "") {  53                         /**  54  * 循環獲取當前對象的所有名稱不為空的表單，不管什么把所有相同名字的放在一起  55                          */
                        var name = $this.attr("name"), dataArr = [];  57                         nowObj.find("[name=" + name + "]").each(function () {  58                             if (toddyDetailObj.GetDomValue($(this)) !== "") {  59                                 var dataObj = {};  60                                 dataObj[name] = toddyDetailObj.GetDomValue($(this));  61  dataArr.push(dataObj);  62  }  63  });  64 
                        if (isParent.indexOf(".") > -1) {  66                             var isParentArr = isParent.split("."),  67                                 isParentLen = isParentArr.length,  68                                 dataName = isParentArr[isParentLen - 1];  69                             if (dataName !== "") {  70                                 dataTemp[dataName] = dataArr;  71                                 config.data[isParentArr[isParentLen - 2]] = dataTemp;  72                             } else {  73                                 /**  74  * 配置信息有誤提示使用者  75  * @type {string}  76                                  */
                                var tagName = nowObj.get(0).tagName.toLowerCase(),  78                                     alertTip = "<" + tagName + " " + tagPrefix + "-data=\"" + isParent + "\"></" + tagName + ">";  79                                 alert("配置信息有誤!\r\n" + alertTip);  80  }  81                         } else {  82                             config.data[isParent] = dataArr;  83  }  84 
                    } else {  86                         if ($this.attr("name") !== undefined) {  87                             var isHaveDataName = toddyDetailObj.IsParentDom($this, false);  88                             if (isHaveDataName !== "" && isHaveDataName.toLowerCase() !== "default") {  89                                 dataTemp[$this.attr("name")] = toddyDetailObj.GetDomValue($this);  90                                 config.data[isHaveDataName] = dataTemp;  91                             } else if (isHaveDataName.toLowerCase() === "default") {  92                                 config.data[$this.attr("name")] = toddyDetailObj.GetDomValue($this);  93  }  94  }  95  }  96 
                    /**  98  * 回調函數  99                      */
                    if (typeof config.callBack === "function") { 101  config.callBack(config.data); 102  } 103  }, 104                 /** 105  * 綁定所有表單對象 106  * @constructor 107                  */
                BindEvent: function () { 109                     var dom = toddyDetailObj.GetDom(); 110                     var formObj = dom.find("input,textarea,select"); 111 
                    formObj.each(function () { 113                         $(this).on("keyup", function () { 114                             if ($(this).attr("name") !== undefined) { 115                                 toddyDetailObj.AddDataObj($(this)); 116  } 117  }); 118 
                        $(this).on("change", function () { 120                             if ($(this).attr("name") !== undefined) { 121                                 toddyDetailObj.AddDataObj($(this)); 122  } 123  }); 124 
                        $(this).on("blur", function () { 126                             if ($(this).attr("name") !== undefined) { 127                                 toddyDetailObj.AddDataObj($(this)); 128  } 129  }); 130  }); 131  }, 132                 /** 133  * 判斷是否父級有標識 134  * @param obj 當前對象 135  * @param isMain true標識為子級標簽，false獲取最上級標識名稱 136  * @returns {string} 如果有標識返回標識 137                  */
                IsParentDom: function (obj, isMain) { 139                     var parents = $(obj).parents(), num = 0, data = ""; 140                     parents.each(function () { 141                         if ($(this).attr(tagPrefix + "-data") !== undefined) { 142                             if (num === 0) { 143                                 nowObj = $(this); 144                                 data = $(this).attr(tagPrefix + "-data"); 145  } 146                             num++; 147  } 148  }); 149 
                    if (num <= 1 && isMain) { 151                         data = ""; 152  } 153 
                    return data; 155  }, 156                 /** 157  * 獲取對應的表單的值 158  * @param obj 159  * @returns {*|defaultGetter} 160  * @constructor 161                  */
                GetDomValue: function (obj) { 163                     var startsWith = function (str, starts) { 164 
                        if (starts === "") { 166                             return true; 167  } 168                         if (str === null || starts === null) { 169                             return false; 170  } 171                         str = String(str); 172                         starts = String(starts); 173                         return str.length >= starts.length && str.slice(0, starts.length) === starts; 174  }; 175 
                    var endsWith = function (str, ends) { 177 
                        if (ends === "") { 179                             return true; 180  } 181                         if (str === null || ends === null) { 182                             return false; 183  } 184                         str = String(str); 185                         ends = String(ends); 186                         return str.length >= ends.length && str.slice(str.length - ends.length, str.length) === ends; 187 
 }; 189 
                    var contains = function (obj, target) { 191                         var flag = false; 192                         if (obj == null) { 193                             return false; 194  } 195 
                        if ($.isArray(obj)) { 197                             for (var i = 0; len = obj.length, i < len; i++) { 198                                 if (obj[i] === target) { 199                                     flag = true; 200  } 201  } 202  } 203                         return flag; 204  }; 205 
                    var getters = { 207                         "SELECT": function () { 208                             return $(obj).val(); 209  }, 210                         "INPUT": function () { 211                             var type = $(obj).attr("type").toLowerCase(); 212                             if (contains(["text", "password"], type)) { 213                                 return $(obj).val(); 214  } 215                             if (contains(["checkbox", "radio"], type)) { 216                                 return $(obj).attr("checked") ? $(obj).val() : null; 217  } 218  }, 219                         "TEXTAREA": function () { 220                             return $(obj).val(); 221  } 222  }; 223 
                    var defaultGetter = function () { 225                         return $(obj).html(); 226  }; 227 
                    var elementType = $(obj).get(0).tagName.toUpperCase(); 229                     var getter = getters[elementType] || defaultGetter; 230                     return getter(); 231  }, 232                 dealDomObj: function () { 233                     var dom = toddyDetailObj.GetDom(); 234                     console.log(dom.find("[toddy-data]")); 235                     for (var item in config.data) { 236                         var temp = config.data[item]; 237                         if ($.isArray(temp)) { 238                         } else { 239                             toddyDetailObj.dealDomValue(dom.find("[name='" + item + "']"), temp); 240  } 241  } 242  }, 243 
                dealDomValue: function (dom, data) { 245                     var domName = toddyDetailObj.getDomTagName(dom); 246                     var setter = { 247 
 }; 249 

 }, 252                 getDomTagName: function (dom) { 253                     var $dom = $(dom); 254                     return $dom.get(0).tagName.toUpperCase(); 255  }, 256                 initEvent: function () { 257                     var dom = $("[" + tagPrefix + "-data]"), flag = true, num = 0, nowObjTemp, isParent = ""; 258                     dom.each(function () { 259                         var data = $(this).attr(tagPrefix + "-data"); 260                         if (data.split(".").length > 2) { 261                             if (num === 0) { 262                                 nowObjTemp = $(this); 263                                 isParent = data; 264  } 265 
                            flag = false; 267                             num++; 268  } 269  }); 270 
                    if (flag) { 272  toddyDetailObj.BindEvent(); 273                     } else { 274                         /** 275  * 配置信息有誤提示使用者 276  * @type {string} 277                          */
                        var tagName = nowObjTemp.get(0).tagName.toLowerCase(), 279                             alertTip = "<" + tagName + " " + tagPrefix + "-data=\"" + isParent + "\"></" + tagName + ">"; 280                         alert("目前我們只支持2級Model,配置信息有誤!\r\n" + alertTip); 281  } 282  } 283  }; 284 
 toddyDetailObj.initEvent(); 286             return config.data; 287  } 288  }); 289 })(jQuery);