[TOC]
## 概況
### 背景
從開始打算寫一個MV*，到一個簡單的demo，花了幾天的時間，雖然很多代碼都是復制/改造過來的，然而**It Works**(nginx的那句話會讓人激動有木有)。現在他叫lettuce，代碼[https://github.com/phodal/lettuce](https://github.com/phodal/lettuce)，如果有興趣可以加入我們。
雖然js還不夠expert，但是開始了。
## 步驟
### Step 1: 注冊npm和bower包
一開始我做的3次commits是:
~~~
* e4e6e04 - Add README.md (3 weeks ago) <Fengda HUANG>
* 37411d7 - publish bower (3 weeks ago) <Fengda HUANG>
* aabf278 - init project (3 weeks ago) <Fengda HUANG>
~~~
是的一開始什么也沒做，除了從`bower`和`npm`上注冊了一個叫做`lettuce`的庫:
~~~
{
"name": "lettuce",
"version": "0.0.2",
"authors": [
"Fengda HUANG <h@phodal.com>"
],
"description": "A Mobile JavaScript Framework",
"main": "index.js",
"moduleType": [
"amd",
"node"
],
"keywords": [
"lettuce",
"mobile"
],
"license": "MIT",
"homepage": "http://lettuce.phodal.com",
"private": false,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
~~~
然后在我們還沒有開始寫代碼的時候版本就已經是`0.0.2`這個速度好快。。總結如下:
* 取一個好的名字
* 在npm和bower上挖一個坑給自己
* 開始寫README.md
所以我的`README.md`是這樣子的
~~~
#Lettuce
> A is Mobile JavaScript Framework
Coming soon
~~~
是的，我們的代碼已經`Coming soon`了。
### Step 2: 生成Javascript項目框架
為了簡化這一個痛苦的過程，我們還是用yeoman。
#### 安裝Yeoman lib生成器
1.安裝yeoman
~~~
npm install -g yo
~~~
2.安裝generator-lib
~~~
npm install -g generator-lib
~~~
3.創建項目
~~~
mkdir ~/lettuce && cd $_
yo lib
~~~
接著我們就迎來了
~~~
_-----_
| |
|--(o)--| .--------------------------.
`---------′ | Welcome to Yeoman, |
( _′U`_ ) | ladies and gentlemen! |
/___A___\ '__________________________'
| ~ |
__'.___.'__
′ ` |° ′ Y `
[?] What do you want to call your lib? Lettuce
[?] Describe your lib: A Framework for Romantic
[?] What is your GitHub username? phodal
[?] What is your full name? Fengda Huang
[?] What year for the copyright? 2015
~~~
省略上百字，你的目錄里就會有
~~~
.
|____.editorconfig
|____.gitattributes
|____.gitignore
|____.jshintrc
|____bower.json
|____demo
| |____assets
| | |____main.css
| | |____normalize.css
| |____index.html
|____dist
| |____Lettuce.js
| |____Lettuce.min.js
|____docs
| |____MAIN.md
|____Gruntfile.js
|____index.html
|____LICENSE.txt
|____package.json
|____README.md
|____src
| |_____intro.js
| |_____outro.js
| |____main.js
|____test
| |____all.html
| |____all.js
| |____lib
| | |____qunit.css
| | |____qunit.js
~~~
這么多的文件。
#### Build JavaScript項目
于是我們執行了一下
~~~
grunt
~~~
就有了這么多的log:
~~~
Running "concat:dist" (concat) task
File "dist/Lettuce.js" created.
Running "jshint:files" (jshint) task
>> 1 file lint free.
Running "qunit:files" (qunit) task
Testing test/all.html .OK
>> 1 assertions passed (20ms)
Running "uglify:dist" (uglify) task
File "dist/Lettuce.min.js" created.
Done, without errors.
~~~
看看我們的Lettuce.js里面有什么
~~~
(function(root, undefined) {
"use strict";
/* Lettuce main */
// Base function.
var Lettuce = function() {
// Add functionality here.
return true;
};
// Version.
Lettuce.VERSION = '0.0.1';
// Export to the root, which is probably `window`.
root.Lettuce = Lettuce;
}(this));
~~~
我們的庫寫在[立即執行函數表達式](https://www.phodal.com/blog/javascript-immediately-invoked-function-expression)里面。這樣便是和jQuery等庫一樣了。
grunt里的任務包含了:
* jshint 代碼檢查
* contact 合并js到一個文件
* minify js 壓縮js
* qunit 單元測試
這樣我們就可以輕松上路了。
### Step 3: 尋找所需要的函數
### Step 4: 整合
### Step 5: 測試
### 練習建議
