如何衡量一我的的 JavaScript 水平？

• 做者：陳大魚頭
• github： KRISACHAN

前言

以前刷知乎的時候，看到這麼一個問題：「如何衡量一我的的 JavaScript 水平？」而後本身也不要臉地回答了一下這個問題。如下是個人答案：

原文以下：

A：看一我的寫代碼是否有規範，代碼是否壯健，是否可拓展，可讀性高不高，API設計是否合理。

這些都是終年累月積累下來的且獨立於編程語言之外的。

遠比把什麼手寫bind，原型鏈，閉包給背下來更有價值。

這纔是證實你代碼水平的關鍵點。

Q：在面試的時候如何快速判斷出呢？

A： 讓面試者設計個組件，不用寫，回答就行。從API設計，文檔編寫，項目結構，單元測試，編寫模式，性能優化等方面來回答。

有工做經驗的人，基本業務邏輯都能寫，可是寫的好很差，就是經驗跟能力以及學習力的體現 。

我的說明

首先來個免責聲明，以上的回答都是我的的經驗與看法，答案確定不惟一，甚至不必定全對，因此求輕噴。

上面問如何在面試的時候快速判斷對方是不是高級前端的時候，我爲何說是「設計組件」呢？

由於我以爲有必定實力的前端來講，「組件」這個概念是繞不過的，或者看過開源組件的源碼，或者本身寫過組件。

對於通常的業務問題，我相信做爲一個從業了必定時間的開發者，不管水平如何，這都不是問題，可是如何區分這個開發者的水平，能夠經過他寫的代碼來判斷，固然也不徹底是，畢竟在996或者趕進度的時候，很容易就會爲了完成快速出產品而寫，這種狀況下代碼質量跟我的水平不必定能體現。

下面，咱們以設計一個「按鈕（<Button>）組件」爲例，來探索這個問題。

首先「按鈕（<Button>）」的做用這個咱們是否明確？它是裝飾性的組件仍是功能性的組件？

這個問題很簡單，「按鈕（<Button>）」是一個功能性的組件，是讓用戶經過點擊或觸碰來採起行動並作出選擇的一個組件。

場景

那麼「按鈕（<Button>）」一般放在什麼地方？有經驗的開發可能會想到如下場景：

• 對話框
• 模態窗口
• 表單
• 卡片
• 工具欄

表明狀態可能會有如下幾種：

• 默認狀態
• 初始狀態
• 信息狀態
• 警告狀態
• 危險狀態

形態可能會有如下幾種：

• 實心按鈕
• 文本按鈕
• 描邊按鈕
• 圖標按鈕
• 圓角按鈕
• 直角按鈕

尺寸可能會有如下幾種：

• small
• medium
• large

操做性可能會有如下幾種：

• 回車鍵點擊
• 鼠標點擊
• 觸摸點擊
• 禁止點擊

攜帶的事件可能有如下兩種：

• click事件
• 回車鍵keydown事件
• tap事件

以上雖然是偏樣式，可是做爲一個組件開發者，這都是咱們平常所須要考慮的。

API

在API的設計環節，咱們經過上述的場景，咱們可能會暴露出如下的API

• type：按鈕狀態
• size：按鈕尺寸
• color：按鈕顏色
• text：按鈕內的文本
• icon：按鈕內的圖標
• htmlType：原生按鈕支持的type屬性
• attrs：其餘的原生屬性
• variant：按鈕形態
• click：鼠標點擊事件
• tap：觸摸屏點擊事件
• keydown：回車鍵按下事件

編寫核心邏輯

在咱們API設計好以後，咱們就能夠開始開發了，這時候根據咱們項目的類型，選擇的開發工具以及模式，可能會有所不一樣。

咱們是獨立編寫仍是直接在項目裏面去編寫，若是是獨立編寫，選擇哪一個打包工具，是gulp仍是webpack仍是其它，爲何這麼選？

例如若是咱們是用TS寫，咱們可能須要編寫Button.d.ts，若是是vue的組件，咱們還得考慮Vue.use注入到Vue中，也就是Button.install(vue)，若是是react，咱們還得考慮是否使用React.forwardRef來進行ref轉發。

而後就是咱們的代碼規範，是用Function仍是Class，共同的代碼塊如何抽象，如何，還有命名規範是什麼，哪些屬性必選，哪些屬性可選，默認值是什麼？我們是怎麼考慮的？

因此最終的組件使用可能會是這種形式：

import Button from './componenet/Button'

<Button htmlType="submit" aria-label="add" variant="contained" color="rgba(17, 82, 147, 1)" click="clickHandler" />添加</Button>
複製代碼

單元測試

在咱們開發的過程當中，有一道麻煩但又必不可少的工序就是單元測試，這時候單元測試的庫咱們是怎麼選？用Jest仍是Mocha？測試用例怎麼寫？如何模擬點擊或者異步響應？是否須要快照（snapshots）？這也是在咱們的考慮範圍內。

因此咱們的測試腳本可能長這樣：

import Button from './componenet/Button'
import { shallow } from 'enzyme'

describe('<Button />', () => {
  it('render success', () => {
    const wrapper = shallow((
      <Button htmlType="submit" aria-label="add" variant="contained" color="rgba(17, 82, 147, 1)" click="clickHandler" />添加</Button>
    ))
    expect(wrapper.text('添加')).to.equal(true)
  })
})
複製代碼

其它

其它的諸如開發文檔，使用文檔，版本迭代，項目配置，打包開發優化，以及其餘自動化的功能，也是咱們所須要考慮。

總結

以上即是咱們在開發一個「按鈕（<Button>）組件」時可能會考慮到的點，可能有不夠完善的地方，可是我想說的意思是，這其實能夠很好的衡量一我的的JavaScript水平。好比你再會手寫原型鏈關係圖，閉包，防抖，節流等基礎概念，可是若是不在項目中運用起來，終究是紙上談兵，對技術水平沒有太多實質的幫助，固然不是說精通這些內容很差，可是比起實戰，仍是差強人意。

能手寫代碼的不必定是高級，可是若是能寫好一個組件，水平再差也不會差到哪裏去。

本文彷佛有點文不對題了，原本談的是「如何衡量一我的的JavaScript水平」，結果卻超綱了許多。可是經過這種方式，確實可以判斷出一我的代碼水平，固然也並不僅是JS，換成安卓，IOS也一樣適用。

後記

若是你喜歡探討技術，或者對本文有任何的意見或建議，很是歡迎加魚頭微信好友一塊兒探討，固然，魚頭也很是但願能跟你一塊兒聊生活，聊愛好，談天說地。 魚頭的微信號是：krisChans95 也能夠掃碼關注公衆號，訂閱更多精彩內容。