国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js 的5個(gè)不良編碼習(xí)慣,現(xiàn)在就改掉吧

flybywind / 1870人閱讀

摘要:在這篇文章中,我描述了中常見的種不良編碼習(xí)慣。這是因?yàn)閷傩源嬖诘尿?yàn)證依賴于隱式轉(zhuǎn)換的布爾值。安裝使用最適合自己的編碼風(fēng)格配置設(shè)置一個(gè)預(yù)提交鉤子,在提交之前運(yùn)行驗(yàn)證。總結(jié)編寫高質(zhì)量和干凈的代碼需要紀(jì)律,克服不好的編碼習(xí)慣。

為了保證的可讀性,本文采用意譯而非直譯。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你!

在閱讀JavaScript代碼時(shí),你是否有過這種感覺

你幾乎不明白代碼的作用?

代碼使用了很多 JavaScript 技巧?

命名和編碼風(fēng)格太過隨意?

這些都是不良編碼習(xí)慣的征兆。

在這篇文章中,我描述了JavaScript中常見的5種不良編碼習(xí)慣。重要的是,本文會給出一些可行的建議,如何的擺脫擺脫這些習(xí)慣。

1.不要使用隱式類型轉(zhuǎn)換

JavaScript是一種松散類型的語言。 如果使用得當(dāng),這是一個(gè)好處,因?yàn)樗o你帶來了靈活性。

大多數(shù)運(yùn)算符+ - * / ==(不包括 ===)在處理不同類型的操作數(shù)時(shí)會進(jìn)行隱式轉(zhuǎn)換。

語句if(condition){...}while(condition){...}隱式地將條件轉(zhuǎn)換為布爾值。

下面的示例依賴于類型的隱式轉(zhuǎn)換,這種有時(shí)候會讓人感到很困惑:

console.log("2" + "1");  // => "21"
console.log("2" - "1");  // => 1

console.log("" == 0);    // => true

console.log(true == []); // -> false
console.log(true == ![]); // -> false

過度依賴隱式類型轉(zhuǎn)換是一個(gè)壞習(xí)慣。 首先,它使你的代碼在邊緣情況下不太穩(wěn)定。 其次,增加了引入難以重現(xiàn)和修復(fù)的bug的機(jī)會。

現(xiàn)在咱們實(shí)現(xiàn)一個(gè)獲取對象屬性的函數(shù)。如果屬性不存在,函數(shù)返回一個(gè)默認(rèn)值

function getProp(object, propertyName, defaultValue) {
  if (!object[propertyName]) {
    return defaultValue;
  }
  return object[propertyName];
}

const hero = {
  name: "Batman",
  isVillian: false
};

console.log(getProp(hero, "name", "Unknown"));     // => "Batman"

getProp() 讀取name屬性的值,即"Batman"

那么試圖訪問isVillian屬性:

console.log(getProp(hero, "isVillian", true)); // => true

這是一個(gè)錯(cuò)誤。即使 hero 的屬性isVillianfalse,函數(shù)getProp()也會返回錯(cuò)誤的true

這是因?yàn)閷傩源嬖诘尿?yàn)證依賴于if(!object [propertyName]){...}隱式轉(zhuǎn)換的布爾值。

這些錯(cuò)誤很難發(fā)現(xiàn),要修復(fù)該函數(shù),就要明確驗(yàn)證值的類型:

function getPropFixed(object, propertyName, defaultValue) {
   if (object[propertyName] === undefined) {
     return defaultValue;
   }
   return object[propertyName];
}

const hero = {
  name: "Batman",
  isVillian: false
};

console.log(getPropFixed(hero, "isVillian", true)); // => false

object[propertyName] === undefined確切地驗(yàn)證屬性是否為undefined

這里建議避免直接使用undefined。 因此,上述解決方案可以進(jìn)一步改進(jìn):

function getPropFixedBetter(object, propertyName, defaultValue) {
  if (!(propertyName in object)) {
    return defaultValue;
  }
  return object[propertyName]
}

原諒作者建議是:盡可能不要使用隱式類型轉(zhuǎn)換。相反,請確保變量和函數(shù)參數(shù)始終具有相同的類型,必要時(shí)使用顯式類型轉(zhuǎn)換。

最佳實(shí)踐列表:

始終使用嚴(yán)格的相等運(yùn)算符===進(jìn)行比較

不要使用松散等式運(yùn)算符==

加法運(yùn)算符 operand1 + operand2:兩個(gè)操作數(shù)應(yīng)該是數(shù)字或字符串

算術(shù)運(yùn)算符 - * /%**:兩個(gè)操作數(shù)都應(yīng)該是數(shù)字

if(condition){...}while(condition){...}等語句:condition 必須是一個(gè)布爾類型值

