建站
咨詢
售后
建站咨詢
新聞中心
JavaScript 是一種易于學(xué)習(xí)的編程語(yǔ)言，編寫(xiě)運(yùn)行并執(zhí)行某些操作的程序很容易。然而，要編寫(xiě)一段干凈的JavaScript 代碼是很困難的。
10年的楊浦網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整楊浦建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“楊浦網(wǎng)站設(shè)計(jì)”,“楊浦網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
在本文中，我們將介紹一些優(yōu)化 JS 類(lèi)和對(duì)象的重構(gòu)思路。
用常量來(lái)表示數(shù)字
如果我們有很多重復(fù)的值且表示一樣的含義，但沒(méi)有明確地說(shuō)明，那么我們應(yīng)該將它們轉(zhuǎn)換為常量，以便每個(gè)人都知道它們的含義，并且如果需要更改，我們只需更改一個(gè)地方就行了。
例如我們可能會(huì)這樣寫(xiě)代碼：
- const getWeight = (mass) => mass * 9.81
- const potentialEnergy = (mass, height) => mass * height * 9.81
對(duì)于含義相同的數(shù)學(xué)我可以用常量表示：
- const GRAVITATIONAL_CONSTANT = 9.81;
- const getWeight = (mass) => mass * GRAVITATIONAL_CONSTANT
- const potentialEnergy = (mass, height) => mass * height * GRAVITATIONAL_CONSTANT
現(xiàn)在我們知道9.81實(shí)際上意味著GRAVITATIONAL_CONSTANT，我們不必重復(fù)自己。
上面我們用常量 GRAVITATIONAL_CONSTANT 表示 9.81 ，這樣別人一看就知道它表示是萬(wàn)有引力常數(shù)常量。
封裝字段
我們可以將getter和setter添加到類(lèi)的字段中，這樣就不心直接對(duì)類(lèi)的字段進(jìn)行操作。
例如我們可能會(huì)這樣寫(xiě)代碼：
- class Person {
- constructor(name) {
- this.name = name;
- }
- }
如果要控制如何設(shè)置值，可以這樣重構(gòu)：
- class Person {
- constructor(name) {
- this._name = name
- }
- get name() {
- return this._name
- }
- set name() {
- this._name = name
- }
- }
這樣，我們就可以控制如何設(shè)置值，因?yàn)槲覀兛梢栽趕etter中放入代碼來(lái)設(shè)置名稱。我們還可以控制誰(shuí)能獲得名稱，因?yàn)樗窃趃etter中返回的。
用數(shù)組類(lèi)代替字段
我們可以將字段替換為其自己的數(shù)據(jù)類(lèi)，這樣在記錄數(shù)據(jù)中會(huì)有更強(qiáng)靈活性。
例如我們可能會(huì)這樣寫(xiě)代碼：
- class Person {
- constructor(name, bloodGroup) {
- this.name = name;
- this.bloodGroup = bloodGroup;
- }
- }
- const person = new Person('joe', 'a')
如果我們想擴(kuò)充 bloodGroup (血型)的種類(lèi)，我們可以把 bloodGroup 重構(gòu)成一個(gè)類(lèi)。
- class BloodGroup {
- constructor(name) {
- this.bloodGroup = name;
- }
- }
- class Person {
- constructor(name, bloodGroup) {
- this.name = name;
- this.bloodGroup = bloodGroup;
- }
- }
- const bloodGroup = new BloodGroup('a');
- const person = new Person('joe', bloodGroup)
這樣，我們就可以在bloodGroup字段中存儲(chǔ)更多種類(lèi)的數(shù)據(jù)。
用狀態(tài)/策略替換類(lèi)型代碼
有時(shí)，我們可以根據(jù)對(duì)象的類(lèi)型創(chuàng)建子類(lèi)，而不是在類(lèi)中使用類(lèi)型字段。這樣，我們就可以在它們自己的子類(lèi)中擁有兩個(gè)類(lèi)不共享的更多成員。
例如我們可能會(huì)這樣寫(xiě)代碼：
- class Animal {
- constructor (type) {
- this.type = type
- }
- }
- const cat = new Animal('cat')
- const dog = new Animal('dog')
我們可以根據(jù) type 類(lèi)型來(lái)重構(gòu)對(duì)應(yīng)的類(lèi)：
- class Animal {
- //...
- }
- class Cat extends Animal {
- //...
- }
- class Dog extends Animal {
- //...
- }
- const cat = new Cat();
- const dog = new Dog();
在上面的示例中，我們單獨(dú)編寫(xiě)一個(gè)Animal類(lèi)，而另外添加Cat和Dog類(lèi)，它們是Animal類(lèi)的子類(lèi)。
這樣我們可以 Cat 和 Dog 類(lèi)中共享的屬性保存在各自的類(lèi)的，把共享的放在 Animal 類(lèi)中。
分解條件表達(dá)式
我們可以將長(zhǎng)的條件表達(dá)式分解為更小的條件表達(dá)式。
例如我們可能會(huì)這樣寫(xiě)代碼：
- let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")
我們可以這樣重構(gòu)它：
- let userAgent = navigator.userAgent.toLowerCase();
- let isMac = userAgent.includes("mac");
- let isIE = userAgent.toLowerCase().includes("ie");
- let isMacisMacIE = isMac && isIE;
我們將冗長(zhǎng)又難懂的條件表達(dá)式分解多個(gè)短小表達(dá)式，這樣會(huì)大大滴增加閱讀性。
總結(jié)
如果我們有很多重復(fù)的值且表示一樣的含義，但沒(méi)有明確地說(shuō)明，那么我們應(yīng)該將它們轉(zhuǎn)換為常量，以便每個(gè)人都知道它們的含義，并且如果需要更改，我們只需更改一個(gè)地方就行了。
為了更好控制類(lèi)的屬性，我們可以為它添加getter和setter方法。
如果我們有type字段，則可以用它們自己的子類(lèi)替換它們。
最后，我們可以將長(zhǎng)條件表達(dá)式分解為較小的條件表達(dá)式，以便于閱讀和理解。
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
文章題目：JavaScript重構(gòu)技巧—對(duì)象和值
網(wǎng)站路徑：http://m.5511xx.com/article/dhgjheh.html
