清理一大段 Javascript 代码答案

【问题标题】：Cleaning up a large piece of Javascript code清理一大段 Javascript 代码
【发布时间】：2012-09-28 02:56:51
【问题描述】：

我正在用 Titanium for Android 编写一个应用程序。我在一个 JS 文件中有很多代码。我想知道是否有像php的include这样的函数将代码分成多个文件然后包含它们。

谢谢

【问题讨论】：

你可以加载多个js文件，你甚至可以菊花链调用。但最好在多个文件中编程（为了组织简单），然后在上线时将它们连接在一起。下载一个大文件比下载多个小文件更有优势
你应该看看requirejs.org

标签： javascript android optimization titanium

【解决方案1】：

使用 CommonJS / RequireJS 方法，特别是 require 命令。这是（强烈）推荐的在 Titanium 中处理大型系统的方法，并且在他们的网站上有很好的记录，以及处理特定于 Titanium 的 JavaScript 模块化的许多最佳实践。 Here is the documentation from Titanium on this.

例如，要创建一个封装某种“视图”的模块，请将其放入名为 MyCustomView.js 的文件中，并包含以下内容：

// MyCustomView.js
function MyCustomView(message) {
    var self = Ti.UI.createView({
        backgroundColor : 'red'
    });
    var label = Ti.UI.createLabel({
        text : message,
        top : 15,
        .... // Other initialization
    });

    // ... Other initialization for your custom view, event listeners etc.
    return self;
}

module.exports = MyCustomView;

现在你可以轻松地在另一个类中使用这个模块，假设你把它放在你的 /Resources 文件夹中，让我们在 app.js 中加载模块并将它添加到主窗口。

// app.js
var MyCustomView = require('MyCustomView');
var myView = new MyCustomView('A message!');
Titanium.UI.currentWindow.add(myView);

您可以使用这种方法来制作自定义视图、可重用代码库以及您想要的任何其他内容。另一个常见的事情是拥有一个具有许多不同帮助函数的 Utility 类：

// Utility.js
exports.cleanString = function(string) {
    // Replace evil characters
    var ret = string.replace(/[|&;$%@"<>()+,]/g, "");
    // replace double single quotes
    return ret.replace(/"/g, "''");
}

这个方法可以很容易地像这样使用：

// app.js
var Utility = require('Utility.js');
Ti.API.info(Utility.cleanString('He##o W&orld$'));

我使用它的另一种常见方法是实现Singleton pattern，因为每个加载的模块都是它自己的功能上下文，所以如果你愿意，你可以拥有持久的值：

// ManagerSingleton.js
var SpriteManager = {
   count : 0
};

exports.addSprite = function() {
    SpriteManager.count++;
}

exports.removeSprite = function() {
    SpriteManager.count--;
}

您可以像 Utility 一样加载和使用它：

// app.js
var ManagerSingleton = require('ManagerSingleton');
ManagerSingleton.addSprite();

这是一种更优雅的解决方案，而不是使用全局变量。这些方法绝不是完美的，但它们为我节省了大量时间和挫败感，并为我的 Titanium 代码增加了深度、优雅和可读性，适用于各种大小和类型的应用程序。

【讨论】：

【解决方案2】：

在 Javascript 世界中有两种主要的模块系统。一个是 CommonJS，第二个是 AMD。关于哪一个是最好的以及用于什么目的有很多讨论。 CommonJS 更广泛地用于服务器端 JS，而 AMD 主要用于浏览器 JS。

RequireJS (requirejs.org) 似乎是最流行的 AMD 系统。

有关 JS 模块系统的信息，请阅读此处：http://addyosmani.com/writing-modular-js/

【讨论】：