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
816

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

  //所有页面通用  //所有页面通用  //单独这个页面的css   //页面代码…… //页面代码……   //所有页面通用  //单独这个页面的js

Vous souhaitez le changer en :

index.html

  //只保留单独这个页面的css   //页面代码…… //页面代码……   //想要封装好通用init的js,以后可以通用  //只保留单独这个页面的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)
扔个三星炸死你

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

.
    给我你的怀抱

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

      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!