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可作為瀏覽器請求代理
應用場景