前端发展历史和现主流框架对比.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,.,*,前端发展历史和现主流框架对比,制作人：郑锦鹏,2017/12/16,1,.,目录,Contents,发展历史,历史,前后端分离,html5,前端自动化,jq,与框架,jquery,框架,对比,前端框架,angular,react,vue,对比,框架原理,angular,react+redux+mobx,vue+vuex,2,.,web,前端历史,history,1,、网页三剑客（Firework、Dreamweaver、Flash），,ie,浏览器时代,2,、新版浏览器时代，,html5,，响应式布局网页，,前后端分离，,ajax,异步请求，,jsjq,需要兼容各种浏览器,3,、,2012,年后，前端开发框架时代（,angular,、,react,、,vue,），前端单页面应用,+,路由，按需加载（,require,、,sea,），前端自动化工具,(grunt,、,gulp,、,webpack),，新版,es6,语法，,3,.,jquery,工具库与前端框架对比,jquery,（必学）：,1,、是一个将军，专注的是每个战场细节上的战术安排。,2,、一个完善的工具库，,兼容各种浏览器，,由各种复用的函数集成，非常便捷的修改页面元素。,3,、面向,dom,开发，数据结构一变，,view,层也要重新维护。,框架（以,react,为例）：,1,、是一个元帅，考虑的是整个战局大体上的战略规划。,2,、组件式开发，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。,3,、,面向,state,开发，让开发者更多的关注数据，,底层数据变化时，自动处理所有界面的更新。,4,.,5,.,6,.,单页面应用开发,以往页面是用,iframe,来做页面路由，现在用框架适配的路由,7,.,前端三大框架之间的关系,8,.,angular,9,.,vue,10,.,react,11,.,组件间数据交互,一、父子，兄弟,二、全局数据管理器,1,、,angular,（,1,）注册单例factory,，注入到,controller,中；,（,2,）每个,controller,都可监听广播事件，发送向上、向下和全局的广播，$broadcast，$emit，,$on,，$watch,3,、,vue,（,1,）,vuex,管理库，借鉴redux而创造出的和vue更加契合的,2,、,react,（,1,）,redux,管理库，函数式编程，,自定义,listener,通过,action,来改变数据，同时执行相关,listener,函数,（,2,）,mobx,管理库，,12,.,框架 同步数据到视图,实现原理：,1,、定义一个变量，,2,、监听这个变量的每次获取和赋新值，,3,、然后同步到视图,13,.,angular,脏检查 同步数据,双向数据绑定是 AngularJS 的核心机制之一。,view 中有任何数据变化时，会更新到 model，,model 中数据有变化时，view 也会同步更新,1,、Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view。,2,、每次绑定一个东西到 view 上时 AngularJS 就会往$watch 队列里插入一条$watch，用来检测它监视的 model 里是否有变化的东西。,3,、当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发，遍历所有的$watch，最后更新 dom。,14,.,虚拟,dom:,检测虚拟,dom,变化后，渲染到真实,dom,15,.,mobx,，前端适配库，,js,语言自带的拦截器实现,16,.,简易,redux,17,.,18,.,前端自动化工具,grunt,，,gulp,，,webpack,打包文件资源，,合并压缩混淆代码，,热更新替换开发,19,.,