江苏龙网

  1. 主页 > 生活百科 > >

框架是什么(前端框架是什么)

作者:神说要有光来源:神说要有光 。
最早的时候 ， 页面是由服务器渲染的 ， 也就是PHP和JSP技术 。服务器通过模板引擎填充数据 ， 返回生成的html ， 交给浏览器渲染 。届时 ， 表单将同步提交 ， 服务器将返回结果页面的html 。
后来有了ajax技术 ， 浏览器可以异步请求 ， 服务器返回xml或者json 。Ajax最初是基于xml的 ， 这也是它名字的由来 。因为xml有很多不必要的标签 ， 内容更多 ， 所以后来json流行起来 。
与web服务器的数据交互变成了异步 ， 服务器可以返回json数据 ， 在浏览器中拼接html ， 然后渲染(在浏览器中生成dom相当于渲染) 。基本不需要刷新页面 ， 于是后来逐渐演变成了单页应用SPA(single page application) 。
在早期页面开发的时候 ， 基于浏览器的dom api使用dom进行渲染和交互 ， 但是dom api比较啰嗦 ， 浏览器的兼容性问题在当时也比较麻烦 ， 不同的浏览器有不同的编写方式 。为了简化dom操作 ， 更方便的兼容各种浏览器 ， jquery出现并迅速流行 。当时jquery正如火如荼 。
我一直习惯把网页分为物理层和逻辑层 。就算dom是物理层 ， jquery是一系列操作dom的工具函数 ， 也是在物理层工作的 。
网页基本做的就是获取数据渲染dom ， 数据变化后更新dom 。这个过程是普遍的 。后来逐渐出现了mvvm框架 ， 自动将数据变化映射到dom ， 不再需要手动操作dom 。也就是vue ， react等现代前端框架 。我称这一层为逻辑层 。
前端框架不仅提供了数据驱动视图变化的功能 ， 还支持dom的逻辑划分 ， 可以将dom的一部分封装成组件 ， 组件和组件可以组合起来形成整个接口 。物理层还是dom ， 但是实现了数据到dom的自动映射之后 ， 我们只需要在逻辑层写组件就可以了 。
现在前端介绍不会学习dom的jquery ， 是物理层的操作 ， 而是直接从vue、react等逻辑层的前端框架开始 。
但并不意味着完全不需要jquery 。前端框架主要解决数据与dom的绑定 ， 可以在发生变化后自动更新dom 。如果不需要更新 ， 那么可以直接操作dom ， 比如各种活动页面 ， 没有数据更新 。用jquery操作dom还是很方便的 。
前端框架是UI = f(state)的声明式思路 ， 只需要声明组件的视图、组件的状态数据以及组件之间的依赖关系 ， 然后当状态发生变化时会自动更新dom 。直接操作dom的工具库Jquery势在必行 。
对于视图的描述 ， react和vue使用不同的方案 。react为js扩展了jsX语法 ， 由babel实现 。描述视图时 ， 可以直接用JS写逻辑 。没有什么新的语法 。Vue是实现一组模板的DSL 。它引入了插值、指令、过滤等模板语法 ， 比jsx简单 。模板的编译器由vue实现 。
Vue模板是有限制的 ， 只能访问数据、道具和方法 ， 可以静态分析和优化 。但是react的jsx因为直接是js的语法 ， 有很多动态逻辑 ， 所以无法进行静态分析和优化 。
但是vue模板也不全是好的 ， 因为它脱离了js上下文 ， 很难引入typescript进行类型派生 。有必要分别声明所有类型的属性、方法和数据 。尽管react的jsx最初与js处于相同的上下文中 ， 但很自然地会将typescript结合在一起 。
所以vue模板和reactijsx各有利弊 。
前端框架是数据驱动的视图变化 ， 这些数据分散在各个组件中 。数据变更后如何更新dom？
基本上只有三种方法可以检测数据的变化:观察、脏检查和不检查 。
Vue是一款基于数据的手表 。在组件级 ， 通过Object.defineProperty监控对象属性的变化 ， 重写数组的api监控数组元素的变化 ， 然后更新dom 。
Angular基于脏检查 ， 在每个可能改变数据的逻辑之后比较数据是否已经改变 ， 如果已经改变则更新dom 。
React的意思是不检查 ， 不检查 。每次都渲染所有dom吗？不会 ， 不检查是因为没有直接渲染成dom ， 而是中间加了一层虚拟dom ， 每次都渲染成这个虚拟dom ， 然后看diff下渲染的虚拟dom有没有变化 ， 如果有 ， 更新对应的dom 。
这就是前端框架的数据驱动视图变化的三个思路 。


推荐阅读


上一篇：成本是什么(如何计算成本)

下一篇：结肠是什么(结肠是干嘛的)