现代前端框架技术思想

参考文章：https://mp.weixin.qq.com/s/CYbvej4Xx7ZlsiQxaKkukQ

前端框架是如何进行抽象的？

自从Ajax出现以下，前端终于可以自成体系的独立开发部署了。前端通过ajax请求获取到数据后，可以有能力自行维护数据，并通过DOM操作来展示数据。处理用户操作所触发的DOM事件，对数据进行一定处理后与服务器进行同步，同时更新局部内容或借助前端路由进行页面跳转，而不用刷新页面。自此前端有能力跟后端完全分离，也就是我们常说的SPA。

前端在这个阶段主要做的事情有：控制页面渲染、编写模板和样式、通过DOM操作渲染初始数据、处理DOM事件控制组件样式、数据变更后通过DOM操作更新局部页面内容、维护本地内存中的数据、发送请求与服务器同步数据、数据加工适配和校对、更新用户操作时对应的数据。

前端开发者拥有所有底层能力，写代码时可以为所欲为，但开发者的水平参差不齐，给系统的稳定性和可维护性带来了巨大的挑战。同时，需求与生产力越发的不匹配，变革的诉求越来越强。

前端技术在2010年前后发展迅猛，2013年React诞生，提出了基于单向数据流的Flux架构后，前端技术大方向基本定型，接下来的技术发展基本是在原有方向上不断的优化和完善。

抽象来说，前端所做的事情有两个，而现代前端框架技术也是围绕这两点不断进化的：1.将数据和变化后的数据渲染成UI,保持同步。2.维护本地数据并和服务器数据保持同步。

现代前端框架将页面渲染的能力抽象和封装起来，开发者只需要按照文档配置好模板即可，现代框架会自行将初始数据渲染成页面。如果数据有变更，现代框架也提供能力渲染页面保持与数据的同步。

将页面渲染能力封装出来以后，就可以关注这一块不断进行优化。一方面提升性能，虚拟DOM和Diff算法尝试最大程度降低DOM操作从而提升渲染性能。另一方面改善开发体验，组件化思想基于此得到广泛认可并不断发展。

总结：现代前端框架技术的发展正是抽象和分层思想的实践。将前端问题分为数据状态的管理和页面渲染能力分别封装。关注分离、松散耦合便可以分别针对性的优化，改善开发体验。封装好解决方案之后，前端开发者就可以忽略其底层实现细节，把精力放在业务逻辑上。