想了解javascript好不好嗎？想了解如何衡量一個(gè)人的 JavaScript 水平？?? 嗎？......本文帶你一探究竟。

1.如何衡量一個(gè)人的 JavaScript 水平？

之前刷知乎的時(shí)候，看到這么一個(gè)問(wèn)題：如何衡量一個(gè)人的水平？然后自己也不要臉地回答了一下這個(gè)問(wèn)題。以下是我的答案：原文如下：A：看一個(gè)人寫(xiě)代碼是否有規范，代碼是否壯健，是否可拓展，可讀性高不高，API設計是否合理。這些都是長(cháng)年累月積累下來(lái)的且獨立于編程語(yǔ)言以外的。遠比把什么手寫(xiě)bind，原型鏈，閉包給背下來(lái)更有價(jià)值。這才是證明你代碼水平的關(guān)鍵點(diǎn)。Q：在面試的時(shí)候如何快速判斷出呢？A： 讓面試者設計個(gè)組件，不用寫(xiě)，回答就行。從API設計，文檔編寫(xiě)，項目結構，單元測試，編寫(xiě)模式，性能優(yōu)化等方面來(lái)回答。有工作經(jīng)驗的人，基本業(yè)務(wù)邏輯都能寫(xiě)，但是寫(xiě)的好不好，就是經(jīng)驗跟能力以及學(xué)習力的體現 。個(gè)人說(shuō)明首先來(lái)個(gè)免責聲明，以上的回答都是個(gè)人的經(jīng)驗與見(jiàn)解，答案肯定不*，甚至不一定全對，所以求輕噴。上面問(wèn)如何在面試的時(shí)候快速判斷對方是否是高級前端的時(shí)候，我為什么說(shuō)是“設計組件”呢？因為我覺(jué)得有一定實(shí)力的前端來(lái)說(shuō)，“組件”這個(gè)概念是繞不過(guò)的，或者看過(guò)開(kāi)源組件的源碼，或者自己寫(xiě)過(guò)組件。對于一般的業(yè)務(wù)問(wèn)題，我相信作為一個(gè)從業(yè)了一定時(shí)間的開(kāi)發(fā)者，無(wú)論水平如何，這都不是問(wèn)題，但是如何區分這個(gè)開(kāi)發(fā)者的水平，可以通過(guò)他寫(xiě)的代碼來(lái)判斷，當然也不完全是，畢竟在996或者趕進(jìn)度的時(shí)候，很容易就會(huì )為了完成快速出產(chǎn)品而寫(xiě)，這種情況下代碼質(zhì)量跟個(gè)人水平不一定能體現。下面，我們以設計一個(gè)“按鈕（）組件”為例，來(lái)探索這個(gè)問(wèn)題。首先“按鈕（）”的作用這個(gè)我們是否明確？它是裝飾性的組件還是功能性的組件？這個(gè)問(wèn)題很簡(jiǎn)單，“按鈕（）”是一個(gè)功能性的組件，是讓用戶(hù)通過(guò)點(diǎn)擊或觸碰來(lái)采取行動(dòng)并做出選擇的一個(gè)組件。場(chǎng)景那么“按鈕（）”通常放在什么地方？有經(jīng)驗的開(kāi)發(fā)可能會(huì )想到以下場(chǎng)景：對話(huà)框模態(tài)窗口表單卡片工具欄代表狀態(tài)可能會(huì )有以下幾種：默認狀態(tài)初始狀態(tài)信息狀態(tài)警告狀態(tài)危險狀態(tài)形態(tài)可能會(huì )有以下幾種：實(shí)心按鈕文本按鈕描邊按鈕圖標按鈕圓角按鈕直角按鈕尺寸可能會(huì )有以下幾種：操作性可能會(huì )有以下幾種：回車(chē)鍵點(diǎn)擊鼠標點(diǎn)擊觸摸點(diǎn)擊禁止點(diǎn)擊攜帶的事件可能有以下兩種：click事件回車(chē)鍵keydown事件tap事件以上雖然是偏樣式，但是作為一個(gè)組件開(kāi)發(fā)者，這都是我們日常所需要考慮的。API在A(yíng)PI的設計環(huán)節，我們通過(guò)上述的場(chǎng)景，我們可能會(huì )暴露出以下的APItype：按鈕狀態(tài)size：按鈕尺寸color：按鈕顏色text：按鈕內的文本icon：按鈕內的圖標htmlType：原生按鈕支持的type屬性attrs：其他的原生屬性variant：按鈕形態(tài)click：鼠標點(diǎn)擊事件tap：觸摸屏點(diǎn)擊事件keydown：回車(chē)鍵按下事件編寫(xiě)核心邏輯在我們API設計好之后，我們就可以開(kāi)始開(kāi)發(fā)了，這時(shí)候根據我們項目的類(lèi)型，選擇的開(kāi)發(fā)工具以及模式，可能會(huì )有所不同。我們是獨立編寫(xiě)還是直接在項目里面去編寫(xiě)，如果是獨立編寫(xiě)，選擇哪個(gè)打包工具，是gulp還是webpack還是其它，為什么這么選？例如如果我們是用TS寫(xiě)，我們可能需要編寫(xiě)Button.d.ts，如果是vue的組件，我們還得考慮Vue.use注入到Vue中，也就是Button.install(vue)，如果是react，我們還得考慮是否使用React.來(lái)進(jìn)行ref轉發(fā)。然后就是我們的代碼規范，是用Function還是Class，共同的代碼塊如何抽象，如何，還有命名規范是什么，哪些屬性必選，哪些屬性可選，默認值是什么？我們是怎么考慮的？所以最終的組件使用可能會(huì )是這種形式：import Button from './/Button' 添加 單元測試在我們開(kāi)發(fā)的過(guò)程中，有一道麻煩但又必不可少的工序就是單元測試，這時(shí)候單元測試的庫我們是怎么選？用Jest還是Mocha？測試用例怎么寫(xiě)？如何模擬點(diǎn)擊或者異步響應？是否需要快照（snapshots）？這也是在我們的考慮范圍內。所以我們的測試腳本可能長(cháng)這樣：import Button from './/Button' import { shallow } from 'enzyme' describe('', () => { it('render success', () => { const wrapper = shallow(( 添加 )) expect(wrapper.text('添加')).to.equal(true) }) })其它其它的諸如開(kāi)發(fā)文檔，使用文檔，版本迭代，項目配置，打包開(kāi)發(fā)優(yōu)化，以及其他自動(dòng)化的功能，也是我們所需要考慮?？偨Y以上便是我們在開(kāi)發(fā)一個(gè)“按鈕（）組件”時(shí)可能會(huì )考慮到的點(diǎn)，可能有不夠完善的地方，但是我想說(shuō)的意思是，這其實(shí)可以很好的衡量一個(gè)人的水平。比如你再會(huì )手寫(xiě)原型鏈關(guān)系圖，閉包，防抖，節流等基礎概念，但是如果不在項目中運用起來(lái)，終究是紙上談兵，對技術(shù)水平?jīng)]有太多實(shí)質(zhì)的幫助，當然不是說(shuō)精通這些內容不好，但是比起實(shí)戰，還是差強人意。能手寫(xiě)代碼的不一定是高級，但是如果能寫(xiě)好一個(gè)組件，水平再差也不會(huì )差到哪里去。本文似乎有點(diǎn)文不對題了，本來(lái)談的是“如何衡量一個(gè)人的水平”，結果卻超綱了許多。但是通過(guò)這種方式，確實(shí)能夠判斷出一個(gè)人代碼水平，當然也并不只是JS，換成安卓，IOS也同樣適用。優(yōu)質(zhì)文章傳送門(mén)：慕課網(wǎng)：神器推薦！讓我用的最爽的幾款 Mac 軟件，非常實(shí)用?。ǖ诙棧┠秸n網(wǎng)：你能使用 寫(xiě)好一個(gè)最簡(jiǎn)單的 Button 組件嗎？慕課網(wǎng)：ES6、ES7、ES8學(xué)習指南作者：陳大魚(yú)頭鏈接： ，轉載請注明出處，謝謝合作

上述文章了解到關(guān)于如何衡量一個(gè)人的 JavaScript 水平？?? ，讓我們對javascript好不好 有一個(gè)直觀(guān)的認知。我們發(fā)現，作為一個(gè)優(yōu)秀的Java程序員是多么的自豪。