32、JavaScript 方法链与库的使用与管理

JavaScript 方法链与库的使用与管理

1. 方法链的奥秘

方法链是 JavaScript 中一种强大的编程技术，其关键在于在方法的末尾返回对象的引用。例如，在下面的 changeAuthor 方法中：

this.changeAuthor = function(newAuthor) {
    this.replaceAuthor(newAuthor);
    return this;
}

return this 这一行返回了对象引用，使得可以继续调用该对象的其他方法，形成链式调用。

方法链在 DOM 方法中被广泛使用，像这样的代码：

var result = str.replace(/</g, '&lt;').replace(/>/g, '&gt;');

jQuery 库也大量使用了方法链，下面是一个示例：

$(document).ready(function() {
    $("#orderedlist").find("li").each(function(i) {
        $(this).append(" BAM! " + i);
    });
});

在 jQuery 的开发版本中， return this 几乎遍布所有方法。例如， setArray 方法：

setArray: function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
}

2. JavaScript 库的魅力与必要性

如今，有许多优秀的 JavaScript 框架库，如 Dojo、Ample SDK、Prototype 和 jQuery 等。使用这些库可以解决很多 JavaScript 开发中繁琐的问题，比如跨浏览器兼容性和创建 XMLHttpRequest 对象等问题。

然而，理解 JavaScript 的基础知识仍然很重要。就像 Isaac Asimov 的短篇小说《The Feeling of Power》中所表达的，未来人们过度依赖机器进行计算，忘记了基本的数学运算。在 JavaScript 开发中，我们也不应过度依赖框架库，而忽略了对 JavaScript 底层的理解。

以下是一些常见 JavaScript 框架库的访问地址：
| 框架库 | 访问地址 |
| ---- | ---- |
| Ample SDK | http://www.amplesdk.com/ |
| Prototype.js | http://www.prototypejs.org/ |
| Dojo Toolkit | http://www.dojotoolkit.org/ |
| MooTools | 轻量级框架 |

3. 代码的打包技巧

如果你想将代码打包成一个或多个 JavaScript 文件，可以采取以下操作：
- 提取可复用功能 ：如果代码在一个大文件中，寻找机会将可复用的功能提取到独立的库中，封装成自包含的对象。
- 使用对象字面量 ：将重复使用的函数通过对象字面量进行封装。例如，将以下函数：

