suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Javascript - asynchrones Laden von js und DOM-Ausführungssequenz, Packen von js. (ohne Gulp und Webpack)

Zweck:

Ich möchte die allen Seiten im Projekt gemeinsamen Ressourcen wie reset.css, jq-ui.css, jq.js usw. in ein js packen. Es kann in Zukunft als Initialisierungs-js bezeichnet werden. Neue Seiten können nur darauf verweisen.

Aktuelle Situation:

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

Möchten Sie es ändern in:

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

Frage:

Problem mit der Ladereihenfolge der Seitenressourcen

  1. Die reset.css muss zu Beginn geladen werden. ----Die tatsächliche Situation ist, dass es nach dem Rendern des DOM geladen wird, was nutzlos ist

  2. jq.js, da das js aller Seiten von jq abhängt, muss jq zuerst geladen werden, und dann wird das js der Seite geladen. ----Die tatsächliche Situation ist, dass die Seite js zuerst geladen wird und ein Fehler gemeldet wird.

Bitten Sie um Rat:

  1. Wenn Sie die oben gewünschten Ergebnisse erzielen möchten, wie sollten Sie es schreiben, um sicherzustellen, dass externe src- und href-Ressourcen in der gewünschten Reihenfolge angefordert werden? Dies bedeutet, dass das abhängige CSS und JS ausgeführt werden muss, bevor das JS der Seite ausgeführt wird, und dann nach dem Laden ausgeführt werden muss.

  2. Ich habe Dateiüberwachungsereignisse und Onload überprüft, aber es gibt viele gemeinsame Dinge auf meiner Seite. Wie kann ich sicherstellen, dass alle initialisierten Ressourcen geladen werden, bevor sie geladen werden? 

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

Antworte allen(2)Ich werde antworten

  • 扔个三星炸死你

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

    不知道你打包是采用gulp还是webpack， 可以试着引入gulp-order类似的插件

    Antwort
    0
  • 给我你的怀抱

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

    我大概记得就是按照顺序打包。就好了。

    Antwort
    0
  • StornierenAntwort