我們?cè)谧隽斜淼臅r(shí)候經(jīng)常會(huì)遇到全選，反選進(jìn)行批量處理問(wèn)題，例如：

　　我當(dāng)時(shí)就是簡(jiǎn)單的實(shí)現(xiàn)了，然后想封裝到公共的js中，封裝的太爛，不好意思貼出來(lái)了（就是把實(shí)現(xiàn)代碼之間放到公共js中，然后每個(gè)頁(yè)面都用固定的id,class,現(xiàn)在想想我都不好意思叫他封裝了），然后想到之前老大有寫(xiě)過(guò)這個(gè)功能去看下他怎么寫(xiě)的，真是沒(méi)有對(duì)比就沒(méi)有傷害啊，這才叫封裝；

$(':checkbox[data-check-target]').click(function () {
  var target = $(this).attr('data-check-target');
  if ($(this).prop('checked')) {
    $(target).prop('checked', true);
  } else {
    $(target).prop('checked', false);
  }
});

　　首先這兒的高封裝性就體現(xiàn)出來(lái)了，只有一個(gè)自定義的data-check-target屬性用于js和html分離后的連接橋梁（而我當(dāng)時(shí)用兩個(gè)：一個(gè)全選復(fù)選框，一個(gè)子復(fù)選框，有關(guān)的點(diǎn)都用上了，這樣就沒(méi)起到封裝的效果，js和html耦合性太大）（我看到上面的js就在想怎么通過(guò)一個(gè)連接點(diǎn)把三個(gè)相關(guān)聯(lián)的東西聯(lián)系起來(lái)的呢）；

　　接下來(lái)我們繼續(xù)看具體使用的地方：

　　我發(fā)現(xiàn)全選復(fù)選框用于和js鏈接的橋梁的自定義屬性data-check-target有點(diǎn)特別：

<input type="checkbox" data-check-target=".id-checkbox" />

　　它的值為“.id-checkbox”，看起來(lái)就感覺(jué)好奇怪，繼續(xù)往下看子復(fù)選框?qū)崿F(xiàn)：

<input type="checkbox" name="ids[]" value="@item.Id" class="id-checkbox" />

　　到這兒才豁然開(kāi)朗原來(lái)子復(fù)選框的class名稱(chēng)就存放在自定義屬性data-check-target中；

var target = $(this).attr('data-check-target');

　　然后再通過(guò)自定義屬性data-check-target拿到子復(fù)選框的class，從而達(dá)到高封裝性；

　　我總結(jié)的就是js和html通過(guò)了自定義屬性data-check-target通信，子復(fù)選框依賴(lài)全選復(fù)選框自定義屬性data-check-target的值；

　　這個(gè)例子看下來(lái)代碼不難，也沒(méi)有什么地方很難理解的，就是通過(guò)一個(gè)自定義屬性巧妙的完成了低耦合的封裝，這也是正是這段代碼的難點(diǎn)和精髓；

　　我真心抑制不住內(nèi)心的崇拜，這幾行代碼太漂亮了。

　　PS：上面js為什么用prop而不用attr，因?yàn)椋喝绻?dāng)前input中初始化未定義checked屬性，則該元素沒(méi)有指定的checked屬性，所以.attr()會(huì)返回undefined；

對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。

最新評(píng)論