文档介绍：2015-2016前端知识体系前端体系知识图谱一、框架与组件bootstrap等UI框架设计与实现伸缩布局:grid网格布局基础UI样式:元素reset、按钮、图片、菜单、表单组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告响应式布局:布局、结构、样式、媒体、javascript响应式第三方插件:插件管理jQuery、zepto使用原理以及插件开发支持amd、cmd、全局变量的模块化封装$.=function(){}mvc/mvvm框架原理设计,vue/angular/avalon等directive设计:html、text、class、html、attr、repeat、ref,可扩展filter设计:bool、upperCase、lowerCase,可扩展表达式设计:if-else等实现viewmodel结构设计:例如数据,元素,方法的挂载与作用域数据更变检测:函数触发,脏数据检测、对象hijackingpolymer/monJS/AMD/CMD模块引入模块定义模块标识UMD解决不同规范兼容性的问题,例如webpack封装模块懒执行(CMD)与与预执行(AMD)loadJs模块化加载原理与实现创建script标签,需要id映射到资源urlonload加载模块队列判断全部加载完成后触发加载失败问题优化requirejs、modjs、seajspolyfill、shim原理与实现polyfill提供了开发者们希望浏览器原生提供支持的功能特性shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现virtualDom、IncrementalDOM用js对象树表示dom树结构,根据该对象树构建dom树状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异将对象树差异应用到dom中小结:js对象模拟dom(),virtualdomdiff算法()、差异渲染dom()incrementaldom在状态改变时扫描旧对象树将差异直接应用到dom中shadowdom隔离外部环境用于封装组件:结构、样式、行为实现形式:新标签、class类属性+构建编译webwork与serviceWorkerwebwork与主线程机制,on/postserviceworker可作为浏览器请求代理应用场景ES6转ES5、Babel与ES6开发规范体系ES6编码规范全ES6在babel下兼容性ES6在node下兼容性与性能ES6新特性:看编码规范aureliaES6前端框架IsomorphicJavaScript同构原理同构方案Rendrnodejs:服务器hapi::后台mvcrequirejs:模块加载jquery:dom处理reactjs同构:React+Flux+Koa双向数据绑定函数触发:vuejs脏数据检测:angular对象hijacking:avalonbrowserify运行原理从入口模块开始分析require函数调用根据依赖生成AST根据AST找到每个模块的模块名得到每个模块的依赖关系,生成一个依赖字典包装每个模块(传入依赖字典以及export和require函数),生成执行的jsperformancetimingperformancetimingapiperformancetiming过程performancetiming性能计算performanceTrace库组件UI与js组件规范化组件编码规范组件目录规范:组件目录与公用目录组件构建规范:构建环境支持组件模块化管理:spm,bowserify组件复用性管理第三方组件接入成本immutableJavaScriptgenerator与promise原理与使用二、构建生态grunt/gulp开发环境任务编写文件处理插件:html、scss、js、image、font、其它优化插件:雪碧图、图片压缩、iconfont构建发布替换插件打包、压缩包插件:组件自动分析白名单配置自定义插件编写npm、jspm、、browserify、webpack、webpack2、Rollup打包工具使用原理:根据依赖配置文件对文件进行依赖打包webpack支持更多的规范打包,monjswebpack+babel/reactjs+refluxfis3构建与插件开发、构建环境、ponent:、x-view、Q、riot、novabrunch构建工具三、开发技巧与调试fiddler加willow基础组合调试常见配置与分析结合浏览器调试werien、vorlonjs远程调试,chromeinspectmockjs,(