如何在命名函数中包装整个JavaScript文件?

时间:2014-06-30 16:43:48

标签: javascript jquery html

这是我的情况:

我有4个JS文件 - globalCalc.jscalc1.jscalc2.jscalc3.js。三个计算文件代表不同的计算器。必须为每个要工作的人加载globalCalc.js(它是将计算器放入DOM的JS)。这是所有第三方代码,不应修改。

我的要求是将所有这些计算器以及globalCalc.js放在一个巨大的js文件中。但是,存在名称空间冲突。例如,如果在calc1.js之后加载calc2.js,则根本不会加载initialize。我试图弄清楚每个计算的globalCalc.js函数并覆盖它,但它只是不会让步 - function loadCalc1() { / ** the entire calc1 code, i.e. the contents of the calc1.js file **/ }; function loadCalc2() { / ** same as above, except for calc2.js **/ }; 的设计方式是它需要的对该文件本身进行大量修改,以便正确加载所有内容。

所以,我的想法是以某种方式将这些计算器中的每一个包装在一个命名函数中,然后从我的HTML中调用它。我知道这看起来很愚蠢,因为我可以在技术上简单地发送异步GET请求并在需要时加载计算器,但要求是我将它们放在一个文件中。

这样的事情是可行的:

<script>loadCalc1();</script>

然后在我的HTML中有类似的内容:

{{1}}

这会是这样做的吗?或者有更好的方法来解决这个问题吗? (除了发送单独的GET请求)

编辑:我按照我的说法解决了我的问题。我简单地合并了现有的js文件,之前用上面提到的函数包装它们。在我的脚本标签中,我只是简单地执行该功能。

1 个答案:

答案 0 :(得分:4)

如果您可以花几个小时,请学习使用requirejs.org,如blgt所述。这是使用Javascript编写正确的结构化代码的最佳投资之一。

Requirejs将解决命名空间问题,它将节省加载模块的时间,并提供更多优化。

如果您没有时间,请查看Javascript模块模式的这些出色解释:

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

它们并不那么困难,它们可以帮助您将计算器分开但仍然可以访问。

祝你好运: - )