cari

Rumah  >  Soal Jawab  >  teks badan

javascript - pemuatan tak segerak js dan urutan pelaksanaan DOM, pembungkusan js. (tanpa teguk dan webpack)

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ㄒ)/~~
    }
代言代言2703 hari yang lalu869

membalas semua(2)saya akan balas

  • 扔个三星炸死你

    扔个三星炸死你2017-06-30 10:00:30

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

    balas
    0
  • 给我你的怀抱

    给我你的怀抱2017-06-30 10:00:30

    Saya mungkin masih ingat mengemasnya mengikut urutan. baik sahaja.

    balas
    0
  • Batalbalas