这是一个简单的示例，演示一个段落(p)的内容随着输入框(input[type="text"])内容的改变而变。输入框中的内容可能因两个因素改变：

• 用户输入
• 服务器数据更新

示例的原理就是监听输入框的内容，如果输入框内容发生改变，那么对应更新段落对应的内容。

下载Demo文件

使用jQuery来实现

监听输入框的内容以及改变对应段落的内容之前，需要先获取他们的DOM引用，所以在HTML设定ID或者Class作为钩子。将HTML结构设定为：

<div>
    <input id="customGreetingText" type="text" />
    <p>
        <span id="greetingText">Hello</span>, World!
    </p>
    <button id="updateGreetingText">Update</button>
</div>

...

<script src="../jquery.js"></script>

上述代码中，定义了一个id为customGreetingText的input元素、一个id为greetingText的span元素以及id为updateGreetingText的按钮。

还在使用老掉牙的U盘搬运代码（文件）的方式，从一台机器上复制后，粘贴到另一台机器上？太Out了。使用Github 倒是一个非常不错的替代方法。但无论是基于什么理由都有可能不想把代码公开（毕竟Github免费账户是无法建立Private Repository）。建立Private Repository？Bitbucket免费账户同样有私有的仓库。不过，在云概念满天飞的时代，免费网盘满大街随手都可以捡到一个。为何不能使用网盘来保存Git项目文件？

网盘选择

对于网盘的要求无非是免费、量大（免费还要量大？用户真是太苛刻了）以及安全可靠。首推的当然是口碑极佳的Dropbox，但由于某些原因导致Dropbox的客户端下载有些技术难度，庆幸的是同步没有问题，但与国内网盘相比速度上可能稍差。另外一个不错的选择是Google Drive，免费15G，可靠性有保证。除此之外，理论上只要支持以「.」开头的文件的网盘都可以用来同步Git项目。

具体设定

做法分为三步：初始化本地Git仓库；在网盘中新建一个空的Git仓库；设定网盘中的Git仓库为远程仓库。具体操作步骤如下：

原文：Immediately-Invoked Function Expression (IIFE)
作者：”Cowboy” Ben Alman

或许你没有注意到，我是一个对术语比较在意的人。所以，在听到许多次 JavaScript「自执行匿名函数」（self-executing anonymous function）或者「自调用匿名函数」（self-invoked anonymous function）这两个流行但令人误解的术语，我觉得得将我的想法写下来。

本文实际上除了提供详细关于这个模式的原理之外，还推荐了我们之后如何称呼这个模式。当然，你可以跳过关于这个推荐的内容，直接查看「立即执行函数表达式」的例子，但是我建议你完整地阅读本文。

请注意，本文并非是那种「我就是正确的，而你是错误」的论调。我真诚的希望帮助人们了解潜在的复杂的概念，并且深感使用一致并且精确的术语是一种非常有效的促进人们相互理解的方法。

在《测试驱动的JavaScript开发》一书第四章中提到「从测试中学习」，这是一个很值得推荐的学习方式。如果是为自己的应用代码设计断言编写测试，可以让我们在动手写代码之前清楚我们到底需要做什么，并且之后的重构可以有保证的进行；如果是为他人的应用代码设计断言编写测试，那将是很好的机会去学习他人的代码编写方式。

比如学习流行的 JavaScript 库的代码（例如 underscore.js ）的时候可以采用这种方法。为 underscore.js 的函数编写测试，让测试通过，然后再自己着手编写函数，再进行测试；然后再比对 underscore.js 里函数的实现。此方法一方面可以练习编程能力，同时可以学习流行库里久经考验的写法。

继上文「Qunit快速上手」之后，本文将展示一次测试驱动开发实践：实现一个复制字符串本身的函数。采用的单元测试工具是 QUnit。

测试驱动开发遵循四个迭代步骤：

1. 编写测试代码
2. 运行测试，观察测试失败
3. 使测试通过
4. 重构

步骤一、测试驱动，先编写测试

JavaScript 字符串类（String）并未提供一个复制字符串本身的方法。我们要实现的是复制字符串本身，即函数应该可以将 "abcd" 复制成 n * "abcd"，其中 n 代表要复制的次数。从代码的角度来看就是：

1

"abcd".duplicate(2); // "abcdabcd"

同时，当 n 的值小于等于 1 时，仅返还字符串本身。

1

"abcd".duplicate(0); // "abcd"

原文：Using Objects to Organize Your Code

本文是JSMag 2009年3月刊的一篇文章的改进版。

当你写过基于jQuery的代码应用片段后，开始着手开发交互更加复杂的应用时，你会发现代码很快变得杂乱并且难于调试。本文将展示如何使用对象字面量模式，依据功能行为来开发更加复杂的交互。

在过去的几年里，JavaScript库让了初级开发者可以快速在他们的站点做出精细的交互。一些库，比如jQuery，拥有非常简单的语法，让零经验的开发者也能够快速的做出花哨的页面。这些花哨的特效，其中不乏精细之作，大多数实现只要在Google上花些时间就能找到。复制粘贴，使用一个插件再加上一些自定义代码，组成的页面看起来就很不错，然后就可以在简历上将jQuery加入技能之列。

但是，需求总在不断改变。之前实现的代码现在需要在三个元素或者是个元素上应用；之前的代码需要在另外一个仅有一些轻微不同（比如ID不同）的应用上重用……我们已经看到那些可以复制粘贴实现花哨功能的代码片段让jQuery（以及其他JavaScript库）看起来十分易用。但这些代码片段之外（这些代码片段仅仅是代码片段，对吧？），你还需要去设计组织你的代码当你需要的不仅仅是引用一个插件或者做一些show()/hide()。

对象字面量模式

对象字面量模式可以根据功能组成来组织代码。同时，这个模式可以保证代码不会「污染全局命名空间」，不污染全局命名空间被认为是适用于所有项目，特别在大型项目中的一个最佳实践。这个模式强迫你在着手编写代码之前思考代码将做什么以及怎么做。对象字面量模式可以封装所有相关的行为，如下代码所示：