Question

我相信我所做的事情被称为＆＃39; modular＆＃39; （??）。刚刚学习Javascript。

我目前将每个模块保存在单独的.js文件中。这样便于维护和故障排除。

每个文件都被格式化为变量。这是许多javascript文件中每个文件的包装器的示例：

var FreeHand = function（pixy）{ };

让我们说上面的文件（FreeHand.js）（以及其他许多文件）被调用如下：

        var theBakery = coolCakeBakeryWithOnlineCakeDesign = 'the Pixy Cakes Bakery in Avondale, Arizona';

        var pixy = new Pixy( theBakery );
        var coffee = new Coffee( pixy );
        var decorator = new Decorator ( pixy );
        var freeHand = new FreeHand( pixy );
        var info = new InfoPanel ( pixy );
        var oven = new Oven( pixy );
        var pixyDust = new MagicPixyColors( pixy );
        var tips = new HandyTips( pixy );
        var signals = pixy.signals;

    </script>

signals.js用于每个模块之间的通信，在少数情况下需要它。

我的问题是，这是一种优化内存设计的良好格式吗？或者 - 基本上假设我是一个新手，这是一个很好的格式。意见？帮助

PS：如果你想看一个 LIVE EXAMPLE （我从中复制了这个格式）（这是我的第一个JS项目），看看它是否有效，请查看：http://threejs.org/editor/

Answer 1

实际上你通过使用OOP关键字从某些构造函数创建一些对象实例来做非常基本的new，我认为你指的是modular pattern但在这种情况下它是＆＃39;设计模式的一个广泛概念，你不是那样做的。这是模块化模式的基本结构：

(function () {
    // All vars and functions are in this scope only
    // still maintains access to all globals
}());

您可以阅读以下内容： 1。 JavaScript Module Pattern: In-Depth。 2。 Learning JavaScript Design Patterns。

Answer 2

这非常适合在开发中组织代码，但对于生产而言，您的网站必须执行如此多的独立GET请求才会受到性能影响：

<script src="../examples/js/controls/EditorControls.js"></script>
<script src="../examples/js/controls/TransformControls.js"></script>
<script src="../examples/js/loaders/BabylonLoader.js"></script>
<script src="../examples/js/loaders/ColladaLoader.js"></script>
<script src="../examples/js/loaders/OBJLoader.js"></script>
<script src="../examples/js/loaders/PLYLoader.js"></script>
<script src="../examples/js/loaders/STLLoader.js"></script>
<script src="../examples/js/loaders/UTF8Loader.js"></script>
etc.

对此的一个解决方案是Browserify，它允许您模块化您的javascript，但将它们全部编译成一个.js文件进行生产。然后在浏览器中，您只需要加载一个脚本而不是几十个脚本。

工作流程方面，您可能需要查看Grunt或Gulp。这些是任务运行程序，而不是可以查看.js文件以进行更改，并自动执行构建步骤。因此，例如，每次对文件进行更改时，browserify任务都将自动运行，您无需在命令行上触发它。

Javascript模块化编程内存/性能用法：好还是坏 - 意见？

2 个答案: