模塊
例子：
//math.js
var math = {
add : function add( a , b ){ return a+b },
sub : function mul( a , b ){ return a-b}
}
//caculator.js
var caculator = （ function( m ){
var action = 'add'
function compute( a , b ){
switch( action ){
case 'add' : return m.add(a,b);
case 'sub' : return m.mul(a,b);
}
}
return{
compute : compute
}
})( math )
該 caculator 的問題：
- 顯示依賴聲明 （優(yōu)點）
- 仍然污染了全局變量 （不足）
- 必須手動進行依賴管理 （不足）
命名空間
math.js
namespace('math',[],funciton){
function add(a,b){ return a+b;}
function sub(a,b){ return a-b;}
return{
add : add,
sub : sub
}
})
caculator.js
namespace('caculator',["math"],function( m ){
var action = "add";
function compute( a,b ){
return m[action]( a,b );
}
return {
compute : compute
}
});
備注： 有依賴申明 ["math"]， 依賴的math被傳入( m )
模塊系統(tǒng)
1、依賴管理 （記載、分析、注入、初始化）
2、決定模塊寫法
commonjs/module
A module spec for javascript outside the browser
math.js
function add( a , b ){ return a+b },
function sub( a , b ){ return a-b}
exports.add = add
exports.sub = sub
commonjs
優(yōu)點
- 依賴管理成熟可靠
- 社區(qū)活躍，規(guī)范接受度高
- 運行時支持，模塊定義非常簡單
- 文件級的模塊作用域隔離
- 可以處理循環(huán)依賴
缺點
- 不是標準組織的規(guī)范
- 同步的require 沒有考慮瀏覽器環(huán)境
AMD Asynchronous Module Definition
math.js
define( [] ,function(){
function add( a , b ){ return a+b },
function sub( a , b ){ return a-b}
//接口暴露
return{
add : add,
sub : sub
}
} )
caculator.js
依賴注入
caculator.js
loader plugins 草案
可以加載除了js以外的別的文件
loader plugins
AMD優(yōu)點
- 依賴管理成熟可靠
- 社區(qū)活躍，規(guī)范接受度高
- 專為 異步IO環(huán)境 打造，適合瀏覽器環(huán)境
- 支持類似 Commonjs的書寫方式
- 通過API 可以支持加載非JS資源
- 成熟的大包構(gòu)建工具，并可結(jié)合插件
AMD缺點
- 模塊定義繁瑣，需要額外嵌套
- 只是
庫級別需要引入額外庫 - 無法處理循環(huán)依賴
- 無法實現(xiàn)條件加載
ES6/module
es6示例
ES6優(yōu)點
- 是真正的規(guī)范，未來的模塊標準
- 語言級別的關(guān)鍵字支持
- 適應(yīng)所有javascript運行時，包括瀏覽器
- 同樣可以處理循環(huán)依賴
ES6缺點
- 規(guī)范并未達到穩(wěn)定級別
- 級別還沒有瀏覽器支持
- 先有項目使用，即使有大量的6 to 5的transpiler
Systemjs
Universal dynamic module loader 統(tǒng)一動態(tài)module loader
支持加載AMD
支持加載 Commonjs
支持加載ES6
支持transpiler， 可支持任意資源
框架
庫與框架
庫
- 針對特定問題的解答
- 不控制應(yīng)用程序
- 被動的被調(diào)用
框架
- Inverse of control 控制反轉(zhuǎn) （最大的區(qū)別）
- 決定應(yīng)用程序生命周期
- 一般會集成大量的庫
框架
JS框架
** 1、mootoos 最好的源碼閱讀學(xué)習(xí)的資源,建議小型項目中使用 **
mootoo
優(yōu)點
- 概念清晰，沒有包裝對象
- 接口設(shè)計優(yōu)秀
- 源碼清晰易懂
- 不局限于Dom和Ajax
缺點
- 擴展原生對象（致命）
- 社區(qū)衰弱
**2、jquery 最穩(wěn)妥的方案 **
jquery
優(yōu)點
- 社區(qū)強大，普及率高
- 包裝對象，不污染原生
- 基本上專注于Dom
缺點
- 包裝對象，容易混淆
- 接口兩義性
- 社區(qū)水平層次不齊，容易踩坑
**3、zepto 移動端的備選品 **
zepto
優(yōu)點
- 小，啟動快
- 接口與jquery兼容
- 提供了簡單的手勢
缺點
- 與jQuery不能做到100%對應(yīng)
- 支持瀏覽器少，功能較弱
4、hammer.js 手勢相關(guān)
hammer
5、iscroll.js 局部滾動
iscroll
**6、velocity.js 高級動畫 **
velocity
**7、video.js 視頻播放 **
video.js
選框架的時候，Issue的總量與解決率比start 更重要
Communication 通信
- 處理與服務(wù)器的請求與響應(yīng)
- 預(yù)處理請求數(shù)據(jù)/響應(yīng)數(shù)據(jù) Error/Success的判斷封裝
- 多種類型的請求，統(tǒng)一接口（xmlHttpRequest1/2,JSONP,Iframe）
- 處理瀏覽器兼容性
框架比較
boostrap&foundation
boostrap&foundation
Routing 路由
- 監(jiān)聽url變化，并通知注冊的模塊
- 通過javascript進行主動跳轉(zhuǎn)
- 歷史管理
- 對目標瀏覽器的兼容支持
routing 庫
routing庫
架構(gòu)
目的：Architecture 解耦 MVC/MVVM/MV*
工程構(gòu)建
- 項目結(jié)構(gòu)
- 后端模板
- 前端實現(xiàn)
template
webapp
