本篇內(nèi)容主要講解“JavaScript中常見的反模式是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript中常見的反模式是什么”吧!
硬編碼
硬編碼（Hard-Coding）的字符串、數(shù)字、日期…… 所有能寫死的東西都會(huì)被人寫死。 這是一個(gè)婦孺皆知的反模式，同時(shí)也是最廣泛使用的反模式。 硬編碼中最為典型的大概是 平臺(tái)相關(guān)代碼（Platform-Related）， 這是指特定的機(jī)器或環(huán)境下才可以正常運(yùn)行的代碼， 可能是只在你的機(jī)器上可以運(yùn)行，也可能是只在 Windows 下可以運(yùn)行。
例如在 npm script 中寫死腳本路徑 /Users/harttle/bin/fis3， 原因可能是安裝一次非常困難，可能是為了避免重復(fù)安裝，也可能僅僅是因?yàn)檫@樣好使。 不管怎樣，這會(huì)讓所有同事來找你問“為什么我這里會(huì)報(bào)錯(cuò)”。 解決辦法就是把它放到依賴管理，如果有特定的版本要求可以使用 package-lock，如果實(shí)在搞不定可以視為外部依賴可以放到本地配置文件并從版本控制（比如 Git） 移除。
例如在 cli 工具中寫死特殊文件夾 /tmp, ~/.cache，或者路徑分隔符 \\ 或 /。 這類字符串一般可以通過 Node.js 內(nèi)置模塊（或其他運(yùn)行時(shí) API）來得到， 比如使用 os.homedir, os.tmpdir, path.sep 等。
重復(fù)代碼
重復(fù)代碼（Duplication）在業(yè)務(wù)代碼中尤為常見，初衷幾乎都是維護(hù)業(yè)務(wù)的穩(wěn)定性。 舉個(gè)例子：在頁(yè)面 A 中需要一個(gè)漂亮的搜索框，而頁(yè)面 B 中恰好有一個(gè)。 這時(shí)程序員小哥面臨一個(gè)艱難的選擇（如果直接拷貝還會(huì)有些許感到不安的話）：
把 B 拷貝一份，改成 A 想要的樣子。
把 B 中的搜索框重構(gòu)到 C，B 和 A 引用這份代碼。
由于時(shí)間緊迫希望早點(diǎn)下班，或者由于改壞 B 需要承擔(dān)責(zé)任 （PM：讓你做 A 為啥 B 壞了？回答這個(gè)問題比較復(fù)雜，這里先跳過）， 經(jīng)過一番思考后決定采取方案 2。
至此整個(gè)故事進(jìn)行地很自然也很順利，這大概就是重復(fù)代碼被廣泛使用的原因。 這個(gè)故事中有幾點(diǎn)需要質(zhì)疑：
B 這么容易被改壞，說明 B 的作者 并未考慮復(fù)用。這時(shí)不應(yīng)復(fù)用 B 的代碼，除非決定接手維護(hù)它。
B 改壞的責(zé)任不止程序員小哥：B 的作者是否有 編寫測(cè)試，測(cè)試人員是否 回歸測(cè)試 B 頁(yè)面？
時(shí)間緊迫不必然導(dǎo)致反模式的出現(xiàn)，不可作為說服自己的原因。短期方案也存在優(yōu)雅實(shí)現(xiàn)。
解決辦法就是：抽取 B 的代碼重新開發(fā)形成搜索框組件 C，在 A 頁(yè)面使用它。 同時(shí)提供給日后的小伙伴使用，包括敦促 B 的作者也遷移到 C 統(tǒng)一維護(hù)。
假 AMD
模塊化本意是指把軟件的各功能分離到獨(dú)立的模塊中，每個(gè)模塊包含完整的一個(gè)細(xì)分功能。 在 JavaScript 中則是特指把腳本切分為獨(dú)立上下文的，可復(fù)用的代碼單元。
由于 JavaScript 最初作為頁(yè)面腳本，存在很多引用全局作用域的語(yǔ)法，以及不少基于全局變量的實(shí)踐方式。 比如 jQuery 的 $, BOM 提供的 window，省略 var 來定義變量等。 AMD 是 JavaScript 社區(qū)較早的模塊化規(guī)范。這是一個(gè)君子協(xié)定，問題就出在這里。 有無數(shù)種方式寫出假的 AMD 模塊：
沒有返回值。對(duì)，要的就是副作用。
define 后直接 require。對(duì)，要的就是立即執(zhí)行。
產(chǎn)生副作用。修改 window 或其他共享變量，比如其他模塊的靜態(tài)屬性。
并發(fā)問題。依賴關(guān)系不明容易引發(fā)并發(fā)問題。
全局副作用的影響完全等同于全局變量，幾乎有全局變量的所有缺點(diǎn)： 執(zhí)行邏輯不容易理解；隱式的耦合關(guān)系；編寫測(cè)試?yán)щy。下面來一個(gè)具體的例子：
// file: login.js define('login', function () { fetch('/account/login').then(x => { window.login = true }) }) require(['login']) |
這個(gè) AMD 模塊與直接寫在一個(gè)
重慶分公司
重慶分公司