《前端培训》PPT课件.ppt

《《前端培训》PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、前端工程化历程现代前端框架思想前端工程化1.前端代码结构以及模块化2.渲染方式以及模板3.组件4.前端路由与前端应用5.CSS解决方案6.异步流程处理7.构建工具前端代码结构与模块化第一阶段htmljscss代码分离，jscss分层切割在不同文件中，统一在html引入，以闭包和命名空间划分彼此。第二阶段动态创建标签引入js，实现模块化加载，例如：requireJS。这段时期提出了AMD,CMD等加载方式的概念。前端代码结构与模块化第三阶段引入node用于编译代码，基于commonjs标准，像写node一样写浏览器端代码，

2、例如：browserify。第四阶段一切资源皆是模块，支持es6模块，node，按需加载，代码分割，环境变量，版本号等等。。。例如：webpack。渲染方式第一阶段命令式，直接操作DOM，例如：jQuery第二阶段声明式，仅描述数据与UI的映射关系，DOM操作交给库／框架，例如：Vue，react模板第一阶段字符串模板，字符串拼接，输出html第二阶段模板引擎，例如：Handlebars第三阶段模板+虚拟DOM+Diff（数据／DOM）组件第一阶段DOM组件，将DOM操作集成在组件对象中。例如：jQueryui，boot

3、strapjavascript组件第二阶段controller+模板，将数据与视图绑定。例如：Backbone第三阶段组件可以表示为函数，组件可以由其他组件组装而成，结合变化侦测，虚拟DOM，Diff，提升效率。例如：React，Vue前端路由与前端应用组件可以表示为一个函数一个大型组件可以由很多小组件拼装而成多个大型组件可以构成应用路由表示一个前端应用那么路由也可以表示为一个函数CSS解决方案第一阶段按照约定的规则，写CSS代码，例如：BEM第二阶段结合构建工具进行预处理，例如：Less，Sass，PostCSS第三阶

4、段契合组件，样式与组件绑定，例如：cssinjs，CSSmodules异步流程处理第一阶段基于回调函数第二阶段基于Promise对象第三阶段基于生成器，async／await，rxjs构建工具第一阶段以文件处理为主，例如：Grunt，Gulp第二阶段以打包为核心，例如：webpack