現代瀏覽器中內建的幾個可以等效替代jQuery的功能

aqee發表於2013-05-27
瀏覽器jQuery

　　jQuery的體積在不斷的增大。新功能要不斷增加，這是必然結果。雖然從版本1.8.3開始的瘦身效果明顯，但不可否認的是，對於移動手機端的網頁開發，它仍然是不可接受的。當然，jQuery不是鐵板一塊，你可以對它進行定製，只打包進你想要的元件，但其中的一些用來相容老式瀏覽器的程式碼你無法去除。

　　就我的個人習慣來說，不管開發什麼專案，即使是一個很簡單的demo，我做的第一件事就是引入jQuery，這樣做主要是想使用它提供的DOM選擇器功能。對於一些像IE6/IE7這樣的老式瀏覽器，這種做法是顯而易見的，但是，如今現代瀏覽器裡已經內建了完整的DOM選擇器功能，能讓你使用原生的瀏覽器提供的方法來實現jQuery的功能。

　　document.queryselector

　　這裡說的現代瀏覽器是指火狐、谷歌、Opera、Safri等新生代瀏覽器，如果是IE，你需要至少是IE8或以上。你可以簡單的將document.querySelector()函式對映為$，它能返回在DOM中找到的第一個匹配選擇條件的元素。任何的CSS選擇符都可以作為它的引數。

　　注意：IE 8只支援 CSS2.1標準的選擇器

<div class="container">
  <ul>
    <li id="pink">Pink</li>
    <li id="salmon">Salmon</li>

    <li id="blue">Blue</li>
    <li id="green">Green</li>
    <li id="red">Red</li>
  </ul>  

</div>

<script>

  // 建立全域性的 '$' 變數
  window.$ = function(selector) {
    return document.querySelector(selector);
  };

  (function() {
    // 通過id查詢item1，將它的背景顏色修改為淺紅
    var item = $("#salmon").style.backgroundColor="salmon";
    console.log(item);
  }());  
</script>

　　你需要使用原生的“style”方法，而且這裡不能使用jQuery裡的鏈式呼叫。console.log()輸出的將會是backgroundColor方法返回的“salmon”。

　　原生DOM節點有時候會比封裝後的jQuery物件更好用。例如，如果你想修改一個圖片的src屬性，比較一下下面使用jQuery的做法和直接使用DOM節點的做法。

// jQuery方式
$("#picture").attr("src", "http://placekitten.com/200/200");

//使用將querySelector對映為$的原生js方式
$("#picture").src = "http://placekitten.com/200/200";

　　DOM物件能讓你直接訪問圖片的src屬性，相反，所有的jQuery物件都需要你通過attr函式來操作。

　　document.querySelector方法只返回一個元素。如果你的選擇目標是一堆元素，它只會返回符合條件的第一個節點。要想返回所有節點，你需要使用document.querySelectorAll方法。

　　document.queryselectorall

　　一個很巧妙的做法是將querySelector對映為$，而將querySelectorAll函式對映為$$。但它返回的是一個節點列表，不如jQuery裡返回的Array格式好用，我們可以使用Array.prototype.slice.call(nodeList)方法加工一下，讓它更方便。

<div class="container">
  <ul>
    <li id="pink">Pink</li>

    <li id="salmon">Salmon</li>

    <li id="blue">Blue</li>
    <li id="green">Green</li>
    <li id="red">Red</li>

  </ul>  

</div>

<script>

  window.$ = function(selector) {
    return document.querySelector(selector);
  };

  window.$$ = function(selector) {
    var items = {},
    results = [],
    length = 0,
    i = 0;

    // 注意，IE8不支援這種做法
    results = Array.prototype.slice.call(document.querySelectorAll(selector));

    length = results.length;

    // add the results to the items object
    for ( ; i < length; ) {
      items[i] = results[i];
      i++;
    }

    // 新增一些額外的屬性，讓它更像一個Array
    items.length = length;
    items.splice = [].splice();

    // 新增 'each' 方法
    items.each = function(callback) {
      var i = 0;
      for ( ; i < length; ) {
        callback.call(items[i]);
        i++;
      }
    }

    return items;
  };

  (function() {

    // 查詢green項，修改字型大小
    $("#green").style.fontSize = "2em";

    // 通過id查詢，修改背景色
    $$("li").each(function() {
      this.style.backgroundColor = this.id;
    });
  }());

</script>

　　注意，IE8是不支援將一個nodeList轉換為Array的。

　　classList

　　使用jQuery對CSS類操作十分方便，幸運的是，現代瀏覽器裡也內建了一下方法能夠很方便的操作它們，主要用到了classList物件。下面是一些基本操作兩種方式的對比。

  window.$ = function(selector) {
    return document.querySelector(selector);
  };

  //----增加CSS類------

  /* jQuery */
  $(".main-content").addClass("someClass");

  /* 等效內建方法 */
  $(".main-content").classList.add("someClass");

  //----刪除一個CSS類-----

  /* jQuery */
  $(".main-content").removeClass("someClass");

  /* 等效內建方法 */
  $(".main-content").classList.remove("someClass");

  //----判斷是否存在一個CSS類---

  /* jQuery */
  if($(".main-content").hasClass("someClass"))

  /* 等效內建方法 */
  if($(".main-content").classList.contains("someClass"))

　　相對於jQuery提供大量豐富的方法，上面說的這幾個現代瀏覽器裡內建的功能顯得很簡單，但如果專案中的要求不高，這些替代方法能大大的減少你的應用依賴。

　　最後要提醒的是，這些內建方法在不同的瀏覽器和不同的版本中支援程度不一樣，下面是它們的支援程度參考表。

　　附圖1：各種瀏覽器對querySelector/querySelectorAll的相容支援

各種瀏覽器對querySelector/querySelectorAll的相容支援

　　附圖1：各種瀏覽器對classlist的相容支援

各種瀏覽器對classlist的相容支援

　　參考資料：

  1. 5 Things You Should Stop Doing With jQuery
  2. Native equivalents of jQuery functions
  3. http://caniuse.com

相關文章