包含 Javascript 和连接的最佳实践

Question

我有一个中型项目，我想将相当长的 javascript 文件分成几个子模块。之后我想将我所有的 js 文件与 gulp.js 连接起来并缩小它们。

我也不想在每次编辑时都使用 watch 任务来连接我的 js，而是在开发和部署期间使用分离的 js 模块我想运行我的 gulp 连接任务。 (https://www.npmjs.com/package/gulp-concat)

我的问题设置：

我所有的 js 都被 document.ready 包围了（我正在使用 jQuery）。为简单起见，假设我拥有这 3 个功能，内容无关紧要。我想将这 3 个函数分发到 3 个单独的 .js 文件。

$(function() { 
    function myFunction1(){}
    function myFunction2(){}
    function myFunction3(){}
}

我想要的：

main.js:

$(function() { 
    // load function1.js
    // load function2.js
    // load function3.js

}

和所有单独的 functionX.js

通过使用 gulp 连接，我想以开头的代码结束（全部在一个文件中，并被 $(function() {}

正确包含

现在，首先，我不知道如何将函数加载到其中，因此在开发过程中，我只需包含我的 main.js 而无需连接即可获得完整的功能代码。这可能吗？

我尝试使用

$.getScript("function1.js", function(){
});

但在连接之后——这并不令我惊讶——它仍然保持原样。

那么还有其他方法可以实现吗？

或者更好的选择是编写 3 个不同的 functions.js，每个都有自己的 $(function() {})，并且在连接之后我有 3 次那个部分？虽然我会在 html?

中包含开发过程中的所有文件

很高兴听到您对此的想法，以及如何在不重复任何代码的情况下使用 js 模块。

非常感谢。

Answer 1

好的，我刚和另一个开发人员谈过，我们主要告诉我下面的方法是要走的路：

用不同的模块写不同的.js文件（我自己代码分离，更好维护）

他们都包括他们自己的立即调用函数表达式来禁止范围问题和他们的 document.ready 函数

(function ($) { // iief = Immediately-Invoked Function Expression, mainly useful to limit scope
    $(function() { // Shorthand for $( document ).ready()
    // whatever code
    });
}(jQuery));

然后使用例如gulp 并编写监视任务以在更改后动态连接
使用 concat sourcemap 函数仍然可以看到具有正确行号等的原始文件。(Sourcemaps)
包括 all.js（连接的一个）
最后缩小以进行暂存和部署
并使用if($('.selector').length){}检查代码是否应该根据选择器的存在来执行

所以，这就是我现在遵循的方式。无论如何，我很想听听你的想法。干杯

包含 Javascript 和连接的最佳实践

Best Practice for Including Javascript and Concatenate

javascript

module

concatenation

include

gulp