公共js在頁面底部加載的注意事項介紹
更新時間：2013年07月18日 17:37:33 作者：
JavaScript腳本文件都放在頁面底部加載，可以有效地加快頁面的加載速度，下面為大家介紹下書寫時的注意事項
JavaScript腳本文件都放在頁面底部加載，可以有效地加快頁面的加載速度。
但是，php控制器一般這樣寫:
$this->load->view($HEADER);
$this->load->view($MENU);
$this->load->view($VIEW_SHOW, $data);
$this->load->view($FOOTER);
$FOOTER是個共用模版，用于加載js及css文件。
$VIEW_SHOW作為主模版，則可能要單獨(dú)寫些js代碼，這些代碼通常需要使用公共文件的資源的話，把js寫到$FOOTER的后面就不方便了，jQuery的$(document).ready又用不了。這時候，用window.onload就可以了，如下:
window.onload = function() {
(function($) {
function test() {alert(123);}
//或?qū)懶┗趈Query的綁定什么的
})(jQuery)
};
但如果你想從window.onload外調(diào)用里面的函數(shù)，比如你想在這個窗口的子iframe中調(diào)用parent.test()是不會有結(jié)果的。
這時，變通一下，把函數(shù)作全局變量就可以了。
var test; // 全局作用域的聲明
window.onload = function() {
(function($) {
test = function() {alert(123);};
//或?qū)懶┗趈Query的綁定什么的
})(jQuery)
};
只在需要時，才把私有的函數(shù)改成全局的，是更安全的做法。
但是，php控制器一般這樣寫:
復(fù)制代碼 代碼如下:
$this->load->view($HEADER);
$this->load->view($MENU);
$this->load->view($VIEW_SHOW, $data);
$this->load->view($FOOTER);
$FOOTER是個共用模版，用于加載js及css文件。
$VIEW_SHOW作為主模版，則可能要單獨(dú)寫些js代碼，這些代碼通常需要使用公共文件的資源的話，把js寫到$FOOTER的后面就不方便了，jQuery的$(document).ready又用不了。這時候，用window.onload就可以了，如下:
復(fù)制代碼 代碼如下:
window.onload = function() {
(function($) {
function test() {alert(123);}
//或?qū)懶┗趈Query的綁定什么的
})(jQuery)
};
但如果你想從window.onload外調(diào)用里面的函數(shù)，比如你想在這個窗口的子iframe中調(diào)用parent.test()是不會有結(jié)果的。
這時，變通一下，把函數(shù)作全局變量就可以了。
復(fù)制代碼 代碼如下:
var test; // 全局作用域的聲明
window.onload = function() {
(function($) {
test = function() {alert(123);};
//或?qū)懶┗趈Query的綁定什么的
})(jQuery)
};
只在需要時，才把私有的函數(shù)改成全局的，是更安全的做法。
您可能感興趣的文章:
- 判斷滾動條到底部的JS代碼
- 滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)探討
- 始終在頁面底部的層js實現(xiàn)代碼
- Javascript實現(xiàn)DIV滾動自動滾動到底部的代碼
- js實現(xiàn)滾動條滾動到頁面底部繼續(xù)加載
- 基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)
- JS實現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼
- js實現(xiàn)帶關(guān)閉按鈕始終顯示在網(wǎng)頁最底部工具條的方法
- JS實現(xiàn)判斷滾動條滾到頁面底部并執(zhí)行事件的方法
- js判斷滾動條是否已到頁面最底部或頂部實例
- 詳解基于javascript實現(xiàn)的蘋果系統(tǒng)底部菜單
相關(guān)文章
這篇文章主要介紹了js獲取客戶端外網(wǎng)ip的簡單實例，有需要的朋友可以參考一下2013-11-11
利用原生JS與jQuery實現(xiàn)數(shù)字線性變化的動畫
最近在工作中遇到一個需要，需要將數(shù)字實現(xiàn)遞增的動態(tài)顯示，從網(wǎng)上找了相關(guān)的資料發(fā)現(xiàn)利用原生JS與jQuery都可以實現(xiàn)，suoyi8下面這篇文章主要給大家介紹了利用原生JS與jQuery實現(xiàn)數(shù)字線性變化動畫的相關(guān)資料，需要的朋友可以參考下。2017-02-02
以往我們只是習(xí)慣于通過數(shù)組下標(biāo)來訪問正則匹配到的分組，但分組達(dá)到4、5個時，標(biāo)識起來就會非常麻煩。V8早已實現(xiàn)了正則命名分組提案，只是我們很少使用，本文將介紹JS的正則命名分組2018-06-06
整體思路是這樣的：判斷div內(nèi)部是否為空，如果為空，給出無數(shù)據(jù)提示；否則顯示正常頁面，下面給大家分享js判斷div內(nèi)容是否為空的方法，對判斷div內(nèi)容是否為空的相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要介紹了JS控制按鈕10秒鐘后可用的方法,涉及JavaScript基于時間函數(shù)控制頁面元素樣式動態(tài)變換的技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
Javascript學(xué)習(xí)筆記:錯誤處理.2009-07-07
js實現(xiàn)div拖動動畫運(yùn)行軌跡效果代碼分享
這篇文章主要介紹了js實現(xiàn)div拖動動畫運(yùn)行軌跡效果，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
Set是一種叫做集合的數(shù)據(jù)結(jié)構(gòu)(結(jié)構(gòu)和Array很像),Map是一種叫做字典的數(shù)據(jù)結(jié)構(gòu),這篇文章主要為大家詳細(xì)介紹了JavaScript中Map與Set用法與區(qū)別,需要的小伙伴可以參考下2023-11-11
詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積
這篇文章主要介紹了詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06