从单个文件加载js
[英]loading js from single file
问题描述
I have 4 js files I want to load from a single file. 
我有4个js文件，我想从一个文件加载。
in my footer I have the following link 在我的页脚中，我有以下链接
<script src="content/vendor/js/utils.js"></script>
utils.js is the main file. utils.js是主文件。
the files I want to load are in content/vendor/js/gsap 我要加载的文件位于content / vendor / js / gsap中
I have the following code in my utilities file but it does not seem to load the files because the effects stop working. 我在我的实用程序文件中有以下代码，但它似乎没有加载文件，因为效果停止工作。
// 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(''));
}());
3 个解决方案
解决方案1
0 2017-03-09 14:18:17
I understand that you might want to do this in a single JavaScript file, but it seems to add unnecessary overhead. 我知道您可能希望在单个JavaScript文件中执行此操作，但它似乎会增加不必要的开销。
I have 4 js files I want to load from a single file
You can place all of those into a single html file and use an link tag: 您可以将所有这些放入单个html文件中并使用链接标记：
<link rel="import" href="js-loader.html">
In 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>
This is how it is done at the company I work at, plus it seems a bit more readable (though that is our opinion). 这就是我在我工作的公司的工作方式，而且它似乎更具可读性（尽管这是我们的意见）。
解决方案2
0 2017-03-09 14:40:53
If you are concerned with performance, you may want to create a single JavaScript file using a utility like Gulp. 如果您关心性能，可能需要使用Gulp等实用程序创建单个JavaScript文件。 This will also handle the minification for you. 这也将为您处理缩小。
Here's an easy setup guide . 这是一个简单的设置指南 。
Setup 设定
gulpfile.js 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'))
});
Then run this command. 然后运行此命令。
gulp scripts
Finally, include this in your HTML. 最后，将其包含在HTML中。
<script src="dist/all.js"></script>
If you really want to load them dynamically, here is a script that was written by user nemisj . 如果你真的想动态加载它们，这里是一个由用户nemisj编写的脚本 。
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...'); });
解决方案3
0 2017-03-09 14:43:35
The function below does the trick for me. 下面的功能对我来说很有用。 It links the files second.js and third.js to the document. 它将文件second.js和third.js链接到文档。 index.js is: 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);
}
}());
And the index.html is: 而index.html是：
// index.html
<!doctype html>
<html>
<head>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.