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

【问题标题】：Dynamically loading js, css files by html tag data attributes通过html标签数据属性动态加载js、css文件
【发布时间】：2016-03-27 05:53:38
【问题描述】：

能否实现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, defer loding 的问题？某些脚本必须按特定顺序加载。

这是我当前问题的续版 2：https://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies

【问题讨论】：

但是，如果您离开然后再次返回该页面，您不认为这将是一个超载。它将再次加载相同的库和文件。
Jai 提出了一个很好的解决方案，但需要更多的上下文描述......
目前我还没有太多的知识。所以，我不想通过创建网站的主要 js 逻辑来犯一些重大错误。一些人在这里粘贴的每一个想法和解决方案对我来说都很有趣。

标签： javascript jquery html css require

【解决方案1】：

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

Javascript：编写自定义加载函数。
jQuery：$.getScript()。对于 CSS，请参阅 SO-Post。
require.js: 要求（模块名称）
ECMA 6：import

以下是一个纯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);
  }
};

【讨论】：

谢谢，但如果你有一些确切的代码可以解决我的主要问题，那就更好了。很抽象，很简单）
您可以查看以下JSFiddle 以供参考。希望对你有帮助

【解决方案2】：

您可以在您的情况下使用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 并将脚本异步放到用户的屏幕上。

【讨论】：

谢谢。你能显示代码示例，当我们将加载：2 个异步 js、2 个 css 文件和 3 个带延迟选项的 js 文件？然后在主 js 应用程序逻辑中我有可能从所有加载的脚本中访问变量？ js文件必须通过当前页面暴露的html数据属性加载。
@vital 你应该向我们展示你尝试过什么但没有成功？只有这样我们才能帮助你，我刚刚发布了一条路径。
这里有更多解释：stackoverflow.com/questions/34413940/…