如何将JavaScript对象连接到单个文件以发送到服务器？

Question

我有大约20个JS对象......

obj.1.js
obj.2.js

所有这些都很好地完成了一项任务。 我一直在使用grunt-concat创建一个名为...的文件。

monster.js

但我必须有一个开放的物体和一个密切的物体，将它们放入IIFE以保护隐私和全球无污染。

// open
(function(){

// monster.js goes here

// close
})();

我的整个方法看起来有点不对劲。

将一组对象发送到客户端的正确方法是什么？

我想立即发送所有这些，因为它们都是需要的。

必须有一个事实上的方法来做到这一点......

最后我想用脚本标签加载它们......

<script src="path_to_monster.js"> </script>

谢谢

Answer 1

我认为您可以使用Gulp创建一个可靠的js文件并调用您的项目

Answer 2

使用正确的前缀和后缀字符串连接JS源文件就足够了，至少要开始。 但它并不是一个模块系统。 随着项目变得越来越复杂，通常会添加“打包管理器”或“模块捆绑器”，例如Browserify ， webpack或rollup.js 。

它们设置起来比较复杂，但要做更完整和复杂的包装，包括

• 翻译现代模块导入语句（其中JS有很多不同的风格，包括node.js-又名CommonJS风格的require()和ES2015模块 ），
• 捆绑其他类型的资产（CSS，内嵌图像，......），
• 可选地运行预处理步骤（例如，将CoffeeScript或Typescript转换为纯Javascript，或运行Babel.js将现代JS转换为可在旧浏览器中轻松运行的更原始的JS），以及
• 帮助管理资产缩小，优化和其他部署流程。

如果你正在寻找其中一个开始，Browserify是最简单的IMO。 但是，一旦你查看了其中任何一个所需的设置，你可能会认为快速和肮脏的连接和包装将适合你一段时间。 模块捆绑器的学习曲线，以及它们拖入的其他生态系统组件的数量......启动成本和复杂性可能令人生畏。

Answer 3

你有大约20个JavaScript对象，这很好。 它们很可能不会100％脱钩。 如果存在相互依赖性，则将这些对象放在单独的源文件中几乎没有潜在的价值。 你说过每个人都执行一项任务。 即便如此，可能还有一些时间先决条件，即从实际的角度来看它们的使用。 包含以下内容的cgi-bin脚本或PHP / Python / C ++ / Perl等效项可以动态创建串联。

#! /bin/bash
echo 'Content-type: application/javascript'
echo
cat ../js/obj*.js

但是，如今大多数共享托管服务器都具有缓存（例如Varnish，Nginx或Apache），这些连接无法实现此类连接的任何潜在好处。

关于您的方法是否片状，我建议您使用较少的主观质量标准：

1. 易于理解
2. 轻松扩展或修改
3. CPU节俭
4. 记忆节俭
5. 网络节俭

（如果使用3,4和5的JavaScript传递，加载和执行方法很好，它们可能会支持快速页面加载。）

没有通用的答案，“将一组对象发送给客户端的正确方法是什么？” 一个熟练的目标是找到在给定情况的上述五个客观标准之间适当平衡的选项。

不可能“立刻发送所有这些”，并且还发送它们，“因为它们都是必需的。” 您必须决定是使用静态链接加载它们还是根据需要动态加载它们。 这也是1到5之间的平衡行为。

你说，“必须有一个事实上的方法来做到这一点，”但事实并非如此。 有许多方法，每种方法都有一套最佳的条件。

如果您使用上次声明的''，则每次更改单个JavaScript文件或动态连接时都必须创建聚合，并且在某些条件下，您将通过网络传递整个有效负载，您可能只需要给定Web文档中的少量单个文件。

这些是基本原则。

---

注意回应评论：不要称之为monster.js。 将它命名为monster.cgi，将上面的bash脚本放入其中，将其放在cgi-bin目录中，并执行chmod 755 monster.cgi以使其可执行。 将JavaScript放在cgi-bin目录旁边名为js的文件夹中。 然后将'放入HTML标题中。