设置

Question

我想从单个文件加载4个js文件。

在我的页脚中，我有以下链接

<script src="content/vendor/js/utils.js"></script>

utils.js是主文件。

我要加载的文件位于content / vendor / js / gsap

中

我在我的实用程序文件中有以下代码，但它似乎没有加载文件，因为效果停止工作。

// JavaScript Document
=== all.js ===
(function() {
    'use strict';
    var a = [
       'TweenMax.min',
       'ScrollMagic',
       'animation.gsap',
       'jquery.placeholder',
       ...
    ];
    var i;
    var s = [];
    for (i = 0; i < a.length; i += 1) {
        s = s.concat(['<script src="/gsap/', a[i], '.js"></script>']);
    }
    document.write(s.join(''));
}());

Answer 1

我知道您可能希望在单个JavaScript文件中执行此操作，但它似乎会增加不必要的开销。

我想从单个文件中加载4个js文件

您可以将所有这些放入单个html文件中并使用链接标记：

<link rel="import" href="js-loader.html">

在js-loader.html中：

<script src="/gsap/TweenMax.min.js"></script>
<script src="/gsap/ScrollMagic.js"></script>
<script src="/gsap/animation.gsap.js"></script>
<script src="/gsap/jquery.placeholder"></script>

这是我在我工作的公司的工作方式，而且看起来更具可读性（尽管这是我们的意见）。

Answer 2

如果您关注性能，可能需要使用Gulp等实用程序创建单个JavaScript文件。这也将为您处理缩小。

这里很简单setup guide。

设置

下载NodeJS
安装gulp

gulpfile.js

var gulp   = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('scripts', function() {
  gulp.src([
       'TweenMax.min',
       'ScrollMagic',
       'animation.gsap',
       'jquery.placeholder'
      ].map(name => '/gsap/' + name + '.js'))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'))
});

然后运行此命令。

gulp scripts

最后，将其包含在您的HTML中。

<script src="dist/all.js"></script>

如果您确实想要动态加载它们，请使用script编写的nemisj。

＆＃13;

function loadScripts(array, callback) {
  const loader = (src, handler) => {
    let script = document.createElement('script');
    script.src = src;
    script.onload = script.onreadystatechange = () => {
      script.onreadystatechange = script.onload = null;
      handler();
    }
    let head = document.getElementsByTagName('head')[0];
    (head || document.body).appendChild(script);
  };
  (function run() {
    array.length != 0 ? loader(array.shift(), run) : (callback && callback())
  })();
}

loadScripts([
  'TweenMax.min',
  'ScrollMagic',
  'animation.gsap',
  'jquery.placeholder'
].map(name => '/gsap/' + name + '.js'), function() {
  alert('Finished loading scripts...');
});

＆＃13;

Answer 3

以下功能对我来说很有用。它将文件second.js和third.js链接到文档。 index.js是：

// index.js
(function () {
    var paths = ['second', 'third'];
    for (path in paths) {
        var script = document.createElement('script');
        script['src'] = paths[path] + '.js';

        document.body.appendChild(script);
    }
}());

而index.html是：

// index.html
<!doctype html>
<html>

<head>

</head>

<body>
    <script src="index.js"></script>
</body>

</html>

从单个文件加载js

3 个答案:

设置

gulpfile.js