你可能會說這種方式需要編寫更多代碼......你是對的! 但是通過明確的方法,可以控制代碼的行為。 此外,顯性提高了可讀性。

2. 不要使用早期的JavaScript技巧

JavaScript的有趣之處在于,它的創(chuàng)建者沒有料到這種語言會如此流行。

基于JavaScript構(gòu)建的應(yīng)用程序的復(fù)雜性比語言發(fā)展的速度還要快。這種情況迫使開發(fā)人員使用JavaScript技巧和變通方法,只是為了讓事情正常運(yùn)行。

一個(gè)典型的例子是查看數(shù)組是否包含某個(gè)元素。 我從來不喜歡使用array.indexOf(item)!== -1來檢查。

ES6 及以后版本的功能要強(qiáng)大得多,可以使用新的語言特性安全地重構(gòu)許多技巧。

ES6 中可以使用 array.includes(item) 來代替 array.indexOf(item) !== -1

3. 不要污染函數(shù)作用域

在ES2015之前,你可能會養(yǎng)成了將所有變量聲明在函數(shù)作用域里面。

來看看一個(gè)例子:

function someFunc(array) {
  var index, item, length = array.length;
  /*
   * Lots of code
   */
  for (index = 0; index < length; index++) {
    item = array[index];
    // Use `item`
  }
  return someResult;
}

變量index、itemlength 在函數(shù)作用域內(nèi)。但是這些變量會影響函數(shù)作用域,因?yàn)樗鼈冎辉?b>for()塊作用域內(nèi)才被需要。

通過引入具有塊作用域 letconst,應(yīng)該盡可能地限制變量的生命周期。

function someFunc(array) {
  /*
   * Lots of code
   */
  const length = array.length;
  for (let index = 0; index < length; index++) {
    const item = array[index];
    // Use `item`
  }
  return someResult;
}

indexitem 變量被限制為for()循環(huán)塊作用域。length 被移動到使用地方的附近。

重構(gòu)后的代碼更容易理解,因?yàn)樽兞坎粫稚⒃谡麄€(gè)函數(shù)作用域內(nèi),它們存在于使用地方的附近。

在使用的塊作用域定義變量

if 塊作用域
// 不好
let message;
// ...
if (notFound) {
  message = "Item not found";
  // Use `message`
}

// 好
if (notFound) {
  const message = "Item not found";
  // Use `message`
}
for 塊作用域
// 不好
let item;
for (item of array) {
  // Use `item`
}

// 好
for (const item of array) {
  // Use `item`
}
4.盡量避免 undefined 和 null

未賦值的變量默認(rèn)被賦值為undefined。例如

let count;
console.log(count); // => undefined

const hero = {
  name: "Batman"
};
console.log(hero.city); // => undefined

count變量已定義,但尚未使用值初始化。 JavaScript隱式賦值給它undefined

訪問不存在的屬性hero.city時(shí),也會返回undefined

為什么直接使用undefined是一個(gè)不好習(xí)慣? 因?yàn)榕cundefined進(jìn)行比較時(shí),你正在處理未初始化狀態(tài)的變量。

變量、對象屬性和數(shù)組在使用前必須用值初始化

JS 提供了很多避免與undefined進(jìn)行比較方式。

判斷屬性是否存在
// 不好
const object = {
  prop: "value"
};
if (object.nonExistingProp === undefined) {
  // ...
}

// 好
const object = {
  prop: "value"
};
if ("nonExistingProp" in object) {
  // ...
}
對象的默認(rèn)屬性
// 不好
function foo(options) {
  if (object.optionalProp1 === undefined) {
    object.optionalProp1 = "Default value 1";
  }
  // ...
}

// 好
function foo(options) {
  const defaultProps = {
    optionalProp1: "Default value 1"
  };
  options = {
    ...defaultProps,
    ...options
  }
}

默認(rèn)函數(shù)參數(shù)
// 不好
function foo(param1, param2) {
  if (param2 === undefined) {
    param2 = "Some default value";
  }
  // ...
}
// 好
function foo(param1, param2 = "Some default value") {
  // ...
}

null是一個(gè)缺失對象的指示符。應(yīng)該盡量避免從函數(shù)返回 null,特別是使用null作為參數(shù)調(diào)用函數(shù)。

一旦null出現(xiàn)在調(diào)用堆棧中,就必須在每個(gè)可能訪問null的函數(shù)中檢查它的存在,這很容易出錯(cuò)。

function bar(something) {
  if (something) {
    return foo({ value: "Some value" });
  } else {
    return foo(null);
  }
}

function foo(options) {
  let value = null;
  if (options !== null) {
    value = options.value;
    // ...
  }
  return value;
}

嘗試編寫不涉及null的代碼。 可替代方法是try /catch機(jī)制,默認(rèn)對象的使用。

