從單個文件加載js
[英]loading js from single file
問題描述
我有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(''));
}());
3 個解決方案
解決方案1
0 2017-03-09 14:18:17
我知道您可能希望在單個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>
這就是我在我工作的公司的工作方式，而且它似乎更具可讀性（盡管這是我們的意見）。
解決方案2
0 2017-03-09 14:40:53
如果您關心性能，可能需要使用Gulp等實用程序創建單個JavaScript文件。 這也將為您處理縮小。
這是一個簡單的設置指南 。
設定
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>
如果你真的想動態加載它們，這里是一個由用戶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
下面的功能對我來說很有用。 它將文件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文件與延遲加載
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.