javascript - pemuatan tak segerak js dan urutan pelaksanaan DOM, pembungkusan js. (tanpa teguk dan webpack)
代言
代言 2017-06-30 09:58:30
0
2
836

Tujuan:

Saya ingin membungkus sumber yang biasa untuk semua halaman dalam projek, seperti reset.css, jq-ui.css, jq.js, dll., menjadi satu js. halaman baharu hanya boleh merujuknya.

Situasi semasa:

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

Nak tukar kepada:

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";
}())

Soalan:

Masalah pesanan memuatkan sumber halaman

  1. Reset.css mesti dimuatkan pada mulanya. ----Situasi sebenar ialah ia dimuatkan selepas DOM diberikan, yang tidak berguna

  2. jq.js, kerana js semua halaman bergantung pada jq, jq mesti dimuatkan dahulu, dan kemudian js halaman dimuatkan. ----Situasi sebenar ialah halaman js dimuatkan dahulu dan ralat dilaporkan.

Minta nasihat:

  1. Jika anda ingin mencapai hasil yang diingini di atas, bagaimanakah anda harus menulisnya untuk memastikan sumber src dan href luaran diminta mengikut susunan yang dikehendaki? Ini bermakna css dan js bergantung mesti dilaksanakan sebelum js halaman dilaksanakan dan kemudian dilaksanakan selepas dimuatkan.

  2. Saya telah menyemak acara mendengar fail dan onload, tetapi terdapat banyak perkara biasa dalam halaman saya Bagaimana saya boleh memastikan semua sumber yang dimulakan dimuatkan sebelum dimuatkan?

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

membalas semua(2)
扔个三星炸死你

Saya tidak tahu sama ada anda menggunakan gulp atau webpack untuk pembungkusan Anda boleh cuba memperkenalkan plug-in seperti gulp-order

给我你的怀抱

Saya mungkin masih ingat mengemasnya mengikut urutan. baik sahaja.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!