當初還不懂jQuery(更精準點說,是jQuery還沒出生),乖乖用Javascript一行行把功能堆出來。用慣了jQuery後,這回要改寫翻新功能,說實在的,我已喪失直接用Javascript Hard-Code的耐性。就好像跟過大哥,體驗過拿手槍汽油彈在街頭火拼的爽快後,就很難再脫離幫派回去過撿石頭木棍跟人打架的生活。(這比喻一整個怪 >_<)
要實現這個理想,有三個重點: 1) 偵測必要的js是否已載入完成 2) 使用Javascript載入js 3) 多個js必須依序載入(例如: 先jquery.js再jquery.blockUI.js)。
(function() { function importJS(src, look_for, onload) { var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', src); if (onload) wait_for_script_load(look_for, onload);
if (eval("typeof " + look_for) == 'undefined') { var head = document.getElementsByTagName('head')[0]; if (head) head.appendChild(s);
else document.body.appendChild(s);
}
}
function wait_for_script_load(look_for, callback) { var interval = setInterval(function() { if (eval("typeof " + look_for) != 'undefined') { clearInterval(interval);
callback();
}
}, 50);
}
importJS("somePath/jquery-1.2.6.js", "jQuery", function() { importJS("somePath/jquery.blockUI.js", "jQuery.blockUI", function() { $.blockUI({ message: "<span>Done!</span>" }); });
});
})();
註: 最外層我包了一個(function() { ... })();,由於匿名函數的封裝,其中使用的importJS, wait_for_script_load等函數名稱只會這段空間中有效,不會與網頁其他地方的函數命名衝突,理由是不希望因為插入控件而干擾到網頁其他部分,我認為這也算控件品質的衡量指標之一。