简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js異步載入與DOM的執行順序，打包js。 （不用gulp和webpack）
代言
代言 2017-06-30 09:58:30
0
2
859

目的：

想要把，專案中所有頁面通用的資源，例如：reset.css，jq-ui.css，jq.js等，全部打包在一個js裡面，可以叫初始化js，以後新頁面就可以只引用這個js即可。

現況：

index.html

<head>
    <link href = "css/reset.css">  //所有页面通用
    <link href = "css/jq-ui.css">  //所有页面通用
    <link href = "css/index.css">  //单独这个页面的css
<head>

<body>
    //页面代码……
    //页面代码……
</body>

<srcipt src="js/jq.js"></script>  //所有页面通用
<srcipt src="js/index.js"></script>  //单独这个页面的js

想要改成：

#index.html

<head>
    
    <link href = "css/index.css">  //只保留单独这个页面的css
<head>

<body>
    //页面代码……
    //页面代码……
</body>

<srcipt src="js/init.js"></script>  //想要封装好通用init的js，以后可以通用
<srcipt src="js/index.js"></script>  //只保留单独这个页面的js

init.js

（function(){

  var reset_css = document.createElement('link'),
      jq_js = document.createElement('script');
      
      //加载通用的css
      reset_css.href = "css/reset.css";
      
      //加载通用的js
      jq_js.src = "js/jq.js";
}()）

問題：

頁面資源載入順序問題

  1. 其中reset.css必須在最開始載入。 ----實際情況，DOM渲染完了才載入的，沒用了

  2. jq.js，因為所有頁面的js都依賴jq，必須jq先載入完後，再載入頁面的js。 ----實際情況，頁面js先載入了，報錯了。

求教：

  1. #如果想要實現上述想要的結果，該怎麼寫，能保證請求外部src，href資源按照想要的順序載入呢？就是依賴的必須css，js必須在頁面的js執行之前，載入完後再執行。

  2. 有查過檔案監聽事件、onload，但是我頁面中通用的東西有點多，怎麼樣寫保證全部初始化資源加載完後再去加載呢？ 

common_file1.onload = function(){
    common_file2.onload = function(){
        common_file3.onload = function(){
                return
        }
        return
    }
    
    //再去加载每个页面中的单独需要资源吗？  这样写感觉好傻 /(ㄒoㄒ)/~~
    }
代言
代言

全部回覆(2)
扔个三星炸死你
扔个三星炸死你2017-06-30 10:00:30 2樓

不知道你打包是採用gulp還是webpack， 可以試著引入gulp-order類似的插件

點贊 +0
新增回覆
给我你的怀抱
给我你的怀抱2017-06-30 10:00:30 1樓

我大概記得就是按照順序打包。就好了。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！