建站
咨詢
售后
建站咨詢
新聞中心
最近，我不得不重構(gòu)一些處于粗糙狀態(tài)的代碼：
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評(píng)估等整套的建站服務(wù)，主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站，重慶App定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。創(chuàng)新互聯(lián)深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
- function endpoint(service, version = '') {
- let protocol
- let domain
- if (service === 'webclient') {
- protocol = __CLIENT_PROTOCOL__
- domain = `${__ENV__}-${service}.${__DOMAIN__}`
- if (__SERVER__) {
- protocol = 'http'
- } else if (__ENV__ === 'production') {
- domain = `www.${__DOMAIN__}`
- }
- } else {
- if (__ENV__ !== 'local') {
- if (__SERVER__) {
- protocol = 'http'
- domain = `${__ENV__}-${service}`
- domain += `.${__DOMAIN__}`
- } else {
- protocol = __CLIENT_PROTOCOL__
- domain = `${__ENV__}-api.${__DOMAIN__}`
- if (service !== 'core') {
- domain += `/${service}`
- }
- if (version) {
- domain += `/${version}`
- }
- }
- } else {
- protocol = 'http'
- if (service === 'core') {
- if (__CLIENT__) {
- domain = `api.${__DOMAIN__}`
- } else {
- domain = `api.${__DOMAIN__}:80`
- }
- } else {
- if (__CLIENT__) {
- domain = `api.${__DOMAIN__}/${service}/${version}`
- } else {
- domain = `api.${__DOMAIN__}:80/${service}/${version}`
- }
- }
- }
- }
- const url = `${protocol}://${domain}`
- return url
- }
- export default endpoint
上面的邏輯確定端點(diǎn)的URL，它取決于多種因素：您使用的服務(wù)，在服務(wù)器或客戶端上呈現(xiàn)的服務(wù)，在生產(chǎn)環(huán)境或測(cè)試環(huán)境中使用的服務(wù)等。
一段代碼變得如此混亂的原因之一是，當(dāng)我們忘記重復(fù)比錯(cuò)誤的抽象要便宜得多時(shí)。
好消息是，您可以應(yīng)用幾種簡(jiǎn)單的技術(shù)來(lái)簡(jiǎn)化嵌套的if-else語(yǔ)句。 壞消息是，這段代碼對(duì)應(yīng)用程序至關(guān)重要，因?yàn)樗姓?qǐng)求都在調(diào)用它。 哦，它也沒有經(jīng)過測(cè)試!
所以，這就是我重構(gòu)的方式…
1. 給該代碼100%的測(cè)試覆蓋率
我沒有執(zhí)行重構(gòu)代碼的任務(wù)，所以打電話了。 但是我不知道要花多少時(shí)間(我本該用來(lái)交付其他東西的時(shí)間)。
重構(gòu)本身并不總是合理的。 但是，很難想象有人會(huì)抱怨增加測(cè)試范圍，尤其是在涵蓋如此關(guān)鍵的功能的情況下。 因此，我決定從此開始，不僅是為了讓我對(duì)重構(gòu)充滿信心，而且因?yàn)楫?dāng)我完成測(cè)試時(shí)，我將更好地了解重構(gòu)的難度，并且我可以進(jìn)行/不進(jìn)行。 去打電話。
如今，我們大多數(shù)人都在Gousto中實(shí)踐TDD，但是代碼庫(kù)的這一特定部分是幾年前的，它的重要性和狀態(tài)阻礙了我和其他人在過去對(duì)其進(jìn)行重構(gòu)。
TDD的主要好處是無(wú)需擔(dān)心，也無(wú)需花費(fèi)成本即可進(jìn)行重構(gòu)-羅伯特·馬丁(Robert C. Martin，鮑勃叔叔)
我還想確保覆蓋率是100%，所以我使用了Jest標(biāo)志–coverage，它提供了以下輸出：
- -------------------|----------|----------|----------|----------|-------------------|
- File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
- -------------------|----------|----------|----------|----------|-------------------|
- ... | ... | ... | ... | ... | ...|
- endpoint.js | 100 | 100 | 100 | 100 | |
- ... | ... | ... | ... | ... | ...|
- -------------------|----------|----------|----------|----------|-------------------|
- Test Suites: 1 passed, 1 total
- Tests: 12 passed, 12 total
2. 提取功能
現(xiàn)在我們有了測(cè)試，有了更多的信心，我們可以開始拆分代碼。 讓我們從頭開始。 我們看到，根據(jù)服務(wù)，環(huán)境，客戶端/服務(wù)器端……為協(xié)議分配了不同的值，然后將其添加到函數(shù)末尾的其余url中。
- const url = `${protocol}://${domain}`
因此，我們可以將確定協(xié)議的代碼抽象為自己的函數(shù)，只需調(diào)用一次即可：
- import endpoint from 'config/endpoint'
- describe('endpoint.js', () => {
- global.__DOMAIN__ = 'gousto.local'
- let service
- describe('when the service is "webclient"', () => {
- beforeEach(() => {
- service = 'webclient'
- })
- describe('and being in the server side', () => {
- beforeEach(() => {
- global.__SERVER__ = true
- global.__ENV__ = 'whateverenv'
- })
- test('an http address with the corresponding ENV, SERVICE and DOMAIN is returned', () => {
- const url = endpoint(service)
- expect(url).toBe(`http://${__ENV__}-${service}.${__DOMAIN__}`)
- })
- })
- describe('and not being in the server side', () => {
- ...
- describe('and the environment is production', () => {
- ...
- test('an https address with "www" and without the service, but with the DOMAIN is returned', () => {...})
- })
- describe('and the environment is not production', () => {
- ...
- test('an https address with the corresponding ENV, SERVICE and DOMAIN is returned', () => {...})
- })
- })
- })
- describe('when the service is not "webclient"', () => {
- ...
- describe('and the env is not "local"', () => {
- ...
- describe('and being in the server side', () => {
- ...
- test('an http address with the corresponding ENV, SERVICE and DOMAIN is returned', () => {...})
- })
- describe('and not being in the server side', () => {
- ...
- describe('and the service is core', () => {
- ...
- test('an https API address with the corresponding ENV and DOMAIN is returned', () => {...})
- describe('and a version was passed', () => {
- test('an https API address with the corresponding ENV, DOMAIN, SERVICE and VERSION is returned', () => {...})
- })
- })
- describe('and a version was passed', () => {
- test('an https API address with the corresponding ENV, DOMAIN, SERVICE and VERSION is returned', () => {...})
- })
- describe('and a version was not passed', () => {
- test('an https API address with the corresponding ENV, DOMAIN and SERVICE is returned', () => {...})
- })
- })
- })
- describe('and the env is "local"', () => {
- ...
- describe('and the service is core', () => {
- ...
- describe('and being in the client side', () => {
- ...
- test('an http API address with the corresponding DOMAIN is returned', () => {...})
- })
- describe('and not being in the client side', () => {
- ...
- test('an http API address with the corresponding DOMAIN and port 80 is returned', () => {...})
- })
- })
- describe('and the service is not core', () => {
- ...
- describe('and being in the client side', () => {
- ...
- test('an http API address with the corresponding DOMAIN, SERVICE and VERSION is returned', () => {...})
- })
- describe('and not being in the client side', () => {
- ...
- test('an http API address with the corresponding DOMAIN, port 80, SERVICE and VERSION is returned', () => {...})
- })
- })
- })
- })
- })
我們可以對(duì)URL的其余部分執(zhí)行與getProtocol()相同的操作。 提取的功能越多，if-else的地獄就越容易簡(jiǎn)化，提取剩余的內(nèi)容就越容易。 因此，我的建議是從最小的復(fù)雜度入手，因?yàn)檫@將使其余的操作更為簡(jiǎn)單。
提取這些函數(shù)并不復(fù)雜，但這是因?yàn)槲覍f-else的噩夢(mèng)翻譯成了它們。 因此，我們沒有大的混亂，但有一些小混亂。 不能接受 讓我們來(lái)照顧它。
3. 簡(jiǎn)化
除了關(guān)注點(diǎn)分離之外，將url的不同部分提取為不同功能的優(yōu)點(diǎn)是可以進(jìn)一步簡(jiǎn)化條件。 之前，URL的某些部分限制了簡(jiǎn)化，因?yàn)樗鼈冃枰獫M足多個(gè)條件。 現(xiàn)在，它們是分開的，所以我們不必為此擔(dān)心。
您可以只是出于對(duì)它的關(guān)注而進(jìn)行簡(jiǎn)化……或者您可以使用真值表來(lái)提供幫助。
對(duì)于getProtocol()，一種真值表如下所示：
但可以簡(jiǎn)化一下("-"表示該值無(wú)關(guān)緊要)：
我們只有兩個(gè)可能的值：http和https，因此我們可以采用較少行(https)的值，檢查條件，然后返回另一個(gè)(http)。
- const getProtocol = (service, isServerSide, environment) => {
- if (service === 'webclient' && !isServerSide) {
- return 'https'
- }
- if (service !== 'webclient' && !isServerSide && environment !== 'local') {
- return 'https'
- }
- return 'http'
- }
這已經(jīng)比上一節(jié)中的要好。 但是我們?nèi)匀豢梢宰龈? 檢查前兩個(gè)條件，您可能會(huì)發(fā)現(xiàn)只有在我們不在服務(wù)器端時(shí)才獲得https。 因此，我們可以為http編寫第一個(gè)條件，并在函數(shù)的其余部分中擺脫isServerSide：
- const getProtocol = (service, isServerSide, environment) => {
- if (isServerSide) {
- return 'http'
- }
- if (service === 'webclient') {
- return 'https'
- }
- if (service !== 'webclient' && environment !== 'local') {
- return 'https'
- }
- return 'http'
- }
不過，我們可以做得更好。 現(xiàn)在我們可以合并第二個(gè)和第三個(gè)條件，因?yàn)樗鼈冚^小：
- const getProtocol = (service, isServerSide, environment) => {
- ...
- if (service === 'webclient' ||
- (service !== 'webclient' && environment !== 'local')) {
- return 'https'
- }
- ...
- }
但是，請(qǐng)保持……這種狀況有點(diǎn)愚蠢，不是嗎? 如果服務(wù)是webclient，則條件為true。 否則……轉(zhuǎn)到OR的第二部分，為什么我們需要檢查服務(wù)是否不是webclient? 如果我們?cè)贠R的右側(cè)，那么我們確定它不是webclient。 最終結(jié)果看起來(lái)很整潔，特別是與第2部分中的原始結(jié)果相比。提取功能：
- const getProtocol = (service, isServerSide, environment) => {
- if (isServerSide) {
- return 'http'
- }
- if (service === 'webclient' || environment !== 'local') {
- return 'https'
- }
- return 'http'
- }
結(jié)果
多虧了功能的提取，我們最終有了一個(gè)endpoint()函數(shù)，這是我寫的榮幸。
- ...
- function endpoint(service, version = '') {
- const protocol = getProtocol(service, __SERVER__, __ENV__)
- const subdomain = getSubdomain(service, __SERVER__, __ENV__)
- const path = getPath(service, __SERVER__, __ENV__, version)
- const port = getPort(service, __ENV__, __CLIENT__)
- return `${protocol}://${subdomain}.${__DOMAIN__}${port}${path}`
- }
- export default endpoint
上面代碼的get函數(shù)很小，足以被理解而不會(huì)動(dòng)您的大腦。 并非所有人都像我想要的那樣簡(jiǎn)單，但是它們比原始代碼要好得多。 您可以在這里看到文件的外觀。
最后，您應(yīng)該始終嘗試遵循以下規(guī)則：讓代碼比發(fā)現(xiàn)的要好。 盡管贊美?不要這么做
> GitHub comment in the PR
> A team mate making my day
現(xiàn)在輪到您了，您是否有任何想法使它變得更簡(jiǎn)單(無(wú)需更改在其余應(yīng)用程序中的使用方式)? 您對(duì)重構(gòu)的處理方式會(huì)有所不同嗎?
當(dāng)前標(biāo)題：如何重構(gòu)一些可怕的代碼
標(biāo)題路徑：http://www.5511xx.com/article/ccsiosp.html
