jQuery 英文原文：How To Write Maintainable jQuery Applications 这年头，你没有一些 jQuery 使用经验还真不敢称自己为 web 开发者。jQuery 在例如浏览器兼容性、ajax 调用、DOM 操作、常用工具上能带来很多的帮助，能够辅助我们这些 “慵懒” 的web开发者更简单地完成常用操作--但是有一件事它也爱莫能助，那便是书写良好可维护的代码。 其它翻译版本 (1) 加载中

不久前（好吧，也许就是是前一阵）我发了篇名为 为何jQuery和“优雅的javascript”是有害的 帖子。

这里的内容可以当做那篇帖子的延伸。

问题

下图是网页程序前端层的结构示意图.

来源：Nicholas C. Zakas 的 Maintainable Javascript 2012  (1)

就像你看到的那样，结构非常简单。然而，你懂的：它没有表面看起来的那么简单。

说起来容易，就像把数据放到HTML里，把动态逻辑放到javascript里，把所有和UI相关的内容放到CSS里，这样就能得到完美的逻辑分离一样。

只是，在实际环境里，这种分离并不像想象中那么完美。假如你把所有的客户端交互都通过jQuery实现一点也不在意，最后你会发现有些代码变得像意大利面条一样一团糟。还有更糟的，jQuery在实际使用中经常与HTML元素结构极度耦合。这使得代码变得极其难以维护、重构和被理解。

我可以只是使用一个精选的时尚的MVC/MV*的Javascript框架吗？

好吧，事实上—如果这是个选项...

那么我告诉你假如你从来没有听说过类似KnockoutJS, BackboneJS, Ember.js,AngularJS, Spine, 以及BatmanJS这样的框架，你真的应该把它们check out下来。它们都是很好的选项。我自已只对 KnockoutJS 和 BackboneJS 有大量的经验（大量的经验是指，就像上面所说的ToDo App的等级）。

我的建议是你从这些框架中check out至少2个框架从而了解不同风格的理念。我自已最常用的是knockout，话虽如此，如果我在RESTful API之上开发web项目，我更想选择Backbone来代替knockout（因为Backone内置对RESTful约定的支持）。

这些框架最大的问题就是它们完全与SEO友好的网页设计（的理念）格格不入（依我看来）。

如果你希望使用上面提到的某一个MV*框架，那么很有可能你不得不使用json格式来传递数据。事实上，你确实应该这么做（使用JSON来保存javascript对象简直是理所当然的不是吗）。 其它翻译版本 (1) 加载中

谷歌对HTML的看法。平淡和简洁。无JSON.

我们的问题如下。 如果您正试图创建一个搜索引擎友好的Web应用程序，大多数情况下你需要以HTML格式显示数据, 而不是用需要被客户端渲染的JSON格式。

因此，我们回到了我们开始的地方。

我们的数据以HTML方式存在。

让我们现在开始假设所有的有趣的MVC javascript框架全部过时了。我们想要开发一个全功能的客户端的web应用程序，其间要保持所有事情都对Google友好以及容量被搜索引擎收录。我们选择了jQuery作为我们这个客户端应用程序的主要工具。

如何使用jQuery开发一个可维护的Javascript应用？

这是个好问题。我准备去证明一种这样的“模式”，这种“模式”已经证实对于我很有效。我将会开发一个假的应用来说明，这个应用有最基本的通信系统行为。比起那种TODO应用，我认为这是一个更加丰富的示例，因为这通常意味着更复杂的用户交互，以及更多的服务端通信，这些通信端通信是需要发生的。

（请忍受一下我的Visio图表-它们做得不好但我想可以有点帮助）

（我的)想法是， 在禁用 javascript 的世界里， 应用程序基本上依然能工作。 注意：如果您禁用了javascript，我同情你 - 这样做主要是为了让Google能很好的“工作” - 不是为了（方便）那些关闭 js（功能）的用户。 虽然它（js）有助于他们取得双赢（的局面）。

稍后我们将讨论更多关于HTML看起来应该长成什么样，但是首先让我们看看应用程序的基本结构：

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务