5. 不要使用隨意的編碼風(fēng)格,執(zhí)行一個(gè)標(biāo)準(zhǔn)

有什么比閱讀具有隨機(jī)編碼風(fēng)格的代碼更令人生畏的事情? 你永遠(yuǎn)不知道會發(fā)生什么!

如果代碼庫包含許多開發(fā)人員的不同編碼風(fēng)格,該怎么辦?,這種就像各色人物涂鴉墻。

整個(gè)團(tuán)隊(duì)和應(yīng)用程序代碼庫都需要相同的編碼風(fēng)格,它提高了代碼的可讀性。

一些有用的編碼風(fēng)格的例子:

Airbnb JS 風(fēng)格指南

谷歌 JS 風(fēng)格指南

老實(shí)說,當(dāng)我在回家前準(zhǔn)備提交時(shí),我可能會忘記設(shè)計(jì)代碼的樣式。

我自己總說:保持代碼不變,以后再更新它,但是“以后”意味著永遠(yuǎn)不會。

這里建議使用 eslint 來規(guī)范編碼風(fēng)格。

安裝eslint

使用最適合自己的編碼風(fēng)格配置 eslint

設(shè)置一個(gè)預(yù)提交鉤子,在提交之前運(yùn)行eslint驗(yàn)證。

總結(jié)

編寫高質(zhì)量和干凈的代碼需要紀(jì)律,克服不好的編碼習(xí)慣。

JavaScript是一種寬容的語言,具有很大的靈活性。但是你必須注意你所使用的特性。這里建議是避免使用隱式類型轉(zhuǎn)換,undefinednull

現(xiàn)在這種語言發(fā)展得相當(dāng)快。找出復(fù)雜的代碼,并使用最新 JS 特性來重構(gòu)。

整個(gè)代碼庫的一致編碼風(fēng)格有益于可讀性。良好的編程技能總是一個(gè)雙贏的解決方案。

交流

干貨系列文章匯總?cè)缦拢X得不錯(cuò)點(diǎn)個(gè)Star,歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智,公眾號「大遷世界」作者,對前端技術(shù)保持學(xué)習(xí)愛好者。我會經(jīng)常分享自己所學(xué)所看的干貨,在進(jìn)階的路上,共勉!

關(guān)注公眾號,后臺回復(fù)福利,即可看到福利,你懂的。

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/75634.html

相關(guān)文章

  • js 5個(gè)不良編碼習(xí)慣現(xiàn)在改掉

    摘要:在這篇文章中,我描述了中常見的種不良編碼習(xí)慣。這是因?yàn)閷傩源嬖诘尿?yàn)證依賴于隱式轉(zhuǎn)換的布爾值。安裝使用最適合自己的編碼風(fēng)格配置設(shè)置一個(gè)預(yù)提交鉤子,在提交之前運(yùn)行驗(yàn)證。總結(jié)編寫高質(zhì)量和干凈的代碼需要紀(jì)律,克服不好的編碼習(xí)慣。 為了保證的可讀性,本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 在閱讀JavaScript代碼時(shí),你是否有過這種感覺 ...

    hellowoody 評論0 收藏0
  • 從編程到養(yǎng)生編程

    摘要:年月日,正式開始了前端編程生涯,距今恰好一年。關(guān)注的話題卻不再是純粹的編程,而是從編程變成了養(yǎng)生編程,畢竟生活不能只有代碼,還有健康家庭和未來。編程本就是份高危行業(yè),的風(fēng)波影響至今猶在。2018 年 5 月 2 日,jsliang 正式開始了前端編程生涯,距今恰好一年。 關(guān)注的話題卻不再是純粹的編程,而是從編程變成了養(yǎng)生編程,畢竟生活不能只有代碼,還有健康、家庭和未來。 一 目錄 目錄...

    Java3y 評論0 收藏0
  • 用現(xiàn)代化方式開發(fā)一個(gè)圖片上傳工具

    摘要:對于圖片上傳,大家一定不陌生。項(xiàng)目地址一環(huán)境搭建本項(xiàng)目使用目前最新的和進(jìn)行開發(fā),所以環(huán)境的搭建必不可少。在目錄下新建代碼內(nèi)容只有行,其輸入為一個(gè)圖片文件,輸出為一串編碼。同樣的方式,我們可以為也設(shè)置一個(gè)代理數(shù)組,以實(shí)現(xiàn)向外拋出數(shù)組的目的。 對于圖片上傳,大家一定不陌生。最近工作中遇到了關(guān)于圖片上傳的內(nèi)容,借此機(jī)會認(rèn)真研究了一番,遂一發(fā)不可收拾,最后琢磨了一個(gè)東西出來。在開發(fā)的過程中有不...

    beanlam 評論0 收藏0

發(fā)表評論

0條評論

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