简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Javascript - asynchrones Laden von js und DOM-Ausführungssequenz, Packen von js. (ohne Gulp und Webpack)
代言
代言 2017-06-30 09:58:30
0
2
833

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ㄒ)/~~
    }
代言
代言

Antworte allen(2)
扔个三星炸死你
扔个三星炸死你2017-06-30 10:00:30 2 Etage

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

Wie +0
Antwort hinzufügen
给我你的怀抱
给我你的怀抱2017-06-30 10:00:30 1 Etage

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！