每个架构师设计架构的时候都应该考虑的几条原则:高性能 High Performance,可扩展 Scalable,可维护 Maintainable。
网站前端的架构也是如此。

可扩展

前端开发也从服务器端开发借鉴了很多东西:比如 MVC 的分层,小内核和模块化。

MVC 的抽象

如果服务器端对 MVC 抽象隔离类似,在浏览器端也可以区分 M-V-C。比如 Backbone 之类的 JS 库。

小内核和模块化

小内核和模块化的设计。
每个模块可以独立存在,多个模块可以并存而不相互依赖和影响(低耦合),模块可以复用。模块直接可以通信调用。
模块化架构的典范就是 Drupal,如果不采用模块化的架构,Drupal 不会发展得如此庞大。

由于前端的特性,考虑到加载文件的大小和数量,一般更应该权衡是否用第三方库。

可维护

协同开发需要有统一的规范,以利于不同人方便的沟通交流。建立 HTML,CSS 和 JS 的 Code Style Guide。
保持 HTML CSS JS 的相互独立。可配置,保持配置文件或者变量与程序的独立。
使用自动化工具: 测试,构建,压缩,部署的自动化。

高性能

浏览器和服务器端的不同在于:所有执行都是单线程的,即任何耗时的执行都会 Block 整个浏览器。
一般 100ms 是用户感觉不到执行延迟的极限,不过推荐控制在 50ms 以内,否则需要给用户等待的反馈信息。

浏览器在下载,解析,执行 内嵌JS文件的时候会 Block 后续的渲染。所以一般吧 JS 文件放在页面的尾部,
或者采用异步加载 JS 文件的方式。