成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

記一次前端項目重構(gòu)要點總結(jié)

frolc / 3025人閱讀

摘要:重構(gòu)總共耗時個工作日。第一個重構(gòu)原因就是沒有引入靜態(tài)類型,導致查看一個對象結(jié)構(gòu)需要翻來覆去在多個文件中查找。第三是各個狀態(tài)模塊耦合度高,加大了代碼維護難度。但如果耦合度過高,往往是因為模塊沒有細分到位。這個項目也不列外。

不知不覺已是2019年的7月,恍惚之間已工作四年。懵懵懂懂的成長,間歇性努力,實話說,對現(xiàn)在自己取得的成果不大滿意。不過,好在時不時頓悟,知道適時作出改變。

此后發(fā)文會適當記錄一些心路歷程,與君共勉。

歡迎Star和訂閱我的博客。

本文要點:

什么項目,為何會重構(gòu)?

怎么重構(gòu)的?

重構(gòu)前后對比

什么項目,為何會重構(gòu)?

項目是公司主打業(yè)務產(chǎn)品之一的可視化子項目,與其他子項目幾乎沒有耦合,所以可以多帶帶拎出來重構(gòu)。具體業(yè)務不作過多描述,主要重構(gòu)內(nèi)容為系統(tǒng)組件和一個自研可視化圖形庫。重構(gòu)總共耗時30個工作日。

技術(shù)主要用Vue2系列和JavaScript。第一個重構(gòu)原因就是沒有引入靜態(tài)類型,導致查看一個對象結(jié)構(gòu)需要翻來覆去在多個文件中查找。第二是因為之前新增代碼模式一般為:“來一個需求加一段代碼”,長期積累導致代碼結(jié)構(gòu)混亂,可讀性差。第三是各個狀態(tài)模塊耦合度高,加大了代碼維護難度。

怎么重構(gòu)的?

一、在JavaScript中使用TypeScript?!笆裁??在JS中使用TS? 聞所未聞。 ” 在看到TS官網(wǎng)手冊最后一條"Type Checking JavaScript File"之前,我也這樣想。其實,TS和VSCode(一款I(lǐng)DE)結(jié)合,也可以實現(xiàn)靜態(tài)類型檢測,只不過使用注釋形式,一樣支持tsconfig.json和自定義Typing。

type TypeApple = { name: string, count: number }
/** @type {TypeApple} */
const apple = { name: "foo", count: 100 }

二、細化模塊分類。一般情況下,模塊都會有耦合。但如果耦合度過高,往往是因為模塊沒有細分到位。如果細化模塊?舉例,假如有一個模塊叫Operation,里面既包含操作相關(guān)邏輯,也有操作面板邏輯。隨著業(yè)務發(fā)展,操作面板邏輯越來越多。我們完全可以將操作面板邏輯多帶帶抽成一個模塊OperationPanel。

三、解耦可視化庫和Vue/Vuex。寫業(yè)務的時候,很容易因為方便,在Vue組件或Vuex模塊中代碼越寫越長,越來越難維護。這個項目也不列外。所以重構(gòu)的時候,多帶帶將可視化庫相關(guān)邏輯抽成模塊,并使用類Vuex寫法(state, getters, mutations, actions)進行管理。

class Counter {
  // # state  
  /** @type {number} */
  count = 0

  // # getters
  get countText() { return `Count is: ${ this.count }` }

  // # mutations
  /** @param {number} count*/
  SET_COUNT = count => { this.count = count }
  
  // # actions
  /** @param {number} count*/
  logCount = ( count ) => {
    this.SET_COUNT( count )
    console.log( this.countText )
  }
}

四、最后一條,編寫可維護性高的代碼。這里說兩個方法。

第一個是“使用Map。處理“一個有多類型的數(shù)據(jù)”需要使用判斷,常見有3種方法:If, Switch, MapIf的使用簡單粗暴,容易理解。

if ( animalType === "dog" ) {
    console.log( "Wang!" )
} else if ( animalType === "cat" ) {
    console.log( "Miao!" )
} else if ( animalType === "bird" ) {
    console.log( "Jiu!" )
}

Switch可以看做是If的簡化。

switch ( animalType ) {
    case "dog":
      console.log( "Wang!" )
      break
    case "cat":
      console.log( "Miao!" )
      break
    case "bird":
      console.log( "Jiu!" )
      break
}

Map針對性最強,并且最簡潔、最易于維護。

const logMap = {
    dog: () => console.log( "Wang!" ),
    cat: () => console.log( "Miao!" ),
    bird: () => console.log( "Jiu!" ),
}
logMap[ animalType ]()

具體使用也哪一種因場景而異,但多數(shù)場景下,使用Map可讀性更強。

第二個是“使用getters和mutations”。比如定義一個模塊的`:operationGetters.js`, 里面提供各種用來獲取與操作有關(guān)的常量和方法。

