Skip to content

Commit bb0f7dd

Browse files
committed
Update 01-introduction.md
1 parent d48b2f2 commit bb0f7dd

File tree

1 file changed

+154
-1
lines changed

1 file changed

+154
-1
lines changed

chapters/01-introduction.md

Lines changed: 154 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,157 @@ jQuery[^jQuery]在发布版本``2.1.3``,一共有152个commit。我们可以
4444
4545
> GitHub可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性。为一个项目贡献代码非常简单:首先点击项目站点的“fork”的按钮,然后将代码检出并将修改加入到刚才分出的代码库中,最后通过内建的“pull request”机制向项目负责人申请代码合并。已经有人将GitHub称为代码玩家的MySpace。
4646
47-
[^jQuery]: jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。
47+
[^jQuery]: jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。
48+
49+
##提高
50+
51+
52+
###敏捷软件开发
53+
54+
显然我是在扯淡,这和敏捷软件开发没有什么关系。不过我也不知道瀑布流是怎样的。说说我所知道的一个项目的组成吧:
55+
56+
- 看板式管理应用程序(如trello,简单地说就是管理软件功能)
57+
- CI(持续集成)
58+
- 测试覆盖率
59+
- 代码质量(code smell)
60+
61+
对于一个不是远程的团队(如只有一个人的项目) 来说,Trello、Jenkin、Jira不是必需的:
62+
63+
> 你存在,我深深的脑海里
64+
65+
当只有一个人的时候,你只需要明确知道自己想要什么就够了。我们还需要的是CI、测试,以来提升代码的质量。
66+
67+
##测试
68+
69+
通常我们都会找Document,如果没有的话,你会找什么?看源代码,还是看测试?
70+
71+
it("specifying response when you need it", function (done) {
72+
var doneFn = jasmine.createSpy("success");
73+
74+
lettuce.get('/some/cool/url', function (result) {
75+
expect(result).toEqual("awesome response");
76+
done();
77+
});
78+
79+
expect(jasmine.Ajax.requests.mostRecent().url).toBe('/some/cool/url');
80+
expect(doneFn).not.toHaveBeenCalled();
81+
82+
jasmine.Ajax.requests.mostRecent().respondWith({
83+
"status": 200,
84+
"contentType": 'text/plain',
85+
"responseText": 'awesome response'
86+
});
87+
});
88+
89+
代码来源: [https://github.com/phodal/lettuce](https://github.com/phodal/lettuce)
90+
91+
上面的测试用例,清清楚楚地写明了用法,虽然写得有点扯。
92+
93+
等等,测试是用来干什么的。那么,先说说我为什么会想去写测试吧:
94+
95+
- 我不希望每次做完一个个新功能的时候,再手动地去测试一个个功能。(自动化测试)
96+
- 我不希望在重构的时候发现破坏了原来的功能,而我还一无所知。
97+
- 我不敢push代码,因为我没有把握。
98+
99+
虽然,我不是TDD的死忠,测试的目的是保证功能正常,TDD没法让我们写出质量更高的代码。但是有时TDD是不错的,可以让我们写出逻辑更简单地代码。
100+
101+
也许你已经知道了``Selenium````Jasmine````Cucumber``等等的框架,看到过类似于下面的测试
102+
103+
Ajax
104+
✓ specifying response when you need it
105+
✓ specifying html when you need it
106+
✓ should be post to some where
107+
Class
108+
✓ respects instanceof
109+
✓ inherits methods (also super)
110+
✓ extend methods
111+
Effect
112+
✓ should be able fadein elements
113+
✓ should be able fadeout elements
114+
115+
代码来源: [https://github.com/phodal/lettuce](https://github.com/phodal/lettuce)
116+
117+
看上去似乎每个测试都很小,不过补完每一个测试之后我们就得到了测试覆盖率
118+
119+
File | Statements | Branches | Functions | Lines
120+
-----|------------|----------|-----------|------
121+
lettuce.js | 98.58% (209 / 212)| 82.98%(78 / 94) | 100.00% (54 / 54) | 98.58% (209 / 212)
122+
123+
本地测试都通过了,于是我们添加了``Travis-CI``来跑我们的测试
124+
125+
##CI
126+
127+
虽然node.js不算是一门语言,但是因为我们用的node,下面的是一个简单的``.travis.yml``示例:
128+
129+
language: node_js
130+
node_js:
131+
- "0.10"
132+
133+
notifications:
134+
email: false
135+
136+
before_install: npm install -g grunt-cli
137+
install: npm install
138+
after_success: CODECLIMATE_REPO_TOKEN=321480822fc37deb0de70a11931b4cb6a2a3cc411680e8f4569936ac8ffbb0ab codeclimate < coverage/lcov.info
139+
140+
141+
代码来源: [https://github.com/phodal/lettuce](https://github.com/phodal/lettuce)
142+
143+
我们把这些集成到``README.md``之后,就有了之前那张图。
144+
145+
CI对于一个开发者在不同城市开发同一项目上来说是很重要的,这意味着当你添加的部分功能有测试覆盖的时候,项目代码会更加强壮。
146+
147+
##代码质量
148+
149+
``jslint``这类的工具,只能保证代码在语法上是正确的,但是不能保证你写了一堆bad smell的代码。
150+
151+
- 重复代码
152+
- 过长的函数
153+
- 等等
154+
155+
``Code Climate``是一个与github集成的工具,我们不仅仅可以看到测试覆盖率,还有代码质量。
156+
157+
先看看上面的ajax类:
158+
159+
Lettuce.get = function (url, callback) {
160+
Lettuce.send(url, 'GET', callback);
161+
};
162+
163+
Lettuce.send = function (url, method, callback, data) {
164+
data = data || null;
165+
var request = new XMLHttpRequest();
166+
if (callback instanceof Function) {
167+
request.onreadystatechange = function () {
168+
if (request.readyState === 4 && (request.status === 200 || request.status === 0)) {
169+
callback(request.responseText);
170+
}
171+
};
172+
}
173+
request.open(method, url, true);
174+
if (data instanceof Object) {
175+
data = JSON.stringify(data);
176+
request.setRequestHeader('Content-Type', 'application/json');
177+
}
178+
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
179+
request.send(data);
180+
};
181+
182+
代码来源: [https://github.com/phodal/lettuce](https://github.com/phodal/lettuce)
183+
184+
[Code Climate](https://codeclimate.com/github/phodal/lettuce/src/ajax.js)在出现了一堆问题
185+
186+
- Missing "use strict" statement. (Line 2)
187+
- Missing "use strict" statement. (Line 14)
188+
- 'Lettuce' is not defined. (Line 5)
189+
190+
而这些都是小问题啦,有时可能会有
191+
192+
- Similar code found in two :expression_statement nodes (mass = 86)
193+
194+
这就意味着我们可以对上面的代码进行重构,他们是重复的代码。
195+
196+
##重构
197+
198+
不想在这里说太多关于``重构``的东西,可以参考Martin Flower的《重构》一书去多了解一些重构的细节。
199+
200+
这时想说的是,只有代码被测试覆盖住了,那么才能保证重构的过程没有出错。

0 commit comments

Comments
 (0)