通过html标签数据属性动态加载js、css文件

Dynamically loading js, css files by html tag data attributes

本文关键字：js css 文件 加载 动态 html 标签 数据属性 通过      更新时间：2023-09-26

我们可以实现动态加载，对js、css等文件进行处理吗？

通过从html标签数据属性中获取所有需要的信息（我们必须加载什么）？

例如：

<html>
    <head>
        <title>Our app</title>
    </head>
    <body data-load-css="style">
        <div class="all" data-load-js="jquery|jqueryui" data-load-js-type="async">
            <div class="header" data-load-js="main">
                Header
            </div>
            <div class="body" data-load-js="body">
                Body
                <div class="some-tipsy" data-load-css="tipsy"></div>
            </div>
            <div class="footer" data-load-js="other">
                Footer
                <div class="some-other" data-load-css="other"></div>
            </div>
        </div>
        <script>
            // our js app to load dynamically js, css
        </script>
    </body>
</html>

所以，也许你们有一些想法，如何做到最好？具有最佳性能和灵活性。

或者我只需要使用require-js，就不用担心一些"新东西"了？如果只是需要js，那么如何最好地使用这个js插件？以最动态的方式加载所有内容？

如何解决js-async、延迟提交的问题？其中某些脚本必须按特定顺序加载。

以下是我对当前问题的第二个版本：https://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies

以下是动态加载脚本的几种方法：

  • Javascript：编写一个自定义加载函数
  • jQuery:$.getScript（）。有关css，请参阅SO Post
  • require.js:require（moduleName）
  • ECMA 6：导入

以下是一个用于动态加载脚本的纯javascript函数：

function(url, callback) {
  var scripts = utils.getLoadedScripts(); // Read all scripts and push names in array.
  var lastIndex = url.lastIndexOf("/");
  var isLoaded = false;
  scripts.forEach(function(row, index) {
    if (row == url.substring(lastIndex + 1)) {
      isLoaded = true;
      return;
    }
  });
  if (!isLoaded) {
    //$(".reveal").addClass("loading");
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.name = "url";
    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;
    // Fire the loading
    head.appendChild(script);
  }
};

您可以在您的案例中使用web workers。您可以异步处理代码以异步完成任务。

主脚本：

var worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data);
}, false);
worker.postMessage(); // Starts the worker to work;

doWork.js（工人）:

self.addEventListener('message', function(e) {
  self.postMessage("Hi, loaded async."); // send the data via postMessage to main script.
}, false);

因此，这意味着您可以将逻辑放入doWork.js中，并将脚本异步地放到用户的屏幕上。

相关文章：