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

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