站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

VSCode中怎么進(jìn)行前端重構(gòu)?方法淺析

如何使用VSCode進(jìn)行前端重構(gòu)?下面本篇文章給大家介紹一下在VSCode中進(jìn)行前端重構(gòu)的方法,希望對大家有所幫助!

VSCode中怎么進(jìn)行前端重構(gòu)?方法淺析

日常開發(fā)中,我們經(jīng)常會碰到需要重構(gòu)的時(shí)候,VS Code中的 “重構(gòu)” 菜單給我們提供了豐富了的操作??梢詭臀覀兏咝У赝瓿芍貥?gòu)工作。【推薦學(xué)習(xí):《vscode入門教程》】

但是這個(gè)菜單每次提供的操作都不一樣,如果臨時(shí)去使用的話,會帶來一定的困擾。所以常有同學(xué)不敢碰這個(gè)重構(gòu)功能。

在這里,總結(jié)一下常用的一些操作,給大家做做參考。

首先,來一個(gè)常見的重命名,熱熱身!

重命名

為什么要重命名:命名不清晰,無法讓人理解。

操作步驟:

  • 選中變量名,鼠標(biāo)右鍵選擇重命名符號(Rename Symbol),或者使用快捷鍵 F2 ;

  • 彈出框輸入想要修改的名字;

  • VSCode 會把后續(xù)相關(guān)的名字都改掉。

VSCode中怎么進(jìn)行前端重構(gòu)?方法淺析

熱身完畢,下面我們進(jìn)入正題!

重構(gòu)操作

VSCode中怎么進(jìn)行前端重構(gòu)?方法淺析

  • 選中要重構(gòu)的內(nèi)容,鼠標(biāo)右鍵選擇重構(gòu)(Refactor),或者使用 Ctrl + Shift + R

  • 根據(jù)選中的內(nèi)容,可能會出現(xiàn)以下內(nèi)容供選擇重構(gòu):

    • import/export

      • Convert default export to named export
      • Convert named export to default export
      • Convert namespace import to named export
      • Convert named imports to namepace export
    • 函數(shù)/類

      • Move to a new File
    • 變量/表達(dá)式

      • Extract constant
      • 提取到封閉范圍的 constant
      • 提取到 Module 范圍的 constant
      • Convert to optional chain expression
      • 刪除未使用的聲明
      • 在未使用的聲明前
    • 字符串

      • Convert to template string 轉(zhuǎn)換成模板字符串
    • 表達(dá)式/函數(shù)

      • Extract function
      • 提取到當(dāng)前函數(shù)里的 inner function
      • 提取到 Module 范圍的 function
      • 提取到 global 范圍的 function
    • 對象方法

      • generate ‘get’ and ‘set’ accessors 生成get、set處理器
      • generate ‘get’ and ‘set’ accessors 生成get、set處理器
      • 將函數(shù)轉(zhuǎn)換成 ES2015類
      • 將所有函數(shù)轉(zhuǎn)換成類
      • 提取到 class 'xxx' 中的 Method
      • 提取到 class 'xxx' 中的 readonly field

魔法數(shù)字

為什么要修改魔法數(shù)字?因?yàn)槌M(jìn)制數(shù)之外,數(shù)字的實(shí)際意義無法被人看懂。

目標(biāo):定義一個(gè)常量值,寫清楚改數(shù)字的實(shí)際意義。

操作:

  • 選中魔法數(shù)字進(jìn)行重構(gòu)。根據(jù)需要,推薦選擇:

    • 提取到封閉范圍的 constant
    • 提取到 Module/global 范圍的 constant

    兩者都會定義一個(gè)常量,前者定義在當(dāng)前函數(shù)內(nèi),后者則是整個(gè)模塊/文件中;

  • 代碼抽取到新的變量中,并出現(xiàn)重命名的輸入框;

  • 使用全大寫單詞,單詞使用“_”間隔。

例子:今年雙十一持續(xù)13天,計(jì)算除雙十一促銷結(jié)束的時(shí)間。

