目录

为什么要使用前端框架来构建页面

因为提高开发效率,对于企业来说,时间就是效率,效率就是钱。在没有前端框架之前,我们前端需要经常的操作DOM元素;在项目中,vue能够简化DOM操作,让程序员根本不用操作任何DOM元素,就能渲染页面。

一、要使用前端框架来构建页面的原因

因为提高开发效率,对于企业来说,时间就是效率,效率就是钱。

  • 在没有前端框架之前,我们前端需要经常的操作DOM元素;
  • 在项目中,vue能够简化DOM操作,让程序员根本不用操作任何DOM元素,就能渲染 页面;
  • 企业中,使用框架,能够提高开发的效率;
  • 提高开发效率的发展历程:原生JS -> Jquery之类的类库-> 前端模板引擎->Angular.js/Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了】)
  • 在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;
  • 增强自己就业时候的竞争力
    • 基础
    • JS基本功,JS高级,PHP,Jquery,H5C3+移动Web
    • 提高
    • Nodejs,前端三大框架,React-Native(使用前端的技术HTML+CSS+JS,去开发手机App)

延伸阅读:

二、前端框架到底解决了什么问题

框架其实就解决了一个问题——使用声明式语法,描述组件对象的嵌套关系,并自动生成与dom对象的对应关系。

自己敲过框架轮子的人一定明白我在说什么——你在自己写框架的时候,最难处理的不是数据驱动,observable库有的是,也不是事件监听,那玩意儿jquery已经做的很好了,更不是模板语法,谁还写不出个模板转render的函数?真正有点麻烦的问题是:

  • dom对象以及他们的从属(同时是传递关系)关系,是通过html自动生成的,然而当你把“组件”抽象为js对象,你怎么能实现子组件的自动创建,自动销毁,自动数据传递,自动render,自动事件监听(不一定是dom事件)?
  • 怎么把js组件对象存在它应该在的地方(我的标题图截得是preact源码解决这个问题的部分,preact的子组件实例,是存在dom节点上的),并且rerender的时候能把js组件对象和dom节点对应起来?
  • 什么时候需要new,什么时候复用原来的组件?
  • 组件重渲染之后,怎么commit到dom上?

这套机制,才是前端框架真正替你省力的“脏活”,因为不如此,你的组件根本集成不起来,“组件化开发”、“数据驱动”也就无从谈起。至于框架对外提供的那些特性和语法糖,其实都见仁见智,有人喜欢有人不喜欢。但是我前面说的那些脏活,才是一个框架之所以是一个框架的理由。

关于这套机制,类angular框架和类react框架分别讲了两个故事——

  • angular讲的故事是“模板编译为能精细感知model变化事件的dom-commiter”。
  • react讲的故事是“model怎么变不重要,我只要model当前状态,我有办法给你patch到dom上”。

表面上看起来是很不一样的,但是本质上都是做同一件事——你在模板里面也好,jsx里面也好,使用组件时写的的都是组件的类型,然而实际render的时候,框架帮你自动创建了组件实例。第二次render的时候,框架又帮你做了两件事,名列前茅件事是,帮你找到应被复用的组件实例,指挥他重新render一遍,第二件事是,帮你把render的结果commit到正确dom节点上。