Javascript模块化编程内存/性能使用：好还是坏——意见？答案

【问题标题】：Javascript Modularized programming memory/ performance usage: good or bad -- opinions?Javascript模块化编程内存/性能使用：好还是坏——意见？
【发布时间】：2014-06-19 18:00:29
【问题描述】：

我相信我正在做的事情被称为“模块化”(??)。刚学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：如果您想查看 现场示例（我从中复制此格式）（这是我的第一个 JS 项目），并查看它是否正常工作，请查看：http://threejs.org/editor/

【问题讨论】：

标签： javascript memory optimization modular

【解决方案1】：

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

(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.

【讨论】：

【解决方案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 任务都会自动运行，您不必在命令行上触发它。

【讨论】：