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