export const OPERATION_TYPE_A = 0
export const OPERATION_TYPE_B = 1

export const OPERATION_TITLE_MAP = {
  [ OPERATION_TYPE_A ]: "Title A",
  [ OPERATION_TYPE_B ]: "Title B",
}

export const getOperationTitleByType = type => OPERATION_TITLE_MAP[ type ]

定義mutations則是定義一個提供相關(guān)各種變更數(shù)據(jù)方法的文件。在維護代碼的時候,查找變更方法名即可直接找到更改數(shù)據(jù)的出處。

export const SET_OPERATION_TITLE = ( operation, title ) => { operation.title = title }
重構(gòu)前后對比
代碼類型 重構(gòu)前 重構(gòu)后
可視化工具庫 245kb 214kb
組件 171kb 157kb
狀態(tài)管理 62kb 60kb
模塊模型 15kb 19kb
服務請求 12kb 4kb
常量 18kb 22kb
工具(Utils) 15kb 19kb
靜態(tài)類型(TypeScript) 0kb 9kb
合計 521kb 509 kb

因為邊重構(gòu)邊在加新功能,且添加了定義TypeScript靜態(tài)類型的代碼,所以總代碼量減少并不多。

不過性能顯著提升,最重要的是代碼可讀性、可維護性大大增強,從而能夠更從容地應對新需求。

感謝你花時間閱讀這篇文章。如果你喜歡這篇文章,歡迎點贊、收藏和分享,讓更多的人看到這篇文章,這也是對我最大的鼓勵和支持!
歡迎Star和訂閱我的原創(chuàng)前端技術(shù)博客。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/105296.html

相關(guān)文章

  • 一次重構(gòu)小博客

    摘要:一直以來都想用自己所想的技術(shù)做一些個人小項目,之前的博客覺從視覺上和交互上得有點小小不滿足,所以想著做一些小小的重構(gòu)。在這里灰常感謝三毛同學和同學,此重構(gòu)博客才可以實現(xiàn)。 一直以來都想用自己所想的技術(shù)做一些個人小項目,之前的博客覺從視覺上和交互上得有點小小不滿足,所以想著做一些小小的重構(gòu)。陸陸續(xù)續(xù)花了兩個多月的時間,原因是工作特別的忙(為自己懶惰找借口),所以知道今天才發(fā)布上線。在這里...

    or0fun 評論0 收藏0
  • 一次低級并嚴重的開發(fā)失誤

    摘要:而這一次的項目,原本以為開發(fā)挺順利的,但是開發(fā)完了,才發(fā)現(xiàn)自己犯了一個低級而嚴重的錯,這樣的一個失誤,我一直耿耿于懷。但是監(jiān)聽用戶退出頁面微信瀏覽器上面的那個返回或者關(guān)閉按鈕卻死活不行。也容易犯一些低級的錯誤。 1.前言 前端從事了超過兩年,修復了無數(shù)的bug,寫了無數(shù)的bug;挖了很多次坑,填了很多次坑;犯了很多次錯,彌補了很多次,學習了很多次。一般而言,對于bug、坑,都是修復完了...

    wudengzan 評論0 收藏0
  • 前端最強面經(jīng)匯總

    摘要:獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼,也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素,方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點個贊,點個star再走哈~ 持續(xù)更新中……,可以關(guān)注下github 項目地址 https:...

    wangjuntytl 評論0 收藏0
  • 一次XX前端面試

    摘要:面試官說那我問你一個哲學的問題,為什么有數(shù)據(jù)結(jié)構(gòu)這種東西哇,這是啥,巴拉巴拉扯了一通,大致就是物以類聚,人以群分,先人積累下來的經(jīng)驗,這些讓我們更方便處理數(shù)據(jù)啥的。 前因,沒有比摸魚有趣的事了 距離自己被外派(俗稱外包)出去,已經(jīng)過了快五個月,工作的話,很閑。人啊,一定保持好的習慣,懶惰是會上癮,日常摸魚,懷疑人生,我是誰,我在哪,我要干什么。 中午吃飯的時候,收到了boss直聘的一條...

    Shisui 評論0 收藏0
  • 技術(shù)甜品店 - 收藏集 - 掘金

    摘要:前端切圖神器前端掘金安裝前端的基礎(chǔ)工作就是把設計師的設計稿還原成前端頁面,所以切圖是作為一個前端的基本技能。 騰訊 Web 工程師的前端書單 - 閱讀 - 掘金作者:link 2014年一月以來,自己接觸web前端開發(fā)已經(jīng)兩年多了,記錄一下自己前端學習路上看過的,以及道聽途說的一些書,基本上按照由淺入深來介紹。 JavaScript 入門 《JavaScript權(quán)威指南(第六版)》 ★...

    Gilbertat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<