@所有人:一道送分題,測測你的前端功底扎不紮實

前端早讀課2018-06-14 11:29:05

剛開始學習前端的時候,大多數人都會遇到這種情況:總覺得自己對於知識點已經懂了,但又有點迷茫,因為不知道怎麼用。

其實,對於剛開始學習和轉行的人來說,不斷的練習是一個很好的提高手段。仿一個頁面,仿一個APP,都用來檢驗自己的前端知識是不是真的get到了。

我們今天就從一個計算器開始自測。

首先,請打開你的手機裡自帶的計算器,仔細觀察,然後就可以開始運用你知道的知識寫了。


如果願意,請先暫停閱讀文章,自己動手寫一下這段代碼。

如果你能準確無誤地寫出來,那你的前端能力,基本就達標了。如果沒有,咳咳..快好好學習吧!

如果你已經寫好了,可以接著看看有沒有不同的實現方法。如果你經過思考後,還是迷茫不知道怎麼開始,那也可以接著往下看。

我們看下手機中計算器這個APP,然後開始畫這個頁面。

一行4個按鈕,每個按鈕是圓形, 中間有間隔,相信大部分人都能寫出來,而且還有很多不同的方法能實現這個佈局,比如display: flex,比如display:table 都能實現。

而且flex的方式更簡單,flex:1,就能等分,而不用去計算。大家可以每種都試試,這樣才能更好的理解css的各種屬性。

目前我這裡是用float: left 來實現。很簡單,但是想問兩個問題:

  • 上面的的 width :(21% + 2% 2) 4 = 100%, 但是為什麼要寫padding-top: 21%

  • 為什麼border-radius: 100px,而不是border-radius: 50%?

如果願意,請再暫停閱讀,思考2分鐘。

有答案了沒?以下是答案,看看你有沒有答對。

padding的百分比是相對於寬度的,所以21%能形成一個正方形

如果是border-radius的話,下面 ‘0’ 按鈕,佔兩個位置,形成的會是一個橢圓,而我們只要寫一個數值大過短徑的就能按照效果圖顯示了

頁面已經畫好了,那我們要開始寫計算的邏輯了。

首先,肯定就是事件監聽了。

除了這種方式,我們還有麼有別的方式麼?答案當然是有。

我們還可以用,使用事件委託能夠提高JavaScript性能。事件委託可以顯著地提高事件處理速度,減少內存的佔用。

接下來是計算。

簡單的我們可以使用eval()來計算,先實現功能,然後一步步的發現問題解決問題。

用eval()計算後,嘗試小數的計算時候,會發現0.1+0.7居然不等於0.8,而這是因為javascript精度丟失的問題。我們發現這個問題就要解決。

目前常用解決精度問題是將小數 * 10的 n 次冪,換算成計算機能夠精確識別的整數,下面我們給出了加法,同理我們可以寫減法和乘法。

解決了精度問題,我們可以繼續深入。

一個計算器是需要進行四則運算的。我們平時看到的表達式是中綴表達法,例如1+2*3,運算符在數字的中間,對於人而言,一眼看過去就知道先做乘法,再做加法,但是不易於計算機解析。在這裡我們可以選擇一個比較方便後綴表達法,使用堆棧結構對錶達式進行解析並計算。

至此,一個計算器的代碼就已經寫完了。

完整的代碼,大家可以拉到文末,掃碼入群后,在群文件裡自取。

近一年,有不少同學會問:前端的工作越來越難找,到底是不是前端領域已經飽和了?

的確,前端的熱度比前幾年相比明顯降低了很多。前幾年,凡是懂點前端的都比較好找工作。現在不行了,市場上已經不缺初級前端,而是需要工作能力和經驗。

當我們學習前端的時候,先了解基礎知識,然後練習,練習的過程中,不斷想可以怎樣的實現,舉一反三,反覆的積累鞏固基礎知識,這樣子才會提高。

因此,網易雲課堂在此隆重推出《網易前端開發》訓練營,由網易資深們精心打造,配合精品視頻課、線上直播公開課、助教答疑,帶你在前端開發領域快速提升!所有內容,限時免費!

PART 1

《前端入行難?你需要掌握這些技能》

線上直播公開課


課程講師


網易資深前端開發工程師:包勇明


時間:6月13日 20:00-21:00

直播大綱

揭祕前端開發工程師崗位職責和必備技能

  • 學習前端需要避開的一些坑

  • 前端開發學習路徑和資料推薦

  • 如何寫一份高質量的前端開發簡歷

PART 2

《前端開發》精品視頻課


課程講師

網易高級前端技術專家:蔡劍飛

課程大綱

  • 前端技術發展與行業現狀

  • 初識前端:一個基於彈窗的案例

  • 前端項目實戰(2個)

如何獲取?

掃碼加入QQ群

即可免費攻讀《網易前端開發》訓練營

獲取精品視頻課+線上直播公開課

為了保證學習體驗,

本次前端開發訓練營限時開放

數量有限,欲報從速

閱讀原文

TAGS: