简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - chargement asynchrone js et séquence d'exécution DOM, packaging js. (sans gulp ni webpack)
代言
代言 2017-06-30 09:58:30
0
2
834

Objectif :

Je souhaite regrouper les ressources communes à toutes les pages du projet, telles que reset.css, jq-ui.css, jq.js, etc., dans un seul js. Cela pourra être appelé js d'initialisation à l'avenir, les nouvelles pages ne peuvent y faire référence qu'à ce js.

Situation actuelle :

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

Vous souhaitez le changer en :

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

Question :

Problème d'ordre de chargement des ressources de page

  1. Le reset.css doit être chargé au début. ----La situation réelle est qu'il est chargé après le rendu du DOM, ce qui est inutile

  2. jq.js, car le js de toutes les pages dépend de jq, jq doit être chargé en premier, puis le js de la page est chargé. ----La situation réelle est que la page js est chargée en premier et qu'une erreur est signalée.

Demander conseil :

  1. Si vous souhaitez obtenir les résultats souhaités ci-dessus, comment devez-vous l'écrire pour vous assurer que les ressources externes src et href sont demandées dans l'ordre souhaité ? Cela signifie que les CSS et js dépendants doivent être exécutés avant l'exécution du js de la page, puis exécutés après le chargement.

  2. J'ai vérifié les événements d'écoute et de chargement des fichiers, mais il y a beaucoup de choses courantes dans ma page. Comment puis-je m'assurer que toutes les ressources initialisées sont chargées avant le chargement ? 

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

répondre à tous(2)
扔个三星炸死你
扔个三星炸死你2017-06-30 10:00:30 2 plancher

Je ne sais pas si vous utilisez gulp ou webpack pour l'emballage. Vous pouvez essayer d'introduire un plug-in comme gulp-order

.
Comme +0
Ajouter une réponse
给我你的怀抱
给我你的怀抱2017-06-30 10:00:30 1 plancher

Je me souviens probablement de les avoir emballés dans l'ordre. Très bien.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！