摘要：僅作用于未跟蹤的文件。作用是保存目前的工作目錄和暫存區狀態，返回一個干凈的工作空間。用于標記某次發布。模塊仍然污染了全局變量。實際返回的是這個函數，參數包括模塊名，依賴的模塊，當前模塊的實現。

基本信息

模板列表
接口列表

基本信息

預填數據

注入接口

基本信息

輸入數據

輸出結果

版本控制系統VCS （Version control system）

產品級的分支模型：

git是一個基于內容尋址的存儲系統。基于文件內容，而不是基于文件。

安裝

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

配置級別：

初始化之后會出現一個.git/目錄，下面存儲著包括config文件在內的幾乎所有git相關文件。

跟蹤：track

添加文件內容到暫存區，同時文件被跟蹤。

批量添加： git add . 添加當前目錄所有文件

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

僅作用于未跟蹤的文件。

gitignore常見配置：github中的示例

從暫存區刪除文件。

git rm --cached 僅僅從暫存區刪除

git rm 同時從暫存區和工作目錄刪除

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 工作目錄與暫存區的差異

git diff -cached[] 暫存區與某次提交的差異，默認是，指向當前的提交

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

撤銷本地修改。

即：將工作內容從暫存區復制到工作目錄。

取消暫存。

即：將文件內容從上次提交復制到暫存區。

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

git branch 新建分支

git branch -d 刪除指定分支

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

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

git checkout 切換分支

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

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

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

將當前分支恢復到某個歷史版本。以下三種模式的主要區別是內容是否會恢復到工作目錄和暫存區。

git reset --mixed e33e42 --mixed是默認參數，不寫也行，當前內容（即原來的提交）會被復制到暫存區

git reset --hard e33e42 --hard 時，當前內容（即原來的提交）會被復制到暫存區和工作目錄

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

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

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

作用是：保存目前的工作目錄和暫存區狀態，返回一個干凈的工作空間。

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

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

git stash apply stash@{0} 第三步：把保存的內容恢復到工作目錄

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

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

假定當前在master分支。

git merge next 合并 next 分支的內容到master分支

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

<<<<<<< HEAD

next 

=======

origin/master

>>>>>>> origin/master

====上面指當前分支的提交，下面是要merge過來的分支的提交內容。

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

git rebase master

不要在共有分支使用rebase。

標簽，一個不變的別名。用于標記某次發布。指向一個commit對象。

git tag v0.1 e39d0b2

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

提交本地歷史到遠程。

git remote add origin ~/git-server 添加一個遠程倉庫別名origin

git remote -v 查看遠程倉庫信息

獲取遠程倉庫的提交歷史。

git fetch origin/master

git merge origin/master

git pull

=git fetch + git merge

獲取一個遠程倉庫作為本地倉庫。

git clone ~/git-server test2 會克隆遠程倉庫到 test2目錄下

封裝實現

暴露接口

聲明依賴

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模塊的。

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

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

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

使用全局狀態：使用了action這個全局狀態，應該盡量避免。

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);
    }
  }
}

結構性好：用字面量把接口進行了結構化。

訪問控制差：依然沒有進行控制。

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

無法設置私有屬性：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函數可以訪問到，而且在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模塊作為參數傳了進去，并且可以對形參進行命名，這里命名為m。

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

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

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

幫助我們只暴露一個類似于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
  }
})
//第一個參數為模塊聲明，第二個參數為依賴的模塊，第三個參數為模塊的構成

caculator模塊：

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

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

namespace的實現：

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

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

沒有依賴管理：依然是我們手動進行依賴管理。

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

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

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

決定模塊寫法

//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。

優點：

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

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

可以處理循環依賴。

缺點：

不是標準組織的規范。

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

因為CommonJS天然的不適合異步環境，所以出現了天然異步的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
  }
})

比原來的寫法多了包裹函數：define，第一個參數為依賴的模塊列表，第二個參數為當前模塊的實現。

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

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

優點：

專為異步I/O環境打造，適合瀏覽器環境。

支持類似CommonJS的書寫方式。

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

成熟的打包構建工具，并可結合插件實現一些預處理的工作。

缺點：

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

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

無法處理循環依賴。

無法實現條件加載，因為只是庫級別的。

//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 }。

優點：

真正官方的規范，未來的趨勢。

語言級別的支持。

適應所有的JavaScript運行時環境，包括瀏覽器。

可以處理循環依賴。

針對特定問題的解答，就有專業性

不控制應用程序的流程

被動的被調用

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

控制反轉 Inverse of control <···主要區別

決定應用程序生命周期

一般會集成大量的庫

下面這個圖很好的解釋了控制反轉：

框架決定了什么時候調用庫，什么時候要求你的代碼去實現某些功能。

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

DOM

communication 通信

Utility 工具庫

Template 模板技術

Component 組件

Route 路由

Architecture MV*架構

jQuery

zepto.JS

Mootools

手勢支持：Hammer.js

局部滾動：iScroll.js

高級動畫：Velocity.js

視頻播放：video.js

處理與服務器的請求與響應

預處理請求數據/響應數據 & Error/Success的判斷封裝

多種類型請求，統一接口

處理瀏覽器兼容性

jQuery

zepto.JS

Reqwest

qwest

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

socket.io

提供JS原生不提供的功能

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

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

Bootstrap

Foundation

監聽url變化，并通知注冊的模塊，進行頁面切換

通過Javascript進行主動跳轉

歷史管理

對目標瀏覽器的兼容性的支持

提供一種范式幫助（強制）開發者進行模塊解耦

試圖與模型分離

更容易進行單元測試

更容易實現應用程序的擴展

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

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

模板資源

異步接口（請求方式，請求地址，輸入參數，輸出結果）

頁面摘要

項目結構

初始代碼

模擬數據

通用原件（logo，輸入框，圖標，按鈕，翻頁，復選框列表，loading）

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

復合組件（比如評論）

浮層彈窗

一個組件（BannerSlifer）的栗子：

本地測試

異步測試

對接聯調

打包發布

優化配置