如何在2019年從零開始學習前端開發?

不吃素的唐三藏 發布于 2019/03/21 18:41
查看︰658|回復︰2

近兩年來,前端開發工程師越來越火了,薪資待遇也快接近後端開發工程師了。

2019年已經到來了,很多準備入行前端開發工程師的小伙伴們,不知道準備得怎麼樣了呢?有的朋友在想方設法的學習,爭取在年後的金三銀四能靠實力找到一份滿意的工作!有的小伙伴在準備準備回家過個團圓年,來年再戰!還有的小伙伴很迷茫,想學前端,卻沒有方向!

今天來給大家講講,在2019年,我們學習前端開發,如何才能高效學會前端開發?

零基礎起步

首先,無論學任何一個技術,都是從零基礎開始的,前端開發也是一樣。做軟件開發,是從事編程開發工作,必須先從語法基礎開始學習,通過語法組成產品效果。

前端開發的基礎語法,由HTML+CSS+JavaScript組成,這是前端開發最基本的3個語言。

網頁布局基礎︰HTML+CSS

HTML就是超文本標記語言,組成網頁內容的最基本語言。你可以直接說他是網頁的骨架,網頁的圖片、文字、視頻、音頻、程序都需要他引入到網頁中體現。

cf10354245cdd6ea0d4ebab1a817e842002.png

光是HTML做網頁,只是有了內容,當然是遠遠不夠的。因為只是HTML的話,只能用Table做布局才能勉強做出個成型的網頁來。但是從Web2.0時代開始,都是盒子模型布局法了,也就是用DIV+CSS來實現布局了。

CSS就是層疊樣式表。通過樣式屬性來對標簽進行布局規範,在不再使用table布局的時候,只要CSS樣式對網頁標簽進行對應的布局實現才是正確的開發方式了。

66c885d7cd1786e09bd6bc40bf2ea2c8002.png

HTML(div)+CSS布局,是基礎入門的基本步驟,在這個階段,你需要學習的內容,包括有︰

1.標簽語義化,SEO

2.頁面加載的流程和原理

3.網頁結構

4.盒子模型(W3C盒子模型和IE盒子模型)

5.CSS選擇器

6.CSS布局浮動、定位

在剛剛開始的階段,大家學習的布局方式基本都是以px為單位的靜態布局方法。熟悉好布局方法,先給自己一個小目標,做一個簡單的電商網頁的基本結構出來,不用特效,不需要交互。


瀏覽器腳本語言︰JavaScript

JavaScript是我們學習前端開發中非常重要的一個內容,也是一個大家經常掉坑里的難點。JavaScript現在可以說是互聯網時代使用率最高的腳本語言了,在網頁中,所有的數據渲染,特效的交互都需要利用JavaScript,來影響瀏覽器的顯示。

3f044bdcb036b76edb5d26f467e7ce15002.png

JavaScript不只是開發網頁特效和渲染數據的重要內容,在學習前端開發的後期,大量使用算法和框架的時候,對JavaScript基礎的考驗也是很多的。

在基礎階段,我們學習JavaScript需要注意︰

1.基本關鍵字指令

2.基本數據類型、數組

3.函數

4.面向對象編程

5.原型鏈、閉包

6.JSON

7.Ajax

8.DOM(文檔對象模型 原生DOM操作)

9.事件捕獲、冒泡、代理

10.常用函數方法

11.ES5、6、7


在JavaScript部分學習,主要還是要去理解好交互的原理,把原理分析清楚,真的理解語法,那寫出多復雜的邏輯也是手到擒來。


JavaScript經典類庫jQuery

說到學習JavaScript,很多小白同學肯定會很頭痛他的原生寫法。每次邏輯業務都需要手動寫,也就是用一次就造一次輪子。覺得很麻煩。如果能簡單一點就好了。

因為JavaScript有可以封裝的特性,所以在後面也出現了很多用JavaScript封裝的類庫、插件。比如說最經典的類庫就是jQuery了。

jQuery類庫就是在類庫里面封裝好了很多JavaScript的事件方法。jQuery通過封裝,減輕了遍歷、對象選擇等等很多的問題。把網頁特效的實現變得簡單化,通過調用方法就可以了。

21e4ddd67b25091b115985f65f5c441d002.png

在學習jQuery的時候,需要重點認識的有:

1.jQuery語法和JavaScript原生語法的差異

2.Dom對象和jQuery對象

3.jQuery的入口函數和JavaScript的入口函數的差異

4.jQuery事件的執行邏輯。

學習jQuery,最需要達到的效果就是能快速的完成網頁的特效,比如說輪播圖、手風琴菜單、旋轉木馬、放大鏡等等這些特效。能完成一個電商網站的布局+特效開發是最基本的要求了。


這些就是零基礎學習必備的一些基本內容,在入門前端開發最基本需要掌握的東西,把基礎理解好,才能為後面的學習做更多的準備。


多終端進階學習

除了基礎的PC端,目前移動端可以說是非常火的了。

比PC端單一的網頁不同,在移動端的技術可以應用到WEB-APP,小程序,Hybrid-App等等。


Web-App

也就是我們常見的瀏覽器(以及內置瀏覽器,比如微信)打開的大型移動端網頁。比如我們常見的電商網站,功能性網站,管理網站,在布局和功能上都有APP的效果。

