实用的架构思路

架构的目的：

满足产品质量和交付， 团队快速协作(根据技术水平)，性能最优化。

构建思路（技术选型→协作开发→优化）：

1.        第一阶段：库/框架选型

库(lib)特点：专业性、被动调用、不控制流程；

框架(frameword)：集成了多个库、控制程序生命周期、控制流程；

库或框架作用：高效率、兼容性、设计的合理性。

解决的痛点：DOM、通信、模板、路由、架构

         DOM:  jQuery、zepto.js 、手势Hammer.js、局部滚动iscroll.js、视频Video.js

         通信： jQuery、socket.io(支持二进制、后台多语言支持)

         模板：artTemplate、dustjs

         路由： page.JS(类似Express.Router 的路由规则的前端路由库)

                   机理：监听URL变化→js切换跳转→历史管理

         实现：location.hash +hashchange事件

                                     history.pushState(null,null,新路径) +popstate事件（H5的api,有历史记录）

         架构：MVC、MVVM、MV*，也是流行框架的设计思想，目的是解耦（通过事件、分层等实现,提供范式进行模块解耦、视图和模型分离、扩展性。

 

2.        第二阶段：JS/CSS模块化&组件化开发（团队协作、分而治之）

模块化方案：AMD、commonJS、ES6 module；

组件化开发：用html+css+js构成具有独立视图和功能的文件包，拿来即用。

3.        第三阶段：优化（高性能）

大体上有缓存控制、按需加载(懒加载)、同步/异步加载、移动端首屏CSS内嵌、图片Base64编码这些啦，在脚手架配置的同时，协作人员再共同遵守；

①  减少HTTP请求（图片Base64编码、合并JS和CSS）

②  添加Expires或Cache-control头（设置文件缓存）

③  CSS文件顶部引入（避免无样式闪烁、白屏）

④  JS文件底部引入（避免阻塞，优先DOM渲染）

⑤  三层分离（方便扩展维护，代码重用）

⑥  压缩文件（精简减小体积）

⑦  避免重定向

⑧  静态资源管理---前后端配合管理