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