Mon, Jan 1, 0001

前端架构层级

随着Web规范和标准逐步的完善，前端已经渐渐步入工业化生产的阶段。从jQuery到Backbone，然后到Angular.js再到15年炒得火热的React，前端越来越重视开发模式以及相应的架构。同时也可以注意到，从jQuery的工具式开发到Backbone和Angular.js的全局框架，再到React的视图层框架，前端框架愈发专注解决于某一个层面的问题，而不是试图提供耦合较深的全局解决方案。15年Facebook提供了React视图框架，Flux数据流处理思想以及GraphQL接口层解决方案，分别处理各自领域存在的痛点问题。所以，我在这里将前端架构分为视图(view)、数据(data)、接口(api)和缓存(cache)这四个层级，这四个层级各自独立，支持热插拔，都可以采用最适宜的框架，只需通过彼此间的组合，便可提供一个完备的前端开发架构。

视图(view)

视图层级关注焦点是数据的展示，主要载体便是HTML。视图层级主要存在的问题是数据和展示如何保持同步更新以及如何更高效地更新，目前大火的React和Vue.js便是为解决这些痛点而出现的。React是通过单向响应的数据流来驱动界面更新，但是每一次的更新都要手动触发，较为繁琐，Vue.js则是利用Angular.js的双向绑定思想，数据的每一次改变都会同步触发界面的更新，同时界面的事件也会即时影响到数据的更新，虽然省略了更新步骤，但是同时也带来了数据状态不可控的问题。两者解决之道，看项目所需，我推崇应用型的项目采用React单向更新方式，整体状态更易把控，展示型项目采用vue.js的双向绑定更新方式，状态不多，操作更为方便。

数据(data)

数据层级关注焦点是数据以及状态的保存和更新。随着Web应用愈发庞大，如何管理之间错综复杂的数据和状态，这成了目前亟待解决的问题。伴随着React出现的Flux单向数据流解决思想，为数据管理提供了一个可行的解决方案。redux是目前Flux化最成功的数据层框架，采用单一数据源、state只读属性以及纯函数执行修改state tree三大原则，理清了状态依赖等问题，目前我最推崇采用此种框架解决状态管理问题。当然，展示型项目，涉及到状态更新不多，自己实现简单可用的状态管理器也是可行的。

接口(api)

接口层关注的则是初始数据的是如何获取的。这一层在Ajax技术大行其道时，可以说就已经存在了，只不过之前没太过于关注。随着fetch接口的出现以及二进制流的需要，同时伴随后端API的服务化，接口层也需要作为架构的一层来进行管理。目前接口层提出的解决方案较少，比较知名的就是伴随React出现的GraphQL解决方案，但是目前存在服务端得配合改造问题，同时调用方式也比较繁琐，除了在大型项目中可以采用此种解决方案，中小型项目还是将Ajax或者fetch作为这一层解决工具，简单方便。

缓存(cahce)

缓存层关注的焦点是数据和状态的缓存。为了提供更好的体验，以及减少服务端API的流量压力，将一些数据进行缓存是合适的可行之道。目前数据缓存方式有localStorage、sessionStorage、cookie以及内存存储。目前开源项目中也主要是提供简化操作这几种缓存方式的类库，还未发现有缓存一层的最佳管理的方案。期望有这样一种缓存层框架，提供智能化选择缓存方式，缓存过期自动化清理，缓存状态自动恢复等功能。目前项目中建议根据具体业务需求，将操作缓存类库再进行封装，以便更好地定制。我这边也根据自己所需，开源了一个接口层和缓存层结合的类库，详情请查看ajax-cache。