摘要：僅作用于未跟蹤的文件。作用是保存目前的工作目錄和暫存區(qū)狀態(tài)，返回一個干凈的工作空間。用于標(biāo)記某次發(fā)布。模塊仍然污染了全局變量。實際返回的是這個函數(shù)，參數(shù)包括模塊名，依賴的模塊，當(dāng)前模塊的實現(xiàn)。

基本信息

模板列表
接口列表

基本信息

預(yù)填數(shù)據(jù)

注入接口

基本信息

輸入數(shù)據(jù)

輸出結(jié)果

版本控制系統(tǒng)VCS （Version control system）

產(chǎn)品級的分支模型：

git是一個基于內(nèi)容尋址的存儲系統(tǒng)。基于文件內(nèi)容，而不是基于文件。

安裝

Windows: msysgit http://msysgit.github.io
Mac: brew install git
Ubuntu: apt-get install git

用戶配置：

git config --global user.name "Darcy"
git config --global user.name text.example.com

配置級別：

初始化之后會出現(xiàn)一個.git/目錄，下面存儲著包括config文件在內(nèi)的幾乎所有g(shù)it相關(guān)文件。

跟蹤：track

添加文件內(nèi)容到暫存區(qū)，同時文件被跟蹤。

批量添加： git add . 添加當(dāng)前目錄所有文件

如果有不希望跟蹤的文件，那么需要配置忽略文件。

僅作用于未跟蹤的文件。

gitignore常見配置：github中的示例

從暫存區(qū)刪除文件。

git rm --cached 僅僅從暫存區(qū)刪除

git rm 同時從暫存區(qū)和工作目錄刪除

git rm $(git ls-files --deleted) 刪除所有被跟蹤，但是在工作目錄被刪除的文件

提交。

git commit -m "initial commit"

git commit -a -m "initial commit" 直接提交

提交歷史記錄。

git log

git log --oneline 只有7位hash和提交時輸入的commit message

git log --color --graph --pretty=format:(此處省略2行) 更美觀，且有分支鏈

上面的命令太長了，不可能每次都這樣輸入，因此需要配置別名alias。

語法：git config --global alias.shortname

例子：git config --global alias.lg "log --color --graph --pretty=format:(此處省略2行)"
這樣就可以用 git lg 來表示上面那行命令了。

別名其實也存儲在gitcofig文件中

顯示版本差異。

git diff 工作目錄與暫存區(qū)的差異

git diff -cached[] 暫存區(qū)與某次提交的差異，默認(rèn)是，指向當(dāng)前的提交

git diff [] 工作目錄與某次提交的差異

撤銷本地修改。

即：將工作內(nèi)容從暫存區(qū)復(fù)制到工作目錄。

取消暫存。

即：將文件內(nèi)容從上次提交復(fù)制到暫存區(qū)。

撤銷全部改動：取消暫存 + 撤銷本地修改。

git branch 新建分支

git branch -d 刪除指定分支

git branch -v 顯示所有分支信息

通過移動HEAD檢出版本，可用于分支切換。

git checkout 切換分支

git checkout -b 新建一個分支并切換到新分支

git checkout -b 切換到其他引用對象，比如 commit id 或 標(biāo)簽

git checkout - 回到上一個分支（把HEAD移動到上一個分支）

將當(dāng)前分支恢復(fù)到某個歷史版本。以下三種模式的主要區(qū)別是內(nèi)容是否會恢復(fù)到工作目錄和暫存區(qū)。

git reset --mixed e33e42 --mixed是默認(rèn)參數(shù)，不寫也行，當(dāng)前內(nèi)容（即原來的提交）會被復(fù)制到暫存區(qū)

git reset --hard e33e42 --hard 時，當(dāng)前內(nèi)容（即原來的提交）會被復(fù)制到暫存區(qū)和工作目錄

git reset --soft e33e42 --soft時，暫存區(qū)和工作目錄都不會有任何改變，原來的提交變成了一個無索引的提交，有可能會被回收，可以用 git reflog 找回來

捷徑：git reset HEAD^/HEAD~1/HEAD~n HEAD的上一次提交，前第n次提交

我們在git checkout切換分支的時候，經(jīng)常會被提示“當(dāng)前有未提交的內(nèi)容，請commit或stash”，而我們通常是寫到一半不希望commit的，所以這時就需要git stash。

