零基礎入門前端的修煉之道

小橋流水嘩啦啦發表於2018-10-30

本文是為了給那些想要了解前端開發是什麼,或者剛剛打算開始學習前端的朋友們準備,希望可以幫助準備入行的你;

零基礎入門前端的修煉之道

總所周知,目前無論是企業還是個人,都會有製作網站、部落格、小程式等需求,他們希望把自己的產品或服務通過網際網路展示給更多使用者。在這種情況下, 對於剛剛接觸這方面的新人來說,可能先需要了解一個網站的從零到有的製作過程會涉及哪些環節。

簡單的來說網站的誕生過程會經歷這些環節

策劃 > 設計 > 前端開發 > 後端開發 > 測試釋出

從這個流程來看,我們的網站開發是一個系統工程,它需是多個環節之間緊密配合來去完成的,而“前端開發”這個環節處於整個系統工程的中間部位,起到承上啟下的核心作用,因此“前端開發工程師”這個職位越來越受到重視,接下來我們先和大家詳細聊聊關於前端開發這些事。

前端開發是做什麼的

前端開發的興起

前端開發是從網頁製作演變而來的,在國內被大家所認知並接受是在 2005 年之後。在 2005 年之前,處於1.0 時代的 Web 並沒有“前端”這個概念,此時的網頁內容主要就是一些文字和圖片,使用者使用網站的行為也以瀏覽為主,這樣的網頁使用幾個網頁製作軟體,諸如 Photoshop+Dreamweaver+Flash 就能製作出來。所以Web1.0 時代的網頁開發也叫網頁製作、美工切圖;

零基礎入門前端的修煉之道

2005 年之後,網際網路進入 Web2.0 時代,對網頁的開發要求越來越高,比起 1.0 時代,其開發難度加大,前端開發已經不再是掌握幾個製作軟體就可以做好的事了,它需要專業的工程師才能做好,網頁除了展示資訊以外,還需要美觀的設計、炫酷的互動、良好的使用者體驗、複雜的業務邏輯處理、跨終端的適配相容等,開發方式也有了本質改變,因此網頁開發不再叫網頁製作,而是變成了前端開發。

零基礎入門前端的修煉之道

前端開發的市場需求

隨著網際網路行業的發展,在這個到處都是講究“顏值”和使用者體驗的時代,“高顏值”以及能與使用者進行友好互動的網站會極大地吸引使用者,使用者會更加願意深入地瞭解這樣的網站,也提高網站的使用者黏度。面對這些較高的要求,前端在開發環節中的作用也變得越來越重要;

因而近幾年來前端工程師備受青睞,一般水平的前端工程師平均年薪可達 10 萬元,資深前端工程師年薪高達 20~80 萬元。但就這樣的年薪,很多企業還是很難找到合適的前端工程師;

零基礎入門前端的修煉之道

從上述企業的招聘資訊來看,前端行業的就業薪資是較為可觀的。 那麼如何才能做好專業的前端開發呢? 就讓我在接下來的日子裡,為大家分享下我的前端入門學習的修煉之道吧。

前端開發人員要具備以下能力

1.複雜炫酷的頁面互動設計能力

在進行前端開發時,開發人員除了要將設計圖完美還原以外,還需要對互動效果進行編寫。當使用者開啟頁面的時候,如果頁面風格新穎、互動炫酷,那他就會感覺你的產品技術含量很高。相反如果頁面風格老舊、互動呆板,他就會覺得你的產品不行,不買你的賬。因此,前端開發工程師要具備設計複雜炫酷頁面的能力。

零基礎入門前端的修煉之道
在滑鼠懸停和移開時的不同效果,就體現了一種較為炫酷的互動效果;

2.良好的使用者體驗設計能力

使用者體驗是從使用者的角度出發,不僅要把炫酷的視覺效果展現給使用者,還要從功能上讓使用者有所感知。例如當使用者註冊微博賬號時,電話號碼提供錯誤或者沒有輸入密碼,輸入框右側應有相應提示。這種使用者體驗的細節問題是否處理妥當,是判斷一名前端工程師是否優秀的因素。

3.複雜的業務邏輯處理能力

現在的前端工程師不僅要製作頁面,還需要配合服務端工程師一起去實現某些功能。例如,微博的文章釋出、使用者搜尋、評論留言等內容的開發,前端開發工程師對後端資料接收是否成功、搜尋結果狀態以及評論留言是否合法等進行邏輯判斷處理。因此,前端開發工程師要具備處理複雜業務邏輯的能力。

零基礎入門前端的修煉之道
使用者輸入資料不正確時顯示提示資訊

4.能處理跨終端的適配相容問題

近年來,智慧手機發展迅猛,幾乎人手一部,大街上隨處可見“低頭族”。隨著手機、平板電腦等不同移動終端的普及,越來越多的人喜歡移動辦公、移動學習、移動娛樂......人們經常會在不同的終端之間進行切換,因此,這就要求一個頁面能實現跨終端的適配相容——即能在不同終端中正確顯示。

比如域名 www.miaov.com,在 PC 和移動端瀏覽器中的顯示如圖 1-6 所示,該示例給我們展示了該域名跨終端適配相容的其中一種情況,這種適配相容運用於網站內容比較複雜的情況,通過後臺判斷,渲染不同模板進行輸出或跳轉;

零基礎入門前端的修煉之道

還有一種情況,就是各終端顯示的頁面內容完全一樣,但頁面佈局等樣式會根據終端螢幕的大小進行自動切換,如圖所示就是響應式設計。響應式網頁開發主要是基於一套程式碼來適配不同尺寸的終端,有關響應式網頁開發技術請閱讀本系列叢書的響應式開發。

零基礎入門前端的修煉之道

綜上所述的,前端開發的工作主要是開發使用者操作介面,其中涉及的內容包括實現炫酷的頁面互動、提供良好的使用者體驗、配合服務端工程師處理複雜的業務邏輯和實現 Web 的跨終端適配相容等,這些都是一個合格前端要掌握的必備技能;

至此,我們已經大致瞭解了前端開發到底是做什麼的。現在的問題是如何成為一名合格的前端開發工程師?怎樣才能將前端 開發的各項工作做好?要成為專業的前端開發工程師、做好前端開發的各項工作,需要掌握哪些相關的技術呢?

下一期我將就這些內容進行介紹

關注本訂閱號,觀看《零基礎入門前端的修煉之道》系列文章

公眾號ID:Miaovclass

關注妙味訂閱號:“妙味前端”,為您帶來優質前端技術乾貨;

相關文章