function promotionEndDate() {   return new Date(new Date('2022-11-11').getTime() + 13 * 60 * 60 * 24 * 1000); }  /**  * 修改后:  * 將開始時(shí)間 START_DATE,持續(xù)的天數(shù) LASTING_DAYS 抽取出來做成變量  * 如果只有一處使用,則在使用到的函數(shù)內(nèi)定義;  * 如果多處都有用,可以考慮放在函數(shù)外,模塊內(nèi)。  */ function promotionEndDate() {     const START_DATE = '2022-11-11';     const LASTING_DAYS = 13;     return new Date(new Date(START_DATE).getTime() + LASTING_DAYS * 60 * 60 * 24 * 1000); }

復(fù)雜的邏輯條件

為什么要修改復(fù)雜邏輯?復(fù)雜的邏輯,往往條件判斷繁多,閱讀難度比較高。

操作:

  • 選中復(fù)雜的邏輯條件進(jìn)行重構(gòu)。根據(jù)需要,選擇:

    • 提取到封閉范圍的 constant
    • 提取到當(dāng)前函數(shù)里的 inner function
    • 提取到 Module/global 范圍的 function
  • 代碼抽離到一個(gè)新的變量/函數(shù)中,并出現(xiàn)重命名的輸入框;

  • 使用駝峰命名,使用 is/has 起頭,每個(gè)單詞首字母大寫。

例子:返回指定的某個(gè)月有多少天

function monthDay(year, month) {     var day31 = [1, 3, 5, 7, 8, 10, 12];     var day30 = [4, 6, 9, 11];     if (day31.indexOf(month) > -1) {         return 31;     } else if (day30.indexOf(month) > -1) {         return 30;     } else {         if ((year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) {             return 29;         } else {             return 28;         }     } }  /**  * 修改后  * 是否閏年在日期處理函數(shù)中會經(jīng)常使用,所以將其提取到當(dāng)前模塊的最外層了  */ function monthDay(year, month) {     ...     if (day31.indexOf(month) > -1) {         return 31;     } else if (day30.indexOf(month) > -1) {         return 30;     } else {         if (isLeapYear(year)) {             return 29;         } else {             return 28;         }     } }  function isLeapYear(year) {     return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0); }

寫了注釋的代碼片段

更推薦代碼即注釋的理念。我們寫注釋之前要想明白為什么需要注釋?

  • 如果代碼本身已經(jīng)很清晰,應(yīng)該刪除注釋。
  • 如果抽取代碼片段,取個(gè)合適的名字,能讓代碼易于閱讀,也可以刪除注釋。

目標(biāo):將代碼片段抽取出來做成函數(shù),函數(shù)以此代碼塊的具體功能做命名。

操作:

  • 選擇代碼塊,重構(gòu)(Refactor)。選擇:

    • 提取到當(dāng)前函數(shù)里的 inner function

例子:ajax 請求

