从最先盘算写一个MV*,到一个简朴的demo,花了几天的时刻,虽然许多代码都是复制/革新过来的,然则It Works(nginx的那句话会让人冲动有木有)。如今他叫lettuce,代码 https://github.com/phodal/lettuce,如果有兴致能够到场我们。
虽然js还不够expert,然则最先了。
一步步搭建JavaScript框架
JavaScript项目名称
一最先我做的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
了。
天生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));
我们的库写在马上实行函数表达式内里。如许就是和jQuery等库一样了。
grunt里的使命包含了:
- jshint 代码搜检
- contact 兼并js到一个文件
- minify js 紧缩js
- qunit 单元测试
如许我们就能够轻松上路了。