|
| 1 | +#介绍 |
| 2 | + |
| 3 | +##Github |
| 4 | + |
| 5 | +Wiki百科上是这么说的 |
| 6 | + |
| 7 | +> GitHub 是一个共享虚拟主机服务,用于存放使用Git版本控制的软件代码和内容项目。它由GitHub公司(曾称Logical Awesome)的开发者Chris Wanstrath、PJ Hyett和Tom Preston-Werner |
| 8 | +使用Ruby on Rails编写而成。 |
| 9 | + |
| 10 | +当然让我们看看官方的介绍: |
| 11 | + |
| 12 | +> GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Over eight million people use GitHub to build amazing things together. |
| 13 | +
|
| 14 | + |
| 15 | +它还是什么? |
| 16 | + |
| 17 | +- 网站 |
| 18 | +- 免费博客 |
| 19 | +- 管理配置文件 |
| 20 | +- 收集资料 |
| 21 | +- 简历 |
| 22 | +- 管理代码片段 |
| 23 | +- 托管编程环境 |
| 24 | +- 写作 |
| 25 | + |
| 26 | +等等。看上去像是大餐,但是你还需要了解点什么? |
| 27 | + |
| 28 | +###版本管理与软件部署 |
| 29 | + |
| 30 | +jQuery[^jQuery]在发布版本``2.1.3``,一共有152个commit。我们可以看到如下的提交信息: |
| 31 | + |
| 32 | + - Ajax: Always use script injection in globalEval … bbdfbb4 |
| 33 | + - Effects: Reintroduce use of requestAnimationFrame … 72119e0 |
| 34 | + - Effects: Improve raf logic … 708764f |
| 35 | + - Build: Move test to appropriate module fbdbb6f |
| 36 | + - Build: Update commitplease dev dependency |
| 37 | + - ... |
| 38 | + |
| 39 | +###Github与Git |
| 40 | + |
| 41 | +> Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中。目前,包括Rubinius、Merb和Bitcoin在内的很多知名项目都使用了Git。Git同样可以被诸如Capistrano和Vlad the Deployer这样的部署工具所使用。 |
| 42 | +
|
| 43 | +> GitHub可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性。为一个项目贡献代码非常简单:首先点击项目站点的“fork”的按钮,然后将代码检出并将修改加入到刚才分出的代码库中,最后通过内建的“pull request”机制向项目负责人申请代码合并。已经有人将GitHub称为代码玩家的MySpace。 |
| 44 | +
|
| 45 | +[^jQuery]: jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。 |
| 46 | + |
| 47 | +##用好Github |
| 48 | + |
| 49 | +如何用好Github,并实践一些敏捷软件开发是一个很有意思的事情.我们可以在上面做很多事情,从测试到CI,再到自动部署. |
| 50 | + |
| 51 | +###敏捷软件开发 |
| 52 | + |
| 53 | +显然我是在扯淡,这和敏捷软件开发没有什么关系。不过我也不知道瀑布流是怎样的。说说我所知道的一个项目的组成吧: |
| 54 | + |
| 55 | + - 看板式管理应用程序(如trello,简单地说就是管理软件功能) |
| 56 | + - CI(持续集成) |
| 57 | + - 测试覆盖率 |
| 58 | + - 代码质量(code smell) |
| 59 | + |
| 60 | +对于一个不是远程的团队(如只有一个人的项目) 来说,Trello、Jenkin、Jira不是必需的: |
| 61 | + |
| 62 | +> 你存在,我深深的脑海里 |
| 63 | +
|
| 64 | +当只有一个人的时候,你只需要明确知道自己想要什么就够了。我们还需要的是CI、测试,以来提升代码的质量。 |
| 65 | + |
| 66 | +###测试 |
| 67 | + |
| 68 | +通常我们都会找Document,如果没有的话,你会找什么?看源代码,还是看测试? |
| 69 | + |
| 70 | +```javascript |
| 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 | + |
| 90 | +代码来源: [https://github.com/phodal/lettuce](https://github.com/phodal/lettuce) |
| 91 | + |
| 92 | +上面的测试用例,清清楚楚地写明了用法,虽然写得有点扯。 |
| 93 | + |
| 94 | +等等,测试是用来干什么的。那么,先说说我为什么会想去写测试吧: |
| 95 | + |
| 96 | + - 我不希望每次做完一个个新功能的时候,再手动地去测试一个个功能。(自动化测试) |
| 97 | + - 我不希望在重构的时候发现破坏了原来的功能,而我还一无所知。 |
| 98 | + - 我不敢push代码,因为我没有把握。 |
| 99 | + |
| 100 | +虽然,我不是TDD的死忠,测试的目的是保证功能正常,TDD没法让我们写出质量更高的代码。但是有时TDD是不错的,可以让我们写出逻辑更简单地代码。 |
| 101 | + |
| 102 | +也许你已经知道了``Selenium``、``Jasmine``、``Cucumber``等等的框架,看到过类似于下面的测试 |
| 103 | + |
| 104 | +``` |
| 105 | + Ajax |
| 106 | + ✓ specifying response when you need it |
| 107 | + ✓ specifying html when you need it |
| 108 | + ✓ should be post to some where |
| 109 | + Class |
| 110 | + ✓ respects instanceof |
| 111 | + ✓ inherits methods (also super) |
| 112 | + ✓ extend methods |
| 113 | + Effect |
| 114 | + ✓ should be able fadein elements |
| 115 | + ✓ should be able fadeout elements |
| 116 | +``` |
| 117 | + |
| 118 | +代码来源: [https://github.com/phodal/lettuce](https://github.com/phodal/lettuce) |
| 119 | + |
| 120 | +看上去似乎每个测试都很小,不过补完每一个测试之后我们就得到了测试覆盖率 |
| 121 | + |
| 122 | +File | Statements | Branches | Functions | Lines |
| 123 | +-----|------------|----------|-----------|------ |
| 124 | +lettuce.js | 98.58% (209 / 212)| 82.98%(78 / 94) | 100.00% (54 / 54) | 98.58% (209 / 212) |
| 125 | + |
| 126 | +本地测试都通过了,于是我们添加了``Travis-CI``来跑我们的测试 |
| 127 | + |
| 128 | +###CI |
| 129 | + |
| 130 | +虽然node.js不算是一门语言,但是因为我们用的node,下面的是一个简单的``.travis.yml``示例: |
| 131 | + |
| 132 | +```yml |
| 133 | +language: node_js |
| 134 | +node_js: |
| 135 | + - "0.10" |
| 136 | + |
| 137 | +notifications: |
| 138 | + email: false |
| 139 | + |
| 140 | +before_install: npm install -g grunt-cli |
| 141 | +install: npm install |
| 142 | +after_success: CODECLIMATE_REPO_TOKEN=321480822fc37deb0de70a11931b4cb6a2a3cc411680e8f4569936ac8ffbb0ab codeclimate < coverage/lcov.info |
| 143 | +``` |
| 144 | +
|
| 145 | +代码来源: [https://github.com/phodal/lettuce](https://github.com/phodal/lettuce) |
| 146 | +
|
| 147 | +我们把这些集成到``README.md``之后,就有了之前那张图。 |
| 148 | +
|
| 149 | +CI对于一个开发者在不同城市开发同一项目上来说是很重要的,这意味着当你添加的部分功能有测试覆盖的时候,项目代码会更加强壮。 |
| 150 | +
|
| 151 | +###代码质量 |
| 152 | +
|
| 153 | +像``jslint``这类的工具,只能保证代码在语法上是正确的,但是不能保证你没有写一堆bad smell的代码。 |
| 154 | +
|
| 155 | + - 重复代码 |
| 156 | + - 过长的函数 |
| 157 | + - 等等 |
| 158 | + |
| 159 | +``Code Climate``是一个与github集成的工具,我们不仅仅可以看到测试覆盖率,还有代码质量。 |
| 160 | +
|
| 161 | +先看看上面的ajax类: |
| 162 | +
|
| 163 | +```javascript |
| 164 | +Lettuce.get = function (url, callback) { |
| 165 | + Lettuce.send(url, 'GET', callback); |
| 166 | +}; |
| 167 | + |
| 168 | +Lettuce.send = function (url, method, callback, data) { |
| 169 | + data = data || null; |
| 170 | + var request = new XMLHttpRequest(); |
| 171 | + if (callback instanceof Function) { |
| 172 | + request.onreadystatechange = function () { |
| 173 | + if (request.readyState === 4 && (request.status === 200 || request.status === 0)) { |
| 174 | + callback(request.responseText); |
| 175 | + } |
| 176 | + }; |
| 177 | + } |
| 178 | + request.open(method, url, true); |
| 179 | + if (data instanceof Object) { |
| 180 | + data = JSON.stringify(data); |
| 181 | + request.setRequestHeader('Content-Type', 'application/json'); |
| 182 | + } |
| 183 | + request.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); |
| 184 | + request.send(data); |
| 185 | +}; |
| 186 | +``` |
| 187 | + |
| 188 | +代码来源: [https://github.com/phodal/lettuce](https://github.com/phodal/lettuce) |
| 189 | + |
| 190 | +在[Code Climate](https://codeclimate.com/github/phodal/lettuce/src/ajax.js)在出现了一堆问题 |
| 191 | + |
| 192 | + - Missing "use strict" statement. (Line 2) |
| 193 | + - Missing "use strict" statement. (Line 14) |
| 194 | + - 'Lettuce' is not defined. (Line 5) |
| 195 | + |
| 196 | +而这些都是小问题啦,有时可能会有 |
| 197 | + |
| 198 | + - Similar code found in two :expression_statement nodes (mass = 86) |
| 199 | + |
| 200 | +这就意味着我们可以对上面的代码进行重构,他们是重复的代码。 |
| 201 | + |
| 202 | +###重构 |
| 203 | + |
| 204 | +不想在这里说太多关于``重构``的东西,可以参考Martin Flower的《重构》一书去多了解一些重构的细节。 |
| 205 | + |
| 206 | +这时想说的是,只有代码被测试覆盖住了,那么才能保证重构的过程没有出错。 |
0 commit comments