站長資訊網(wǎng)

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



	


	

	

				

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

			
                          

				2022-03-24
												分類：編程知識
				閱讀(613)				評論(0)
				
			

		

				

						
如何使用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)




		
		
標(biāo)簽：

		
		
		            
        
									

	

	




	網(wǎng)站地圖  
  
    滬ICP備18035694號-2
    
	滬公網(wǎng)安備31011702889846號




国产亚洲精品自在线观看|
日韩视频在线一区|
亚洲国产日产无码精品|
久久精品国产99久久|
99久久成人国产精品免费|
亚洲精品WWW久久久久久|
日韩av片无码一区二区不卡电影|
国产精品日韩专区|
大香视频伊人精品75|
香蕉久久丫精品忘忧草产品|
久久这里只精品99re66|
2021最新国产精品网站|
亚洲国产成人精品无码一区二区
|
网友偷拍日韩精品|
麻豆国产96在线日韩麻豆|
日韩人妻激情制服丝袜另类|
国产成人精品无码专区|
国产精品538一区二区在线|
国产成人久久精品亚洲小说|
国产精品综合一区二区|
日本精品卡一卡2卡三卡|
日韩精品久久不卡中文字幕|
国内精品久久久久影院蜜芽|
日本精品一区二区在线播放|
国产色婷婷精品免费视频|
国产精品亚洲色婷婷99久久精品|
国产精品视频免费一区二区三区
|
中文字幕在线视频精品
|
日韩欧美亚洲国产精品字幕久久久|
国产精品一二三区|
国产亚洲精品影视在线|
中文字幕亚洲精品无码|
青青草原综合久久大伊人精品|
久久久久久精品久久久|
午夜精品福利在线|
国产精品亚洲二区在线|
日韩亚洲国产综合久久久|
日韩欧群交P片内射中文|
精品一区二区三区无码免费直播|
亚洲欧洲久久久精品|
精品久久久久久99人妻|