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

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

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

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