js優化之惰性加載函數
直接上案例，copy後保存爲html文件，打開瀏覽器控制檯即可看到效果。未優化的addEvent，每調用一次都會進行一次判斷。而優化後的addEvent只在首次被調用時進行判斷，其後再次調用時，將不再進行瀏覽器支持的事件監聽判斷。
注意：調用時，記得註釋其他兩個addEvent。
<body>
<div id="div1">div1</div></body>
<script type="text/javascript">
/* 優化方案一：方法重寫後再調用*/
function addEvent (type, element, fun) {
if (element.addEventListener) {
console.log(123);
addEvent = function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if(element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else{
addEvent = function (type, element, fun) {
element['on' + type] = fun;
}
}
addEvent(type, element, fun);
}
/* 優化方案二：匿名函數重寫與執行*/
var addEvent = (function(type, element, fun) {
if (window.addEventListener) {
console.log(123);
return function(type, element, fun) {
element.addEventListener(type, fun, false) //webkit、os
}
}
if (window.attachEvent) {
return function(type, element, fun) {
element.attachEvent('on' + type, fun) //IE瀏覽器
};
}
})();
/* 沒有優化的添加事件方法：每次調用都會判斷*/
function addEvent (type, element, fun) {
if (element.addEventListener) {
console.log(123);
element.addEventListener(type, fun, false);
}
else if(element.attachEvent){
element.attachEvent('on' + type, fun);
}
else{
element['on' + type] = fun;
}
}
var div = document.getElementById('div1');
addEvent( 'click',div, function() {
alert(1);
})
addEvent( 'click',div, function() {
alert(2)
})
</script>
惰性載入函數有兩個主要優點：
第一是顯而易見的效率問題，雖然在第一次執行的時候函數會意味賦值而執行的慢一些，但是後續的調用會因爲避免的重複檢測更快；
第二個是要執行的適當代碼只有當實際調用函數是才執行，很多JavaScript庫在在加載的時候就根據瀏覽器不同而執行很多分支，把所有東西實現設置好，而惰性載入函數將計算延遲，不影響初始腳本的執行時間。
惰性載入函數應用場景總結（以下2條件同時滿足）：
1 應用頻繁，如果只用一次，是體現不出它的優點出來的，用的次數越多，越能體現這種模式的優勢所在；
2 固定不變，一次判定，在固定的應用環境中不會發生改變；