构建单页web app的原则
Single page app是指类似gmail一样的在单个网页上无跳转实现各种网络操作的网页应用。HTML5的兴起也让构建此类单页应用变得更加简便。但目前国内在这方面的积累很少,除了百度和腾讯有个别团队已经有成形的产品外,很少有得到广泛应用的单页app出现。不过作为未来的一个趋势,这是值得我们好好积累的。这里把构建单页app的几个重要经验列出来供大家分享。当然,关键还是在实践,如果实践过后再细品这些原则,会有醍醐灌顶的感觉。如果是正在设计单页app,这些原则也会给你很大的启发。
- DOM是只写的。程序输出HTML,在elements上操作,但是没有任何东西从DOM读出。在DOM上保存状态是很难被快速操作的。更好的方式是,在一个地方存放数据,然后依据这些数据去渲染UI,特别是当有些数据必须在多个UI上显示时。
- 模型是唯一可信的源。作为在DOM上或在随即的对象上存储数据的替代,需要有一套内存里的模型来代表程序所有的状态和数据。
- 表现层监听模型的变化。表现层应该反映模型。需要有一个事件系统通过它表现层接收来自模型的改变同时重绘它们自己。
- 将模型解耦然后只暴露很小一部分到外部。做为设置全局变量的替代,我们应该试着创建小型的不相互依赖的子系统。模块间的相互依赖让代码难以测试。只暴露一小部分外部接口让内部重构变得非常简单,因为很多地方可以随意改变,只要保证对外的接口保持一致即可。
- 让依赖DOM的Code最小化。为什么?任何依赖DOM的代码都需要做浏览器兼容性测试。为了把这些恼人的事情隔离开,我们应当在一个极其有限的范围内测试浏览器兼容性。这种最小化的工作也能够让我们的兼容性测试更加可控。不兼容性发生在DOM操作时,而不是JavaScript的实现,所以最小化以及隔离依赖DOM的代码是合理的。