function ajax(options) {   options = options || {};   options.type = (options.type || 'GET').toUpperCase();   options.dataType = options.dataType || 'json';   const READY_STATE = 4;   const NET_STATUS = {     OK: 200,     RIDERCT: 300   };   const params = this.formatAjaxParams(options.data);   let xhr;    // 創(chuàng)建 - 非IE6 - 第一步   if (window.XMLHttpRequest) {     xhr = new window.XMLHttpRequest();   } else { // IE6及其以下版本瀏覽器     xhr = new window.ActiveXObject('Microsoft.XMLHTTP');   }    // 連接 和 發(fā)送 - 第二步   if (options.type === 'GET') {     ...   } else if (options.type === 'POST') {     ...   }      // 接收 - 第三步   xhr.onreadystatechange = function () {     if (xhr.readyState === READY_STATE) {       ...     }   }; }  // 修改后 function ajax(options) {   ...   let xhr;    create();   connectAndSend();   recieve();    function create() {...}   function connectAndSend() {...}   function recieve() {...} }

過長的函數(shù)

功能拆分做成外部函數(shù),再在內(nèi)部調(diào)用。

操作:

  • 選擇代碼塊重構(gòu),選擇:

    • 提取到 Module/Global 范圍的 function
  • 代碼塊會生成一個(gè)函數(shù),并攜帶必要的參數(shù)

例子:上個(gè)例子中,可以將 ajax 的接收模塊獨(dú)立成模塊的function

function ajax(options) {   ...    create();   recieve();   connectAndSend(options, xhr, params); } function connectAndSend(options, xhr, params) {   if (options.type === 'GET') {     ...   } else if (options.type === 'POST') {     ...   } }

重復(fù)的代碼/過長的文件

操作:

  • 選擇代碼塊重構(gòu),選擇 Move to a new file;

  • 代碼會遷移到以當(dāng)前函數(shù)/類作為文件名的文件中;如果有多個(gè)類/函數(shù),會以第一個(gè)類/函數(shù)做命明

  • 將函數(shù)/類使用 export 暴露出去;

  • 在原文件中用 import 引入函數(shù)/類。

例子:日期處理函數(shù):

VSCode中怎么進(jìn)行前端重構(gòu)?方法淺析

移動(dòng)到新文件后:

VSCode中怎么進(jìn)行前端重構(gòu)?方法淺析

index.js 中,還能跳轉(zhuǎn)到定義的代碼,但是實(shí)際上并沒有引入。

VSCode中怎么進(jìn)行前端重構(gòu)?方法淺析

重命名,修復(fù) import/export;

VSCode中怎么進(jìn)行前端重構(gòu)?方法淺析

import/export

default 和命名、命名空間和命名的轉(zhuǎn)換。

// named export function nextMonthDay(year, month) {}  // default export default function nextMonthDay(year, month) {}  // namepace  import * as refactor from './refactor';  // named import { nextMonthDay } from './refactor';

對象方法

生成get、set處理器

const person = {   age: 32 };  // 生成get、set處理器 const person = {   _age: 32,   get age() {     return this._age;   },   set age(value) {     this._age = value;   }, };

模板字符串

字符串拼接,快速轉(zhuǎn)換成模板字符串:

class Person{   constructor(firstName, lastName) {     this.firstName = firstName;     this.lastName = lastName;   }   getFullName() {     return this.firstName + ' ' + this.lastName;   } }  // 模板字符串 class Person{   constructor(firstName, lastName) {     this.firstName = firstName;     this.lastName = lastName;   }   getFullName() {     return `${this.firstName} ${this.lastName}`;   } }

生成get、set處理器,與對象方法的結(jié)果類似。

提取到 class xxx 的 Method, 與上面寫注釋的代碼、重復(fù)代碼提取的類似。

在此不再復(fù)述。

提供 ES 2015 類轉(zhuǎn)換,支持原型方法轉(zhuǎn)換。

const Person = function() {   this.age = 32; }; Person.prototype.getAge = function() {   return this.age; } Person.prototype.setAge = function(value) {   return this.age = value; }  // ES 2015 類 class Person {   constructor() {     this.age = 32;   }   getAge() {     return this.age;   }   setAge(value) {     return this.age = value;   } }

總結(jié)

重構(gòu)代碼的方法還有很多,這里暫時(shí)列了一些。希望對大家有所幫助。

剩下的內(nèi)容,大家可以在重構(gòu)代碼時(shí),多點(diǎn)點(diǎn)這個(gè)重構(gòu)菜單,看看是否有驚喜。

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
91精品国产自产在线观看高清| 99热在线精品播放| 精品无码国产污污污免费网站| 91精品国产福利在线导航| 成人国产精品一区二区网站公司| 华人在线精品免费观看| 国产产在线精品亚洲AAVV| 99ri精品国产亚洲| 亚洲国产精品乱码一区二区| 精品人妻一区二区三区四区在线| 久九九精品免费视频| 亚洲精品你懂的在线观看| 国产精品久久久久久久网站| 精品久久久久久综合日本| 久久人搡人人玩人妻精品首页| 国产成人精品三级麻豆| 久久久久亚洲精品日久生情| 国产精品亚洲精品日韩电影| 国产香蕉久久精品综合网| 91在线精品亚洲一区二区| 久久99国产精品| 精品第一国产综合精品蜜芽| 色欲国产麻豆一精品一AV一免费 | 国产精品毛片久久久久久久| 中文字幕精品1在线| 国产成人亚洲精品91专区高清| 麻豆精品无码国产在线果冻| 久久精品国产亚洲av四虎| 日韩免费观看的一级毛片| 亚洲毛片av日韩av无码| 97香蕉久久夜色精品国产| 久久精品中文字幕第一页| 国产在线精品无码二区 | 国产在线精品国自产拍影院 | 久久精品99久久香蕉国产| 久久99精品久久久久久青青日本| 综合国产精品第一页| 日韩精品无码免费专区网站| 欧美日韩一区二区成人午夜电影| 欧美交A欧美精品喷水| 亚洲精品国产高清在线观看|