作用是：保存目前的工作目錄和暫存區(qū)狀態(tài)，返回一個干凈的工作空間。

git stash save "push to stash area" 第一步：保存

git stash list 第二步：查看已有列表 會顯示：stash@{0}: On master: push to stash area

git stash apply stash@{0} 第三步：把保存的內(nèi)容恢復(fù)到工作目錄

git stash drop stash@{0} 第四步：把對應(yīng)的stash命令刪除掉

git stash pop stash@{0} 捷徑：第三步+第四步

假定當(dāng)前在master分支。

git merge next 合并 next 分支的內(nèi)容到master分支

如有沖突，會是下面這樣：

<<<<<<< HEAD

next 

=======

origin/master

>>>>>>> origin/master

====上面指當(dāng)前分支的提交，下面是要merge過來的分支的提交內(nèi)容。

修剪提交歷史的基線，俗稱“變基”。

git rebase master

不要在共有分支使用rebase。

標(biāo)簽，一個不變的別名。用于標(biāo)記某次發(fā)布。指向一個commit對象。

git tag v0.1 e39d0b2

打完標(biāo)簽之后，可以直接使用標(biāo)簽名切換分支： git checkout v0.1

提交本地歷史到遠(yuǎn)程。

git remote add origin ~/git-server 添加一個遠(yuǎn)程倉庫別名origin

git remote -v 查看遠(yuǎn)程倉庫信息

獲取遠(yuǎn)程倉庫的提交歷史。

git fetch origin/master

git merge origin/master

git pull

=git fetch + git merge

獲取一個遠(yuǎn)程倉庫作為本地倉庫。

git clone ~/git-server test2 會克隆遠(yuǎn)程倉庫到 test2目錄下

封裝實現(xiàn)

暴露接口

聲明依賴

math模塊：

//math.js
function add(a, b) {
  return a + b;
}
function sub(a, b) {
  return a - b;
}

caculator模塊：

//caculator.js
var action = "add";

function compute(a, b){
  switch(action){
    case "add": return add(a, b);
    case "sub": return sub(a, b);
  }
}

可以看出 caculator模塊是依賴math模塊的。

無封裝性：變量全部散落在全局里。

接口結(jié)構(gòu)不明顯：如果我們沒有簡化代碼，那么并不能清楚的知道math到底輸出了哪些接口。

沒有依賴聲明：依賴了math模塊但是卻沒有聲明。

使用全局狀態(tài)：使用了action這個全局狀態(tài)，應(yīng)該盡量避免。

math模塊：

//math.js
var math = {
  add: function add(a, b) {
    return a + b;
  }
  sub: function sub(a, b) {
    return a - b;
  }
}

caculator模塊：

//caculator.js
var caculator = {
  action: "add",
  compute: function compute(a, b){
    switch(action){
      case "add": return add(a, b);
      case "sub": return sub(a, b);
    }
  }
}

結(jié)構(gòu)性好：用字面量把接口進(jìn)行了結(jié)構(gòu)化。

訪問控制差：依然沒有進(jìn)行控制。

依然沒有依賴聲明：依賴了math模塊但是卻沒有聲明。

無法設(shè)置私有屬性：action雖然是成員屬性，但在外部依然可以訪問到。

caculator模塊：

//caculator.js
var caculator = (function(){
  var action = "add";
  return {
    compute: function compute(a, b){
      switch(action){
        case "add": 
          return math.add(a, b);
        case "sub": 
          return math.sub(a, b);
      }
    }
  }
})();

依然依然沒有依賴聲明：依賴了math模塊但是卻沒有聲明。

有了私有屬性：action是我們要的私有屬性，compute函數(shù)可以訪問到，而且在caculator外面無法訪問到。

caculator模塊：

//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.sub(a, b);
    }
  }
  return {
    compute: conpute
  }
})(math);

顯示了依賴聲明：把math模塊作為參數(shù)傳了進(jìn)去，并且可以對形參進(jìn)行命名，這里命名為m。

math模塊仍然污染了全局變量。

必須手動進(jìn)行依賴管理：math模塊是手動傳進(jìn)去的，必須手動保證math是在這之前就被加載了。

