Java Artisan / Neil Chan: yepnope.js 讓瀏覽器只載入需要的檔案

2013-12-27

yepnope.js 讓瀏覽器只載入需要的檔案

yepnope.js 有很多功能，這邊想用的是「條件式載入」。

條件式載入？

以不支援陣列 indexOf() 的 IE8 為例（真弱），以前的作法是先載入再判斷要不要用。

if (!Array.prototype.indexOf) {
 Array.prototype.indexOf = function(obj, start) {
  for (var i = (start || 0), j = this.length; i < j; i++) {
   if (this[i] === obj) {
    return i;
   }
  }
  return -1;
 };
}

對於不需要的瀏覽器，就多載入一個檔案或一段程式碼，如果可以先判斷再載入就很完美了，尤其是很大的檔案的時候，或有時候可以用來避免重複載入，這就是 yepnope.js 的一個重要功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="BIG5">
<title>RWD</title>
<script src="yepnope.1.5.4-min.js"></script>
<script>
  yepnope([ {
    test : Array.prototype.indexOf,
    nope : [ 'array_indexOf.js' ],
    complete : function() {
      alert(Array.prototype.indexOf);
    }
  } ]);
</script>
</head>
<body>
</body>
</html>

然後 array_indexOf.js 可以拿掉判斷的程式。

Array.prototype.indexOf = function(obj, start) {
  for (var i = (start || 0), j = this.length; i < j; i++) {
    if (this[i] === obj) {
      return i;
    }
  }
  return -1;
};

Chrome 得到的結果，沒有載入 array_indexOf.js。