创建includes文件jQuery_Jquery - Fatal编程技术网

创建includes文件jQuery

jquery

创建includes文件jQuery,jquery,Jquery,问题/问题：我有几个js文件（~15）和一些函数。为了不必在html页面中逐个包含它们，我想创建一个包含文件（如php中的include（）、require（）等）目标：因此，我们的目标是实现这样的目标： HTML:仅src main.js或main.js+includes.js 包括.js: 应该得到所有的脚本 Main.js:应该可以访问所有includes.js脚本我已经尝试过的： document.write('<script type="text/javascript

问题/问题： 我有几个js文件（~15）和一些函数。为了不必在html页面中逐个包含它们，我想创建一个包含文件（如php中的include（）、require（）等）

目标： 因此，我们的目标是实现这样的目标：

HTML:仅src main.js或main.js+includes.js
包括.js: 应该得到所有的脚本
Main.js:应该可以访问所有includes.js脚本

我已经尝试过的：

document.write('<script type="text/javascript" src="main.js"></script><script type="text/javascript" src="js-file-1.js"></script><script type="text/javascript" src="js-file-2.js"></script>');

<head>
    <script language="javascript" type="text/javascript" src="include-js.txt"></script>
</head>

$.getScript includes.js中的所有文件，在main.js之前的html中对其进行src，并尝试使用main.js中的函数，但均无效
$.getScript includes.js中的所有文件，$.getScript includes.js在main.js中，只是src main.js，尝试使用main.js中的函数，不起作用
与上面相同，但src在main.js之前包含.js，脚本运行两次

感谢您的反馈，谢谢

PS：我已经找到了这些：和这些：，但是它们不是我想要的。不需要jQuery。试试简单点的

我做了类似的事情：在多个较小的JS文件中编写代码，但在HTML中只包含一个

在服务器上，我可以选择提供单一/模糊JS，或者提供类似以下内容的服务：

=== all.js ===
(function() {
    'use strict';
    var a = [
       'file1',
       'utils',
       'main',
       'jquery.placeholder',
       ...
    ];
    var i;
    var s = [];
    for (i = 0; i < a.length; i += 1) {
        s = s.concat(['<script src="/js/', a[i], '.js"></script>']);
    }
    document.write(s.join(''));
}());

==all.js===
（功能（）{
"严格使用",；
变量a=[
“文件1”，
“utils”，
"主要",，
“jquery.placeholder”，
...
];
var i；
var s=[]；
对于（i=0；i


如您所见，HTML加载all.js
，它执行：它将我想要的所有其他脚本文件写入DOM
这意味着在调试时，我仍然单独加载文件（因此断点很容易）。如果我想添加一个新的JS文件，我只需编辑我的all.JS

当我不调试时，我的服务器会发送一个all.js
，它（本质上）是单个文件的串联。（这很简单：根据我的all.js的结构，一个简单的正则表达式可以拉出所有的单独文件&然后我可以通过闭包编译器将它们推送出去。）
$（function（）
{
var js=[“file1.js”，“file2.js”]；
var负载=[]；
for（js脚本）
{
加载。推动（“”）；
}
返回load.join（“”）；
});
如果我正确理解了您的问题，您希望main.js
仅在包含所有文件后执行吗？为什么不从includes.js
文件中运行main.js
？从中，我们可以在includes文件中执行以下操作：
function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) { 
        $.getScript(script, function () {
            if (++progress == scripts.length) callback();
        }); 
    });
}
getScripts(["script1.js", "script2.js"], function () {
    // now load the main.js file since all scripts have loaded
    getScripts(["main.js"], function () {
        // do something
        // you have access to all included js files
    });
});

可能您可以将includes.js
文件重命名为init.js
并仅将此文件添加到html中
注意：作为旁注，将所有js文件放在一个文件中并添加到html中可能会更快。更多的文件意味着对服务器的调用更多。除非您使用的是不同页面需要不同js文件的动态环境，否则请将所有js转储到一个文件中。您还可以缩小此文件以使其更快。
您可以这样做
创建一个名为include-js.txt的文本文件
在include-js.txt中添加document.write（“”），并使用标记将所有js文件包含在其中
现在，在HTML文件中，使用标记包含此txt文档
例如：
include-js.txt文件：
document.write('<script type="text/javascript" src="main.js"></script><script type="text/javascript" src="js-file-1.js"></script><script type="text/javascript" src="js-file-2.js"></script>');

<head>
    <script language="javascript" type="text/javascript" src="include-js.txt"></script>
</head>

document.write（“”）；

HTML文件：
document.write('<script type="text/javascript" src="main.js"></script><script type="text/javascript" src="js-file-1.js"></script><script type="text/javascript" src="js-file-2.js"></script>');

<head>
    <script language="javascript" type="text/javascript" src="include-js.txt"></script>
</head>


为什么不将它们合并到服务器上的一个更大的JS文件中？大多数人都是这样做的。将它们组合成一个更大的可缓存文件，并将其最小化。比让浏览器下载15个单独的文件要快得多。我认为保存几个较小的文件可能比保存一个较大的文件更容易维护和修改。没有？你试过requireJS吗：也许你在html和includes中声明了两次js？否则，您应该分享您的尝试，也许可以提供帮助，getallscripts工作，所以其中显示file1 utils main这些是文件名？@Case Yes。“file1”、“utils”等都是我的JS文件。另外，由于我有一个jquery.placeholder的本地版本，所以我在这里也包含了它。在我的例子中，由于所有JS文件都位于同一位置，var a[]
只是没有完整路径或“.JS”扩展名的文件名，这两个文件名都添加到for
循环中。