做好Web-App開發,最基本的很多人肯定會說響應式布局,但是前端開發是又5種布局法的,除了出名的響應式,還有在移動端最重要的彈性布局法,也就是很多人頭疼的rem布局。

8e0d622b375e244af00a964324b9db82002.png

除了布局方法之外,在H5新特性和觸屏事件和設備兼容性問題也是需要信手拈來。


小程序

這個也不用多說,現在可以說是非常火的,各大平台都有在做自己的小程序,各種砍價,搶票,電商,游戲都有運用。這個以微信小程序為例,主要是微信團隊基于前端基礎來做的封裝語法,主要的還是ES語法。小程序目前很多公司都是招聘前端開發,目前還沒有獨立的小程序開發工程師,所以小程序可以說是前端工程師高薪就業的加分技能,換句話說就是成熟開發必備了。

0c932c94f00a2123544b75e62d575acf002.png

Hybrid-App

又稱混合式APP,可能听說的人很少,但是18年是越來越多人去開發了,這種是能直接產出下載到終端的APP的,在體驗感上可以說已經具備傳統APP的大部分功能了。這種開發門檻較低,也就是前端開發就可以完成。多數都是大包平台就能做,這個你可以後面了解一下。

c1104b8dbcffdb4d91d82dce7d5bf72e002.png

前端主流技術框架

前面的都是基礎東西,現在去就業前端開發,不是只靠個基礎東西,搞個移動端頁面就可以算成熟了。前端3大框架,VUE、Angular、React這3個可以說是現在非常火熱的了。

68c302ddff6744abd160f27a2490340b002.png

基礎語法都可以寫的前端,為什麼還要框架?

很多小白朋友是不懂什麼是框架的,只听過jQuery這些東西,以為就是框架。或者認為框架就是加速開發,覺得這些庫、插件就能完成框架的工作了。

其實框架的出現,是改變前端地位的重要標志。最重要的表現,就是前後端分離,在前後端分離之前,很多後端開發都是又當爹又當媽的,效果不好效率也不高,我就是在後端出身,深知痛苦。

現在的前端項目,比以前是更加復雜化、多樣化了。項目復雜了,問題也多了。


那框架到底解決了什麼問題?

解決重復引用外部js,以用jQuery開發為例,很多時候都是不能單一完成一個項目的,還需要引用很多的第三方插件和庫,導致會一個項目引入很多外部JS文件。

f7a444bf25758eac7e43636322506942002.png

這樣不僅讓代碼變得雜亂,而且很影響打開速度。但是用框架呢,以VUE為例,一般會和構建工具配合,然後就是一個入口文件就可以完成了,在運行時候就在入口引入一次,一勞永逸。

使用組件化開發,組件是前端框架里非常強大的功能之一,它可以擴展你的HTML,封裝可以重用的代碼塊,比如你的輪播圖、tab切換、頁面頭部、頁面底部等等。

這種獨立的組件具有了結構(html),表現(css)和行為(js)完整的功能,很大程度的節省了代碼量,提高了代碼的復用性。特別是團隊合作的時候,可以很好的提高使用效率。

減少開發周期,如果你覺得jQuery可以減少開發周期了,那其實框架可以比庫更快。比如說使用jQuery開發的時候,很多時候是需要頻繁去操作DOM,每次效果都要去查找DOM,這樣就顯得很繁瑣了。使用框架的時候,很多功能都得到了封裝,比如說很多指令都有數據綁定,數據格式化這些功能。這樣更多時候,我們開發的時候只需要關注數據的邏輯就行了。


最後

這些也就是我們學習前端開發必備的一些知識點了。學習路線放一下給大家。

c14e913f5d7d576bea6d75571397cd9a002.png

前端開發學習不是單一的,內容比較多,同樣應用的場景也非常多。

如果你想從事前端開發工作,就要更急專心和努力,堅持方向不動搖!

B_22.gifB_22.gifB_22.gif


全部點贊
總計︰ --
不吃素的唐三藏于 2019-03-22 10:05 重新編輯過該貼

共有2條評論

  • 不吃素的唐三藏 不吃素的唐三藏

    B_10.gif

    沙發 2019/03/22 10:05
  • 誰家丟的小哥哥 誰家丟的小哥哥

    9805eb2676e524b2b57005fd04586307001.jpg

    板凳 2019/03/22 21:37
招版主啦

版主

  • 楊_宇 楊_宇
  • WEB前講師-甦少強 WEB前講師-甦少強
  • web講師--何廣森 web講師--何廣森
  • web前端講師-閆華偉 web前端講師-閆華偉
  • zacharyjoke zacharyjoke
  • Web講師-李家靖 Web講師-李家靖

注冊有禮

完善以下信息,為你推薦奧門娛樂網址

  • 學生
  • 白領
  • 高管
  • 自由職業
  • 其他
  • 工作需要
  • 自我提升
  • 興趣愛好
  • 創業/轉型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中專
  • 專科
  • 本科
  • 碩士
  • 其他
  • 影視槍戰大片特效解析
  • PS視覺驚悚課堂
  • 45天7千平方大廈變形記
  • 原畫學習痛點技法全解析
  • 影視動畫奇幻課堂
  • AI高端商業設計全攻略
  • UG職場生存必備指南
  • 日賺千元之新媒體行業揭秘
出現異常