@@ -44,4 +44,157 @@ jQuery[^jQuery]在发布版本``2.1.3``,一共有152个commit。我们可以
44
44
45
45
> GitHub可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性。为一个项目贡献代码非常简单:首先点击项目站点的“fork”的按钮,然后将代码检出并将修改加入到刚才分出的代码库中,最后通过内建的“pull request”机制向项目负责人申请代码合并。已经有人将GitHub称为代码玩家的MySpace。
46
46
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