在编写Web应用程序时，有很多技术决策。作者最近回过头来编写现代Web应用程序，想总结一些在开发周期中记录下来的零散想法。这篇文章是关于一组对我最近开发的项目有帮助的框架。作者重温了一些最重要的框架类型，每一种都可以展开写一篇文章。这不是对现有产品的广泛比较，只是作者最近使用的技术的一个子集。 虽然笔者的重点是移动优先，但笔者认为这套技术可以应用于一般的Web应用。作者的决定和数据支持考虑了几个要求： 是基于JavaScript的（CoffeeScript，Dart，绝对值得认真看一下，但我想避免造成激进的选择） 必须在现代浏览器中运行良好（IOS***android4) 选择一个MVC框架 ModelViewController模式已经在原生UI应用程序开发中使用了几十年。基本思想是分离表示层（用户界面、动画、输入）和数据层（存储、通信、数据）。还有其他类似的模式，如MVVM（ModelView的ViewModel），但主要思想是在表示层和数据层之间有一个明确定义的分离，以实现更清晰的代码和长期维护： 有很多JavaScript产品模型视图控制器框架。有些像Backbone.js和Spine.js是用纯代码编写的，而其他像Knockout.js和Angular则依赖于DOM数据属性绑定。那些依赖HTML5数据DOM属性来分离视图和数据的MVC系统被认为是错误的。这不包括Knockout.js和Angular框架。spine.js比CoffeeScript更容易，这被我最初的要求排除了。 backbone.js比大多数框架都更受欢迎（也许JavaScriptMVC除外，它看起来像是一个死项目），并且拥有一个不断壮大的开源社区。对于我的应用程序堆栈，我选择了Backbone.js。有关选择MVC的更多信息，请查看TodoMVC，它使用不同的MVC框架实现相同的Todo应用程序。另请参阅MVC框架的比较，它强烈支持Ember.js，这是一个相对较晚出现的框架。我还没有机会使用它，但它在我的清单上。 选择模板引擎 要在web上构建一个严肃的应用程序，您不可避免地必须构建大型DOM树。如果您使用JavaScriptAPI来操作DOM，那么使用基于字符串的模板编写HTML会更容易、更高效。JS模板已经演变成一种奇怪的约定，将模板的内容嵌入到脚本标签中：.所有模板引擎的基本方法是将模板作为字符串加载，构建模板参数，然后通过模板引擎运行模板和参数。 backbone.js依赖于Underscore.js，它有一个有限的模板引擎和详细的语法。还有其他可供选择，包括jQuery模板、Handlebars.js、Mustache.js等。jQuery团队已经弃用了jQuery模板，所以我没有考虑这个选项。Mustache是一个跨语言模板系统，具有简单和成熟的决策，以支持尽可能少的逻辑。事实上，Mustache中最复杂的构造是迭代对象数组的方法。handlebars.js建立在Mustache之上，添加了一些不错的功能，例如预编译模板和模板表达式。对于笔者来说，这些额外的功能是不需要的，然后选择了笔者的模板平台Mustache.js。 总的来说，作者的印象是现有的模板框架几乎没有可比的功能，所以这个决定很大程度上取决于个人喜好。 选择CSS框架 CSS框架是扩展CSS的基本工具，具有方便的功能集，如变量、创建分层CSS选择器的方法以及一些更高级的功能。这实质上创建了一种新语言：CSS的增强版本（我们称之为CSS++）。为了便于开发，一些框架在浏览器中实现了JavaScriptCSS++解释器，而另一些框架则允许您监视CSS++文件并在发生更改时对其进行编译。所有的CSS框架都应该提供命令行工具将CSS++编译成CSS进行开发。 和模板语言一样，有很多选择。我的选择是由于个人的语法偏好，我更喜欢SCSS，因为它避免了像@weird这样的语法。SCSS的一个缺点是它没有附带JavaScript解释器（有一个非官方的，我还没有尝试过），但是可以使用命令行监视器。还有其他类似的CSS框架，包括LESS和Stylus。 如何布局视图Views HTML5提供了多种布局内容的方式。MVC框架对这些布局技术的使用没有任何要求，这让您对开发人员来说有点困难。 一般来说，文档的相对位置是合适的，但应用程序不是。应该避免绝对定位，比如表格。许多Web开发人员转而使用浮动属性来对齐元素，但这只是构建应用程序的次佳想法，因为它没有类似应用程序的布局，导致许多奇怪的问题和臭名昭著的clearfix黑客攻击。 经过多年对布局和各种网络技术的试验，笔者认为固定定位和flexbox模型的结合是移动互联网应用的理想选择。作者在屏幕上使用界面元素（页眉、侧边栏、页脚等）的固定定位。弹性盒模型非常适合在页面上布置堆叠视图（水平或垂直）。只有CSS盒子模型明显优化了界面设计，很像Android的LinearLayoutmanager。有关flexbox模型的更多信息，请阅读Paul的文章，并注意该规范正在被一个新的、不向后兼容的版本所取代。 AdaptiveWebApplications ***部分，关于这个问题：作者是创建特定于设备的用户界面的强烈倡导者。这意味着为不同的表单屏幕重写部分视图代码。幸运的是，MVC模式使得为多个视图（例如平板电脑和移动设备）重用业务逻辑模型变得相对容易。 iOSFlipboard很好地展示了这个想法，为平板电脑和手机用户提供针对每种设备外形规格的高度定制化体验。移动用户界面特别针对垂直点击进行了优化，允许单手使用。扁平的用户界面非常适合双手向后握住设备。 输入注意事项 移动用户与您的应用程序交互的主要方式是用手指触摸屏幕。这与基于鼠标的交互有很大不同，因为有额外的9个点跟踪屏幕，这意味着编写移动应用程序的开发人员需要放弃移动鼠标事件。此外，移动鼠标事件存在300毫秒的延迟点击问题（触摸有一个众所周知的解决方法）。有关在移动浏览器中使用这些事件的更多信息，请参阅我的触摸事件文章。 只是S/mousedown/touchstart/所有事件处理程序是不够的。用户期望从触摸设备获得一组全新的手势，例如点击和浏览图像列表。虽然Apple有一个鲜为人知的手势API，但没有用于在Web上进行手势检测的开放规范。我们确实需要一个JavaScript手势检测库来处理一些更常见的手势。 如何让它离线工作 对于一个应用程序离线工作，你需要确保两件事是真的： 资产可用（通过AppCache，文件系统API等） 数据是可用（通过LocalStorage、WebSQL、IndexedDB等） 实际上，在网络上构建离线应用程序是一个棘手的问题。一般来说，离线功能应该从一开始就内置到您的应用程序中。在不重写大量代码的情况下，要使现有的Web应用程序离线运行尤其困难。另外，离线技术有各种未知的存储限制，不知道超过限制会发生什么。***，离线技术栈还存在一些技术问题，最突出的是AppCache，正如我在之前的文章中提到的。 编写真正支持离线的应用程序的一种非常有趣的方法是“离线优先”。也就是说，如果没有网络连接，所有数据都会写入本地，当有网络连接时，同步数据同步层。在Backbone.jsMVC模型中，这将非常适合自定义Backbone.sync适配器。 单元测试 单元测试你的用户界面是困难的。但是，由于您使用的是MVC模型，它与UI和数据结果完全隔离，因此可以轻松进行测试。QUnit是一个非常好的选择，特别是因为它允许使用其start()和stop()方法对异步代码进行单元测试。 总结 简而言之，作者使用Backbone.js作为MVC框架，Mustache.js作为模板，SCSS作为CSS框架，CSSFlexbox显示界面视图，自定义触摸事件和QUnit单元测试工具编写作者的移动网络应用程序。离线支持，作者还是尝试使用各种技术，希望以后继续写文章。虽然作者坚信有必要在这里列出每个工具（例如MVC），但我也相信我在这里描述的许多特定技术是可以互换的（例如Handlebars和Mustache）。 还有一件事：2012年1月17日，Thorax宣布。这是一套基于Backbone的开发库，和我在这篇文章中描述的思路非常相似。作者还没有深入研究过，但名字都很棒:) 用的是同一套框架？有你的最爱吗？认为作者缺少一个重要的框架？让作者知道！ 出处：英文原文，中文编译：ITAddiction。
