如题所述
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可作为浏览器请求代理
应用场景
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原理与使用