前端培训.pptVIP

前端工程化历程 现代前端框架思想 前端工程化 1. 前端代码结构以及模块化 2. 渲染方式以及模板 3. 组件 4. 前端路由与前端应用 5. CSS解决方案 6. 异步流程处理 7. 构建工具 前端代码结构与模块化 第一阶段 html js css代码分离，js css分层切割在不同文件中，统一在html引入，以闭包和命名空间划分彼此。 第二阶段 动态创建标签引入js，实现模块化加载，例如：requireJS。这段时期提出了AMD,CMD等加载方式的概念。 前端代码结构与模块化 第三阶段 引入node用于编译代码，基于commonjs标准，像写node一样写浏览器端代码，例如：browserify。 第四阶段 一切资源皆是模块，支持es6模块，node，按需加载，代码分割，环境变量，版本号等等。。。例如：webpack。 渲染方式 第一阶段 命令式，直接操作DOM，例如：jQuery 第二阶段 声明式，仅描述数据与UI的映射关系，DOM操作交给库／框架，例如：Vue，react 模板 第一阶段 字符串模板，字符串拼接，输出html 第二阶段 模板引擎，例如：Handlebars 第三阶段 模板 + 虚拟DOM + Diff（数据／DOM） 组件 第一阶段 DOM组件，将DOM操作集成在组件对象中。例如：jQuery ui，bootstrap javascript组件 第二阶段 controller + 模板，将数据与视图绑定。例如：Backbone 第三阶段 组件可以表示为函数，组件可以由其他组件组装而成，结合变化侦测，虚拟DOM，Diff，提升效率。例如：React，Vue 前端路由与前端应用 组件可以表示为一个函数 一个大型组件可以由很多小组件拼装而成 多个大型组件可以构成应用 路由表示一个前端应用 那么路由也可以表示为一个函数 CSS解决方案 第一阶段 按照约定的规则，写CSS代码，例如：BEM 第二阶段 结合构建工具进行预处理，例如：Less，Sass，Post CSS 第三阶段 契合组件，样式与组件绑定，例如：css in js，CSS modules 异步流程处理 第一阶段 基于回调函数 第二阶段 基于Promise对象 第三阶段 基于生成器，async／await，rxjs 构建工具 第一阶段 以文件处理为主，例如：Grunt，Gulp 第二阶段 以打包为核心，例如：webpack