從2018百度前端技術(shù)學(xué)院看代碼究竟應(yīng)該怎么寫(1)

Cobub 發(fā)布于2019-08-21 11:43 / 586人閱讀

任務(wù)描述

參考以下示例代碼，補(bǔ)充其中的JavaScript功能，完成一個(gè)JavaScript代碼的編寫本任務(wù)完成的功能為：用戶可以在輸入框中輸入任何內(nèi)容，點(diǎn)擊“確認(rèn)填寫”按鈕后，用戶輸入的內(nèi)容會(huì)顯在“您輸入的值是”文字的右邊



  
    
    IFE JavaScript Task 01
  


  請(qǐng)輸入北京今天空氣質(zhì)量：
  

  您輸入的值是：尚無(wú)錄入

相關(guān)鏈接

任務(wù)實(shí)現(xiàn)：

這個(gè)入門級(jí)任務(wù)想必所有人都覺得很簡(jiǎn)單，寫完不到三五分鐘，可不知大家有沒有看過(guò)底下任務(wù)提交欄那些高分代碼，我分別挑了一個(gè)5分的，9分的，10分的看了下，除了個(gè)別分?jǐn)?shù)與代碼不符之外，總的來(lái)說(shuō)高分還是有道理的

這是5分代碼:

想必大部分人都是這樣寫的吧，實(shí)現(xiàn)了基本需求之后以為就可以高枕無(wú)憂了，那讓我們看下9分代碼是怎么實(shí)現(xiàn)的吧。

這是9分代碼：

看到?jīng)],9分代碼的人就能從空氣質(zhì)量檢測(cè)這樣一個(gè)需求想到做一個(gè)合理的邊界檢查,并且他還緩存了dom查找，減少了開銷，但是他忽略了最關(guān)鍵的一點(diǎn)，這也是為什么他不是10分的原因，那接下來(lái)我們就一揭10分廬山真面目：

10分代碼：

他雖然沒做邊界值檢查,但是他注意到最關(guān)鍵的一點(diǎn)不同瀏覽器事件的兼容性處理，因此結(jié)合以上兩個(gè)部分的優(yōu)點(diǎn)我將我的代碼修繕如下:

幾點(diǎn)收獲

寫代碼的時(shí)候思維嚴(yán)謹(jǐn),多場(chǎng)景去想問題(如：兼容性)

運(yùn)用生活常識(shí)去做合理推斷(如：輸入檢測(cè))

將自己作為用戶的角度去完善代碼(如：增加回車鍵提交輸入值)

可見寫代碼是個(gè)技術(shù)與藝術(shù)相結(jié)合的過(guò)程！

額外補(bǔ)充

在此任務(wù)的學(xué)習(xí)中，有想到模擬JavaScript事件,查閱《JavaScript高程三》后發(fā)現(xiàn)依舊不是很清晰，故又看了幾篇好的博文，分享如下：

js原生創(chuàng)建模擬事件和自定義事件的方法

GPU云服務(wù)器云服務(wù)器 test應(yīng)該怎么寫 java 應(yīng)該看的書數(shù)據(jù)分析時(shí)應(yīng)該從哪些方面分析學(xué)php應(yīng)該看什么書

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/87024.html

相關(guān)文章

從2018百度前端技術(shù)學(xué)院看代碼究竟應(yīng)該怎么寫(2)

摘要：任務(wù)描述參考以下示例代碼，頁(yè)面加載后，將提供的空氣質(zhì)量數(shù)據(jù)數(shù)組，按照某種邏輯比如空氣質(zhì)量大于進(jìn)行過(guò)濾篩選，最后將符合條件的數(shù)據(jù)按照一定的格式要求顯示在網(wǎng)頁(yè)上污染城市列表第一名福州樣例，第二名福州樣例，北京上海福州廣州成都西安在注任務(wù)描述參考以下示例代碼，頁(yè)面加載后，將提供的空氣質(zhì)量數(shù)據(jù)數(shù)組，按照某種邏輯（比如空氣質(zhì)量大于60）進(jìn)行過(guò)濾篩選，最后將符合條件的數(shù)據(jù)按照一定的格式要求顯示...

sixleaves 2019-08-21 11:42 評(píng)論0 收藏0
2018年騰訊前端一面總結(jié)（面向2019屆學(xué)生）

摘要：前言騰訊一面，相比阿里一面來(lái)說(shuō)，騰訊一面先給打電話預(yù)定時(shí)間，這也給了我們這些面試者去準(zhǔn)備的時(shí)間。其實(shí)閉包也就是指有權(quán)訪問另一個(gè)函數(shù)作用域的函數(shù)而已。常用的創(chuàng)建閉包的方法就是在函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。前言騰訊一面，相比阿里一面來(lái)說(shuō)，騰訊一面先給打電話預(yù)定時(shí)間，這也給了我們這些面試者去準(zhǔn)備的時(shí)間。但是也正是因?yàn)檫@種確定性，也有在等待電話的時(shí)候的心情的忐忑。背景我是一名大三學(xué)生，大一...

Kosmos 2019-08-22 15:17 評(píng)論0 收藏0
【董天一】關(guān)于IPFS的熱門問題

摘要：作者簡(jiǎn)介董天一中國(guó)區(qū)技術(shù)布道人指南作者。目前網(wǎng)絡(luò)上有一些對(duì)的解讀五花八門，各式各樣，有看好的，也有打擊的，總之一項(xiàng)新技術(shù)誕生之初遇到的問題都遇到了。問題文件丟失認(rèn)為系統(tǒng)不可靠，會(huì)造成用戶文件的丟失。作者簡(jiǎn)介：董天一 ,IPFS/Filecoin中國(guó)區(qū)技術(shù)布道人 ,《IPFS指南》作者。畢業(yè)于北京大學(xué)軟件與微電子學(xué)院曾擔(dān)任甲骨文亞洲研發(fā)中心（中國(guó)）數(shù)據(jù)庫(kù)開發(fā)工程師。資深區(qū)塊鏈技術(shù)開發(fā)...

李義 2019-06-27 18:56 評(píng)論0 收藏0
2016百度前端技術(shù)學(xué)院Task02

摘要：的演示整個(gè)項(xiàng)目的地址的地址起初只是想簡(jiǎn)單開始重新做一遍百度前端技術(shù)學(xué)院的任務(wù)，但是在做的過(guò)程中萌生了要記錄下自己在過(guò)程中遇到的一系列問題的想法。現(xiàn)在我把自己完成的小項(xiàng)目的源碼在上分享出來(lái)，希望可以幫到廣大前端初學(xué)者們。 Task02的演示DEMO：https://amnova.github.io/New-... 整個(gè)項(xiàng)目的GitHub地址：https://github.com/amn...

venmos 2019-08-30 13:19 評(píng)論0 收藏0
2016百度前端技術(shù)學(xué)院Task02

摘要：的演示整個(gè)項(xiàng)目的地址的地址起初只是想簡(jiǎn)單開始重新做一遍百度前端技術(shù)學(xué)院的任務(wù)，但是在做的過(guò)程中萌生了要記錄下自己在過(guò)程中遇到的一系列問題的想法。現(xiàn)在我把自己完成的小項(xiàng)目的源碼在上分享出來(lái)，希望可以幫到廣大前端初學(xué)者們。 Task02的演示DEMO：https://amnova.github.io/New-... 整個(gè)項(xiàng)目的GitHub地址：https://github.com/amn...

lolomaco 2019-08-01 16:09 評(píng)論0 收藏0