function getElem(identifier) {
    return document.getElementById(identifier);
}
function stripslashes(str) {
    return str.replace(/\\/g, '');
}
function removeAngleBrackets(str) {
    return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

转换为：

var jscbObject = {
    getElem: function(identifier) {
        return document.getElementById(identifier);
    },
    stripslashes: function(str) {
        return str.replace(/\\/g, '');
    },
    removeAngleBrackets: function(str) {
        return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }
};

这样做不仅减少了全局空间的混乱，还能避免与其他库中相似函数名的冲突。

同时，对于一些复杂的代码，如获取元素样式的代码：

var style;
var elem = div.getElementById("elem");
if (elem.currentStyle) {
    style = elem.currentStyle["width"];
} else if (document.defaultView && document.defaultView.getComputedStyle) {
    style = document.defaultView.getComputedStyle(elem, null).getPropertyValue("width");
}

可以将其模块化，提取到一个可复用的函数中，最终成为库对象字面量的新成员：

var BBObjLibrary = {
    getStyle: function(obj, styleName) {
        if (obj.currentStyle)
            return obj.currentStyle[styleName];
        else if (document.defaultView && document.defaultView.getComputedStyle)
            return document.defaultView.getComputedStyle(obj, null).getPropertyValue(styleName);
        return undefined;
    }
};

在拆分代码为可复用对象库时，还应考虑将代码模块化成不同的功能层。例如，有一个 bb.js 库提供基本功能，如事件处理、访问通用样式元素和处理键盘事件等； mtwimg.js 库用于处理网页中的图像，它基于 bb.js 构建； accordion.js 库用于创建自动手风琴小部件，同样基于 bb.js 构建。这样做不仅减少了代码重复，还便于后续的重构。

最后，记得为代码添加文档注释，提供非压缩、注释良好的版本，方便他人学习。

4. 使用 JsUnit 进行代码测试

在创建好 JavaScript 对象后，需要对代码进行全面测试。可以使用 JsUnit 工具创建测试用例来正式测试库。

例如，对于一个 addAndRound 方法：

function addAndRound(value1, value2) {
    return Math.round(value1 + value2);
}

对应的 JsUnit 测试用例如下：

function testAddAndRound() {
    assertEquals("checking valid", 6, addAndRound(3.55, 2.33));
    assertNaN("checking NaN", addAndRound("three", "Four and a quarter"));
}

单元测试的一个好经验法则是，库函数或对象方法的每个需求或用例都应该有对应的测试用例。使用 JsUnit 可以简化测试编写过程。

以下是 JsUnit 的使用步骤：
1. 从 http://www.jsunit.net/ 下载 JsUnit，它是 JUnit 测试软件的 JavaScript 实现。
2. 将 JsUnit 文件夹解压并安装到应用的测试文件夹中。
3. 创建测试应用页面，在页面中链接 JsUnit 引擎和自己的库：

<script type="text/javascript" src="app/jsUnitCore.js"></script>
<script type="text/javascript" src="lib/myLibrary.js"></script>

4. 使用 JsUnit 方法编写测试函数，函数名以 test 开头且无参数。
5. JsUnit 提供了多种断言方法，如：
   • assert([comment], booleanValue) ：测试函数是否返回布尔值。
   • assertTrue([comment], booleanValue) ：测试是否返回 true 。
   • assertFalse([comment], booleanValue) ：测试是否返回 false 。
   • assertEquals([comment], value1, value2) ：测试返回结果或变量是否相等。
   • assertsNotEquals([comment], value1, value2) ：测试返回结果或变量与另一个值是否不相等。
   • assertNull([comment], value) ：测试是否为 null 值或返回。
   • assertNotNull([comment], value) ：测试是否为非 null 值或返回。
6. JsUnit 还支持 setUp 和 tearDown 函数，分别在测试开始前和结束后调用。此外，还有提供跟踪消息的函数：
   • warn(message, [value]) ：警告消息，可选值。
   • inform(message, [value]) ：信息消息，可选值。
   • debug(message, [value]) ：调试信息，可选值。
7. 在 testRunner.html 页面中运行测试。如果测试失败，错误会显示在测试进度条下方，双击测试可查看失败信息。

以下是一个简单的 JavaScript 对象及其对应的 JsUnit 测试页面示例：

// 简单的 JavaScript 对象
var BBTest = {
    concatWithSpace: function(string1, string2) {
        return string1 + " " + string2;
    },
    discoverNumber: function(string, number) {
        return string.indexOf(number);
    },
    divideNumbers: function(value1, value2) {
        return value1 / value2;
    },
    addAndRound: function(value1, value2) {
        return Math.round(value1 + value2);
    }
}

// JsUnit 测试页面
<!DOCTYPE html>
<head>
    <title>Testing Library</title>
    <script src="jsunit/app/jsUnitCore.js"></script>
    <script src="test.js"></script>
    <script>
        function testConcatWithSpace() {
            inform("Testing concatWithSpace");
            assertEquals("Checking equality", "Shelley Powers", BBTest.concatWithSpace("Shelley", "Powers"));
        }
        function testDiscoverNumber() {
            inform("Testing discoverNumber");
            assertEquals("Checking valid params", 5, BBTest.discoverNumber("found5value", 5));
        }
        function testDivideNumbers() {
            inform("Testing divideNumbers");
            assertNaN("Checking numeric ops with no numbers", BBTest.divideNumbers("five", "2"));
            assertNotEquals("Checking not equals", "5", BBTest.divideNumbers(10, 2));
        }
        function testAddAndRound() {
            inform("Testing addAndRound");
            assertNaN("Checking NaN", BBTest.addAndRound("four", "Three Quarter"));
            assertEquals("Checking correct values", 6, BBTest.addAndRound(2.33, 3.45));
        }
    </script>
</head>
<body>
    <p>Running tests of test.js. View source to see tests.</p>
</body>

JsUnit 可以手动管理，也可以集成到自动化测试环境中，如与 Apache Ant 集成。

5. 库的压缩优化

在优化并彻底测试库代码后，为了更广泛地分发代码，需要对其进行压缩。可以使用 JavaScript 优化器来压缩代码，使文件变小，加载速度更快。

JavaScript 压缩可以通过在线的 minify 应用程序来完成，例如著名的由 Dean Edwards 创建的 JavaScript Compressor。以下是压缩库代码的操作步骤：
1. 确保你的库代码已经过优化，并且通过单元测试。
2. 在网上搜索“compress JavaScript”或“JavaScript minify”，可以找到各种 JavaScript 压缩工具。
3. 使用 Dean Edwards 的 JavaScript 压缩工具，可访问其官网 http://javascriptcompressor.com/ 进行压缩操作。

6. 库的开源托管

如果你想将代码开源，但又不想在自己的服务器上维护库，可以使用开源代码托管平台。

6.1 Google Code

Google Code 是一个开源代码托管平台，它提供了简单的用户界面来启动新项目并上传代码。具体操作步骤如下：
1. 访问 Google Code 平台，注册账号。
2. 点击创建新项目，填写项目相关信息。
3. 选择版本控制系统（Subversion 或 Mercurial）和开源许可证。
4. 上传你的代码到项目中。
5. 在项目的 wiki 组件中提供文档说明。
6. 利用平台的 issue - tracking 软件让用户提交 bug。
7. 提供下载链接和源代码链接。

例如，SVG - enabling 软件 SVGWeb 就托管在 Google Code 上，该平台提供了项目的各种支持页面，如 Wiki、Downloads、Issues、Source 等，且托管应用程序是免费的。

6.2 github

github 也是一个受欢迎的开源项目托管平台。对于开源且公开可用的项目，免费账户基本能满足需求，但如果需要进行私有协作，则需要付费。

以下是使用 github 托管项目的步骤：
1. 访问 github 网站，注册账号。
2. 创建新的仓库，填写仓库信息。
3. 将本地代码推送到 github 仓库。可以使用以下命令：

git init
git add .
git commit -m "Initial commit"
git remote add origin <repository_url>
git push -u origin master

4. github 支持代码控制和多人协作，提供 issue 记录、下载、wiki 支持页面以及展示语言支持、使用情况等的图形页面。例如，流行的 jQuery 库就托管在 github 上。

不过，曾经流行的 Source Forge 由于对某些国家的访问限制，已经不受很多开源开发者的青睐。

7. 基于 jQuery 框架构建特定库

如果你想创建特定于应用程序的库，而又不想从头创建自己的可复用例程库，可以使用现有的 JavaScript 框架库，如 Prototype、Dojo 或 jQuery。这里主要介绍 jQuery 的使用。

7.1 下载与引入 jQuery

从 http://jquery.com/ 下载 jQuery，你可以获取到压缩版和未压缩的开发版。在使用时，需要在引入自己的库或其他二级库之前引入 jQuery 库：

<script type="text/javascript" src="jquery.js"></script>

有些特定应用程序库可能会自带 jQuery，你可以先检查一下。

7.2 jQuery 的 ready 事件

jQuery 的脚本起始点与本书中大多数示例不同，它不是 window.onload ，而是 ready 事件。 ready 事件会等待 DOM 元素加载完成，但不会等待图像或其他媒体加载完成。示例代码如下：

$(document).ready(function() {
    // 这里编写你的代码
});

7.3 jQuery 的选择器

在 jQuery 中，美元符号 $ 是对主 jQuery 类的引用，用于选择页面元素。使用 jQuery 选择器而不是自己编写元素访问代码，因为它自带了 jQuery 成功运行所需的预封装功能。其选择器语法与 querySelector 和 querySelectorAll 方法类似，基于 CSS 选择器语法。例如：

// 选择 id 为 divOne 的元素
$("#divOne").css("color", "red");

以下是一个简单的 jQuery 操作流程图：

graph LR
    A[引入 jQuery 库] --> B[等待 DOM 加载完成（ready 事件）]
    B --> C[使用 $ 选择器选择元素]
    C --> D[对选择的元素进行操作]

综上所述，JavaScript 的方法链、库的使用、管理、测试、压缩、托管以及基于框架构建特定库等技术，为开发者提供了强大的工具和便捷的开发方式。通过合理运用这些技术，能够提高开发效率，降低开发成本，同时也便于代码的维护和扩展。