1.模塊化
模塊
模塊組織指的是 JS 腳本的模塊組織
模塊職責(zé)：封裝實(shí)現(xiàn)，暴露接口，聲明依賴
模塊系統(tǒng)
模塊系統(tǒng)主要的兩個(gè)職責(zé)：依賴管理，決定模塊寫法
commonjs
依賴聲明：var math = require("./math")
暴露接口：exports.Caculator = Caculator
優(yōu)點(diǎn)：
依賴管理成熟可靠斯棒；社區(qū)活躍，規(guī)范接受度高照弥；運(yùn)行時(shí)支持，模塊定義非常簡單进副；
文件級別的模塊作用域隔離产喉；可以處理循環(huán)依賴
缺點(diǎn)：
不是標(biāo)準(zhǔn)組織的規(guī)范；同步的 require 沒有考慮瀏覽器環(huán)境
有工具把多個(gè)文件級別的模塊打包成一個(gè)文件，引入單個(gè)文件可在瀏覽器中使用（browserify曾沈，webpack这嚣，component）
首先全局安裝 browserify 模塊，在命令行輸入?
browserify caculator.js>caculator-bunde.js
文件被函數(shù)體包起來塞俱，形參為 require姐帚，module，exports
AMD
由于 commonjs 天然的不適合異步環(huán)境
AMD 是天然地作用于異步環(huán)境（IO環(huán)境）
依賴聲明及注入：define(["./math"],function(math){...})
接口暴露：return {Caculator:Caculator}
同時(shí) AMD 支持 Simplified CommonJS wrapping障涯，用一層函數(shù)把 commonjs 包裹起來：
define(function(require,exports){...})
獲取依賴列表：通過 function.toString() 打印函數(shù)體罐旗，再用正則表達(dá)式提取
AMD 還有一個(gè)在草案階段的 Loader Plugins 規(guī)范，定義了 AMD 可以加載其他資源
完整組件 = 結(jié)構(gòu) + 邏輯 + 樣式
define(["regularjs","text!path/to/foo.html","css!path/to/style.css"],function(Regular,template){...})
優(yōu)點(diǎn)：
依賴管理成熟可靠唯蝶；社區(qū)活躍九秀，規(guī)范接受度高；專為異步 IO 環(huán)境打造粘我，適合瀏覽器環(huán)境鼓蜒；
支持類似 commonjs 的書寫方式；通過插件 API 可支持加載非 js 資源征字；
成熟的打包工具都弹，并可結(jié)合插件
缺點(diǎn)：
模塊定義繁瑣，需要額外嵌套匙姜；只是庫級別的支持畅厢，需要引入額外庫；
無法處理循環(huán)依賴氮昧；無法實(shí)現(xiàn)條件加載
ES6 module
未來JS支持的模塊化標(biāo)準(zhǔn)
import｛add｝ from './math'; 引入依賴
export｛Caculator｝暴露接口
優(yōu)點(diǎn)：
是真正的規(guī)范框杜，未來的模塊標(biāo)準(zhǔn)；語言級別的關(guān)鍵字支持袖肥；適應(yīng)所有 JavaScript 運(yùn)行咪辱；
同樣可處理循環(huán)依賴
缺點(diǎn)：
規(guī)范并未到穩(wěn)定級別；基本還沒有瀏覽器支持昭伸；現(xiàn)有項(xiàng)目使用
System js
支持加載 AMD?
支持加載 CommonJS
支持加載 ES6
支持 Transpiler梧乘，可支持任意資源
2.框架
框架和類庫
庫：針對特定問題的解答澎迎；不控制應(yīng)用程序庐杨；被動(dòng)的被調(diào)用
框架：控制反轉(zhuǎn)；決定應(yīng)用程序的生命周期夹供；一般會集成大量的庫
解決方案：DOM Communication Utility Templating Component Routing Architecture
為什么使用解決方案：
開發(fā)效率灵份；可靠性（瀏覽器兼容性/測試覆蓋）；更好的配套（文檔/Demo/工具）
設(shè)計(jì)得更好哮洽；專業(yè)性
什么時(shí)候不使用：
問題過于簡單填渠；備選框架的質(zhì)量與可控性無法保證；無法滿足當(dāng)前業(yè)務(wù)需求；團(tuán)隊(duì)中已有相關(guān)積累
解決方案
1.DOM操作
提供便利的 DOM 查詢 / 操作 / 移動(dòng)等操作
提供事件綁定 / 事件等支持
提供瀏覽器特性檢測氛什、UA 檢測
提供節(jié)點(diǎn)屬性莺葫、樣式、類名等操作
保證所有以上操作實(shí)現(xiàn)目標(biāo)平臺的跨瀏覽器支持
jQuery
優(yōu)點(diǎn)：社區(qū)強(qiáng)大枪眉，普及率高捺檬；包裝對象，不污染原生贸铜；基本上專注于 DOM
缺點(diǎn)：包裝對象堡纬，容易混淆；接口兩義性蒿秦；社區(qū)水平層次不齊烤镐，容易踩坑
Zepto.js
優(yōu)點(diǎn)：小，啟動(dòng)快棍鳖；接口與 jQuery 兼容炮叶；提供了簡單的手勢
缺點(diǎn)：與 jQuery 不能做到百分百對應(yīng)；支持瀏覽器少鹊杖、功能較弱
mootools
優(yōu)點(diǎn)：概念清晰悴灵，沒有包裝對象；接口設(shè)計(jì)優(yōu)秀骂蓖；源碼清晰易懂积瞒；不局限于 DOM 和 Ajax
缺點(diǎn)：擴(kuò)展原生對象（致命）；社區(qū)衰弱
DOM（專業(yè)領(lǐng)域）
手勢 Hammer.js：常見手勢封裝登下，包括 top,hold,transform,swipe等茫孔，并支持自定義擴(kuò)展
局部滾動(dòng) scroll.js：移動(dòng)端 position:fix + overflow:scroll 的救星
高級動(dòng)畫 Velocity.js：復(fù)雜動(dòng)畫序列實(shí)現(xiàn)，不僅限于 dom
視頻播放 video.js：類似原生 video 標(biāo)簽的使用方式被芳，對低級瀏覽器回退到 flash 播放
2.Communication
處理與服務(wù)器的請求響應(yīng)
預(yù)處理請求數(shù)據(jù) / 響應(yīng)數(shù)據(jù) Error / Success 的判斷封裝
多種類型請求缰贝，統(tǒng)一接口
處理瀏覽器兼容性
Request
優(yōu)點(diǎn)：支持 JSONP；穩(wěn)定 / IE6+ support畔濒；CORS 跨域剩晴；Promise/A 支持
quest
優(yōu)點(diǎn)：更小的代碼量；支持 XmlHttpRequest2侵状；CORS 跨域赞弥；支持高級數(shù)據(jù)類型如 ArrayBuffer，Blob 和 FormData
socket.io
優(yōu)點(diǎn)：實(shí)時(shí)性趣兄；支持二進(jìn)制數(shù)據(jù)流绽左；智能自動(dòng)的回退支持（非二進(jìn)制數(shù)據(jù)流）；多種后端語言支持
3.Utility
提供 JS 原生不提供的功能
方法門面包裝艇潭，使其更易于使用
異步隊(duì)列 / 流程控制
兩種形式：Shim Extension
4. Templating
5.Component
提供基礎(chǔ)組件 CSS 支持
提供常用組件如 Slider拼窥、Modal
提供聲明式的調(diào)用方式
Bootstrap 和 Foundation
6.Routing
監(jiān)聽 url 變化戏蔑，并通知注冊的模塊
通過 JavaScript 進(jìn)行主動(dòng)跳轉(zhuǎn)
歷史管理
對目標(biāo)瀏覽器的兼容性支持
page.js：類似 Express.Router 的路由規(guī)則的前端路由庫
Director.js：可以前后端使用一套規(guī)則來定義路由
Stateman：用于處理深層復(fù)雜路由的獨(dú)立路由庫
7.Architecture
提供一種范式幫助（強(qiáng)制）開發(fā)者進(jìn)行模塊解耦
視圖與模型分離
更容易進(jìn)行單元測試
更容易實(shí)現(xiàn)應(yīng)用程序的擴(kuò)展