注意return的部分與原來不一樣了：學(xué)名叫 揭露模塊模式review module pattern，優(yōu)點是在暴露的模塊進(jìn)行增刪查改的時候會非常方便。

幫助我們只暴露一個類似于namespace的全局變量。而不是將math這樣的模塊都注冊在全局作用域中。

math模塊：

//math.js
namespace("math", [], function(){
  function add(a, b) {
    return a + b;
  }
  function sub(a, b) {
    return a - b;
  }
  return {
    add: add,
    sub: sub
  }
})
//第一個參數(shù)為模塊聲明，第二個參數(shù)為依賴的模塊，第三個參數(shù)為模塊的構(gòu)成

caculator模塊：

//caculator.js
namespace("caculator", ["math"], function(m){
  var action = "add";
  function compute(a, b){
    return m[action](a, b);
  }
  return {
    compute: compute
  }
}

依賴是統(tǒng)一注冊在某個地方，而不是全局中的一個變量。

namespace的實現(xiàn)：

cache中緩存了所有的模塊。
實際返回的是createModule這個函數(shù)，參數(shù)包括：模塊名，依賴的模塊，當(dāng)前模塊的實現(xiàn)。
如果只傳入了一個參數(shù)，就返回這個模塊cache[name]。
取得所有依賴的模塊deps，即保證前面的模塊都已經(jīng)被定義好了，這樣當(dāng)前模塊（這里為caculator模塊）才能運(yùn)行。
最后初始化模并返回定義的模塊cache[name]。

不再污染全局環(huán)境：把模塊都定義在一個namespace變量中。

沒有依賴管理：依然是我們手動進(jìn)行依賴管理。

如果這些模塊分散在不同的文件中，我們在用的時候就要對引入的腳本順序進(jìn)行手動排序。
比如 module2.js中依賴了module1.js，那么寫的時候就要先寫module.js，像這樣：

但是我們在實際開發(fā)過程中的依賴總是很復(fù)雜。那是一條又長又復(fù)雜的依賴鏈。非要人肉分析是會抓狂的。而這其實是模塊系統(tǒng)的工作。

依賴管理（加載 / 注入 / 分析 / 初始化）

決定模塊寫法

//main.js
function add(a, b){
  return a + b;
}
function sub(a, b){
  return a - b;
}
exports.add = add
exports.sub = sub

比原來的寫法多了接口暴露：exports.add = add exports.sub = sub

//caculator.js
var math = require("./math");

function Caculator(container){
  //...
}

exports.Caculator = Caculator

比原來的寫法多了依賴聲明： var math = require("./math"); 和 接口暴露：exports.Caculator = Caculator。

優(yōu)點：

運(yùn)行時支持，模塊定義非常簡單：只是利用了幾個全局變量exports, module, require。

文件級別的模塊作用域隔離：這幾個全局變量的作用域都是文件級別的，雖然JS沒有文件級別的作用域，但我們對它進(jìn)行了封裝，使得使用時一個文件有一個作用域，它們使用起來非常安全。

可以處理循環(huán)依賴。

缺點：

不是標(biāo)準(zhǔn)組織的規(guī)范。

同步的require，沒有考慮瀏覽器環(huán)境。而我們的瀏覽器文件加載是一個異步的過程，這是最大的問題，這是否就意味著我們的瀏覽器沒辦法使用了呢？當(dāng)然不是。現(xiàn)在有很多工具比如browserify，比如webpack，可以幫助我們把多個文件級別的模塊打包成一個文件，這樣我們引入單個文件就可以在瀏覽器里使用了。

因為CommonJS天然的不適合異步環(huán)境，所以出現(xiàn)了天然異步的AMD（Asynchronous Module Definition）

與我們前面的namespace非常像。

//main.js
define([], function(){
  function add(a, b){
    return a + b;
  }
  function sub(a, b){
    return a - b;
  }
  return {
    add: add,
    sub: sub
  }
})

比原來的寫法多了包裹函數(shù)：define，第一個參數(shù)為依賴的模塊列表，第二個參數(shù)為當(dāng)前模塊的實現(xiàn)。

//caculator.js
define(["./math"], function(math){
  function Caculator(container){
    //...
  }
  return {
    Caculator: Caculator
  }
}

同時AMD還支持一個簡單的CommonJS寫法，只不過要用一層函數(shù)包裹起來define(function(require, exports){ ... })。

優(yōu)點：

專為異步I/O環(huán)境打造，適合瀏覽器環(huán)境。

支持類似CommonJS的書寫方式。

通過插件支持可以加載非JS資源。

成熟的打包構(gòu)建工具，并可結(jié)合插件實現(xiàn)一些預(yù)處理的工作。

缺點：

模塊定義繁瑣，需要額外的函數(shù)嵌套。

只是庫級別的支持，需要引入額外的庫，比如requireJS。

無法處理循環(huán)依賴。

無法實現(xiàn)條件加載，因為只是庫級別的。

//main.js
function add(a, b){
  return a + b;
}
function sub(a, b){
  return a - b;
}
export { add, sub }

比原來的寫法多了接口暴露：export {add, sub}

//caculator.js
import { math } from "./math";

function Caculator(container){
  //...
}

export { Caculator }

比原來的寫法多了依賴聲明： import { math } from "./math"; 和 接口暴露：export { Caculator }。

優(yōu)點：

真正官方的規(guī)范，未來的趨勢。

語言級別的支持。

適應(yīng)所有的JavaScript運(yùn)行時環(huán)境，包括瀏覽器。

可以處理循環(huán)依賴。

針對特定問題的解答，就有專業(yè)性

不控制應(yīng)用程序的流程

被動的被調(diào)用

比如，一個DatePicker時間選擇器是一個庫，一個Backbone.view是一個框架。

控制反轉(zhuǎn) Inverse of control <···主要區(qū)別

決定應(yīng)用程序生命周期

一般會集成大量的庫

下面這個圖很好的解釋了控制反轉(zhuǎn)：

框架決定了什么時候調(diào)用庫，什么時候要求你的代碼去實現(xiàn)某些功能。

框架和庫，他們都是解決方案。關(guān)于解決方案，分為7各方面：

DOM

communication 通信

Utility 工具庫

Template 模板技術(shù)

Component 組件

Route 路由

Architecture MV*架構(gòu)

jQuery

zepto.JS

Mootools

手勢支持：Hammer.js

局部滾動：iScroll.js

高級動畫：Velocity.js

視頻播放：video.js

處理與服務(wù)器的請求與響應(yīng)

預(yù)處理請求數(shù)據(jù)/響應(yīng)數(shù)據(jù) & Error/Success的判斷封裝

多種類型請求，統(tǒng)一接口

處理瀏覽器兼容性

jQuery

zepto.JS

Reqwest

qwest

以上都是異步的請求，但對于實時性要求非常高的產(chǎn)品比如im聊天工具，就需要立即響應(yīng)。這時需要用websocket。推薦下面的庫：

socket.io

提供JS原生不提供的功能

方法門面包裝，使其易于使用。即shim（語言墊片），保證實現(xiàn)與規(guī)范一致。

異步隊列 / 流程控制 比如promise

Bootstrap

Foundation

監(jiān)聽url變化，并通知注冊的模塊，進(jìn)行頁面切換

通過Javascript進(jìn)行主動跳轉(zhuǎn)

歷史管理

對目標(biāo)瀏覽器的兼容性的支持

提供一種范式幫助（強(qiáng)制）開發(fā)者進(jìn)行模塊解耦

試圖與模型分離

更容易進(jìn)行單元測試

更容易實現(xiàn)應(yīng)用程序的擴(kuò)展

各種框架比較的參考網(wǎng)站：
http://todomvc.com/
https://www.javascripting.com/
https://www.javascriptoo.com/
http://microjs.com/#

數(shù)據(jù)類型（每個頁面的每個模塊都要多帶帶定義包含的數(shù)據(jù)類型列表）

模板資源

異步接口（請求方式，請求地址，輸入?yún)?shù)，輸出結(jié)果）

頁面摘要

項目結(jié)構(gòu)

初始代碼

模擬數(shù)據(jù)

通用原件（logo，輸入框，圖標(biāo)，按鈕，翻頁，復(fù)選框列表，loading）

通用列表（歌單。歌手，收藏的節(jié)目）

復(fù)合組件（比如評論）

浮層彈窗

一個組件（BannerSlifer）的栗子：

本地測試

異步測試

對接聯(lián)調(diào)

打包發(fā)布

優(yōu)化配置