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

Question

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

3

我们能否实现动态加载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，并不用担心一些“新事物”？如果只是使用require js，那么如何使用这个js插件最好地动态加载所有内容？

如何解决js异步、延迟加载的问题？其中一些脚本必须按特定顺序加载。

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

- Vitalij

但是你不觉得如果你导航离开页面，然后再回到页面会很繁琐吗？它会再次加载相同的库和文件。 - Jai

Jai提出了一个好的解决方案，但需要更多的上下文描述... - MTroy

我目前对此并没有很大的了解，因此我不想在创建网站的主要js逻辑时犯下重大错误。这里贴出的每个想法和解决方案都对我来说都很有趣。 - Vitalij

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rajesh · Answer 1

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

Javascript：编写自定义加载函数。
jQuery：$.getScript()。有关 CSS，请参阅 SO-Post。
require.js：require(moduleName)
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);
  }
};

- Jai · Answer 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 中，并异步地将脚本放到用户屏幕上。