前端知识体系教材.doc

2015-2016前端知识体系 一、框架与组件 bootstrap等UI框架设计与实现 伸缩布局：grid网格布局 基础UI样式：元素reset、按钮、图片、菜单、表单 组件UI样式：按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局：布局、结构、样式、媒体、javascript响应式 第三方插件：插件管理 jQuery、zepto使用原理以及插件开发 支持amd、cmd、全局变量的模块化封装 $.fn.method = function(){} mvc/mvvm框架原理设计，vue/angular/avalon等 directive设计：html、text、class、html、attr、repeat、ref，可扩展 filter设计：bool、upperCase、lowerCase，可扩展 表达式设计：if-else等实现 viewmodel结构设计：例如数据，元素，方法的挂载与作用域 数据更变检测：函数触发，脏数据检测、对象hijacking polymer/angular2思想与设计思路 import技术 template和script引入方式 css样式命名空间隔离 简单复用第三方库 reactjs原理与使用 virtual dom单向数据绑定 js执行语法方式 UI由状态控制 commonJS/AMD/CMD 模块引入 模块定义 模块标识 UMD解决不同规范兼容性的问题，例如webpack封装 模块懒执行(CMD)与与预执行(AMD) loadJs模块化加载原理与实现 创建script标签，需要id映射到资源url onload加载模块队列判断 全部加载完成后触发 加载失败问题优化 requirejs、modjs、seajs polyfill、shim原理与实现 polyfill提供了开发者们希望浏览器原生提供支持的功能特性 shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现 virtual Dom、Incremental DOM 1.用js对象树表示dom树结构，根据该对象树构建dom树 2.状态改变时，重新构建对象，和旧的对象对比，记录两个对象树差异 3.将对象树差异应用到dom中 小结:js对象模拟dom(elem.js)，virtual dom diff算法(diff.js)、差异渲染dom(patch.js) incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中 shadow dom 隔离外部环境用于封装组件：结构、样式、行为 实现形式：新标签、class类属性 + 构建编译 webwork与service Worker webwork与主线程机制，on/post serviceworker可作为浏览器请求代理 应用场景 ES6转ES5、Babel与ES6开发规范体系 ES6编码规范全 ES6在babel下兼容性 ES6在node下兼容性与性能 ES6新特性：看编码规范 aurelia ES6前端框架 Isomorphic JavaScript 同构原理 同构方案 Rendr nodejs: 服务器 hapi: 应用服务 backbone.js: 后台mvc requirejs: 模块加载 jquery: dom处理 reactjs同构:React + Flux + Koa 双向数据绑定 函数触发:vuejs 脏数据检测:angular 对象hijacking:avalon browserify运行原理 1.从入口模块开始分析require函数调用 2.根据依赖生成AST 3.根据AST找到每个模块的模块名 4.得到每个模块的依赖关系，生成一个依赖字典 5.包装每个模块（传入依赖字典以及export和require函数），生成执行的js performance timing performance timing api performance timing 过程 performance timing 性能计算 performanceTrace库 组件UI与js组件规范化 组件编码规范 组件目录规范：组件目录与公用目录 组件构建规范：构建环境支持 组件模块化管理：spm，bowserify 组件复用性管理 第三方组件接入成本 immutable JavaScript generator与promise原理与使用 二、构建生态 grunt/gulp开发环境任务编写 文件处理插件：html、scss、js、image、font、其它 优化插件：雪碧图、图片压缩、iconfont构建 发布替换插件 打包、压缩包插件：组件自动分析 白名单配置 自定义插件编写 npm、jspm、bower包管理工具 r.js、bro