摘要:也就是我們常見的瀏覽器以及內(nèi)置瀏覽器,比如微信打開的大型移動端網(wǎng)頁。這個以微信小程序為例,主要是微信團隊基于前端基礎(chǔ)來做的封裝語法,主要的還是語法。學(xué)習(xí)路線放一下給大家。前端開發(fā)學(xué)習(xí)不是單一的,內(nèi)容比較多,同樣應(yīng)用的場景也非常多。
近兩年來,前端開發(fā)工程師越來越火了,
2019年已經(jīng)到來了,很多準(zhǔn)備入行前端開發(fā)工程師的小伙伴們,不知道準(zhǔn)備得怎么樣了呢?有的朋友在想方設(shè)法的學(xué)習(xí),爭取在年后的金三銀四能靠實力找到一份滿意的工作!還有的小伙伴很迷茫,想學(xué)前端,卻沒有方向!
今天來給大家講講,在2019年,我們學(xué)習(xí)前端開發(fā),如何才能高效學(xué)會前端開發(fā)?
零基礎(chǔ)起步首先,無論學(xué)任何一個技術(shù),都是從零基礎(chǔ)開始的,前端開發(fā)也是一樣。做軟件開發(fā),是從事編程開發(fā)工作,必須先從語法基礎(chǔ)開始學(xué)習(xí),通過語法組成產(chǎn)品效果。
前端開發(fā)的基礎(chǔ)語法,由HTML+CSS+JavaScript組成,這是前端開發(fā)最基本的3個語言。
網(wǎng)頁布局基礎(chǔ):HTML+CSS
HTML就是超文本標(biāo)記語言,組成網(wǎng)頁內(nèi)容的最基本語言。你可以直接說他是網(wǎng)頁的骨架,網(wǎng)頁的圖片、文字、視頻、音頻、程序都需要他引入到網(wǎng)頁中體現(xiàn)。
光是HTML做網(wǎng)頁,只是有了內(nèi)容,當(dāng)然是遠(yuǎn)遠(yuǎn)不夠的。因為只是HTML的話,只能用Table做布局才能勉強做出個成型的網(wǎng)頁來。但是從Web2.0時代開始,都是盒子模型布局法了,也就是用DIV+CSS來實現(xiàn)布局了。
CSS就是層疊樣式表。通過樣式屬性來對標(biāo)簽進行布局規(guī)范,在不再使用table布局的時候,只要CSS樣式對網(wǎng)頁標(biāo)簽進行對應(yīng)的布局實現(xiàn)才是正確的開發(fā)方式了。
HTML(div)+CSS布局,是基礎(chǔ)入門的基本步驟,在這個階段,你需要學(xué)習(xí)的內(nèi)容,包括有:
1.標(biāo)簽語義化,SEO
2.頁面加載的流程和原理
3.網(wǎng)頁結(jié)構(gòu)
4.盒子模型(W3C盒子模型和IE盒子模型)
5.CSS選擇器
6.CSS布局浮動、定位
在剛剛開始的階段,大家學(xué)習(xí)的布局方式基本都是以px為單位的靜態(tài)布局方法。熟悉好布局方法,先給自己一個小目標(biāo),做一個簡單的電商網(wǎng)頁的基本結(jié)構(gòu)出來,不用特效,不需要交互。
瀏覽器腳本語言:JavaScript
JavaScript是我們學(xué)習(xí)前端開發(fā)中非常重要的一個內(nèi)容,也是一個大家經(jīng)常掉坑里的難點。JavaScript現(xiàn)在可以說是互聯(lián)網(wǎng)時代使用率最高的腳本語言了,在網(wǎng)頁中,所有的數(shù)據(jù)渲染,特效的交互都需要利用JavaScript,來影響瀏覽器的顯示。
JavaScript不只是開發(fā)網(wǎng)頁特效和渲染數(shù)據(jù)的重要內(nèi)容,在學(xué)習(xí)前端開發(fā)的后期,大量使用算法和框架的時候,對JavaScript基礎(chǔ)的考驗也是很多的。
在基礎(chǔ)階段,我們學(xué)習(xí)JavaScript需要注意:
1.基本關(guān)鍵字指令
2.基本數(shù)據(jù)類型、數(shù)組
3.函數(shù)
4.面向?qū)ο缶幊?br>5.原型鏈、閉包
6.JSON
7.Ajax
8.DOM(文檔對象模型 原生DOM操作)
9.事件捕獲、冒泡、代理
10.常用函數(shù)方法
11.ES5、6、7
在JavaScript部分學(xué)習(xí),主要還是要去理解好交互的原理,把原理分析清楚,真的理解語法,那寫出多復(fù)雜的邏輯也是手到擒來。
JavaScript經(jīng)典類庫jQuery
說到學(xué)習(xí)JavaScript,很多小白同學(xué)肯定會很頭痛他的原生寫法。每次邏輯業(yè)務(wù)都需要手動寫,也就是用一次就造一次輪子。覺得很麻煩。如果能簡單一點就好了。
因為JavaScript有可以封裝的特性,所以在后面也出現(xiàn)了很多用JavaScript封裝的類庫、插件。比如說最經(jīng)典的類庫就是jQuery了。
jQuery類庫就是在類庫里面封裝好了很多JavaScript的事件方法。jQuery通過封裝,減輕了遍歷、對象選擇等等很多的問題。把網(wǎng)頁特效的實現(xiàn)變得簡單化,通過調(diào)用方法就可以了。
在學(xué)習(xí)jQuery的時候,需要重點認(rèn)識的有:
1.jQuery語法和JavaScript原生語法的差異
2.Dom對象和jQuery對象
3.jQuery的入口函數(shù)和JavaScript的入口函數(shù)的差異
4.jQuery事件的執(zhí)行邏輯。
學(xué)習(xí)jQuery,最需要達(dá)到的效果就是能快速的完成網(wǎng)頁的特效,比如說輪播圖、手風(fēng)琴菜單、旋轉(zhuǎn)木馬、放大鏡等等這些特效。能完成一個電商網(wǎng)站的布局+特效開發(fā)是最基本的要求了。
這些就是零基礎(chǔ)學(xué)習(xí)必備的一些基本內(nèi)容,在入門前端開發(fā)最基本需要掌握的東西,把基礎(chǔ)理解好,才能為后面的學(xué)習(xí)做更多的準(zhǔn)備。
多終端進階學(xué)習(xí)除了基礎(chǔ)的PC端,目前移動端可以說是非常火的了。
比PC端單一的網(wǎng)頁不同,在移動端的技術(shù)可以應(yīng)用到WEB-APP,小程序,Hybrid-App等等。
Web-App
也就是我們常見的瀏覽器(以及內(nèi)置瀏覽器,比如微信)打開的大型移動端網(wǎng)頁。比如我們常見的電商網(wǎng)站,功能性網(wǎng)站,管理網(wǎng)站,在布局和功能上都有APP的效果。
做好Web-App開發(fā),最基本的很多人肯定會說響應(yīng)式布局,但是前端開發(fā)是又5種布局法的,除了出名的響應(yīng)式,還有在移動端最重要的彈性布局法,也就是很多人頭疼的rem布局。
除了布局方法之外,在H5新特性和觸屏事件和設(shè)備兼容性問題也是需要信手拈來。
小程序
這個也不用多說,現(xiàn)在可以說是非常火的,各大平臺都有在做自己的小程序,各種砍價,搶票,電商,游戲都有運用。這個以微信小程序為例,主要是微信團隊基于前端基礎(chǔ)來做的封裝語法,主要的還是ES語法。小程序目前很多公司都是招聘前端開發(fā),目前還沒有獨立的小程序開發(fā)工程師,所以小程序可以說是前端工程師高薪就業(yè)的加分技能,換句話說就是成熟開發(fā)必備了。
Hybrid-App
又稱混合式APP,可能聽說的人很少,但是18年是越來越多人去開發(fā)了,這種是能直接產(chǎn)出下載到終端的APP的,在體驗感上可以說已經(jīng)具備傳統(tǒng)APP的大部分功能了。這種開發(fā)門檻較低,也就是前端開發(fā)就可以完成。多數(shù)都是大包平臺就能做,這個你可以后面了解一下。
前面的都是基礎(chǔ)東西,現(xiàn)在去就業(yè)前端開發(fā),不是只靠個基礎(chǔ)東西,搞個移動端頁面就可以算成熟了。前端3大框架,VUE、Angular、React這3個可以說是現(xiàn)在非常火熱的了。
基礎(chǔ)語法都可以寫的前端,為什么還要框架?
很多小白朋友是不懂什么是框架的,只聽過jQuery這些東西,以為就是框架。或者認(rèn)為框架就是加速開發(fā),覺得這些庫、插件就能完成框架的工作了。
其實框架的出現(xiàn),是改變前端地位的重要標(biāo)志。最重要的表現(xiàn),就是前后端分離,在前后端分離之前,很多后端開發(fā)都是又當(dāng)?shù)之?dāng)媽的,效果不好效率也不高,我就是在后端出身,深知痛苦。
現(xiàn)在的前端項目,比以前是更加復(fù)雜化、多樣化了。項目復(fù)雜了,問題也多了。
那框架到底解決了什么問題?
解決重復(fù)引用外部js,以用jQuery開發(fā)為例,很多時候都是不能單一完成一個項目的,還需要引用很多的第三方插件和庫,導(dǎo)致會一個項目引入很多外部JS文件。
這樣不僅讓代碼變得雜亂,而且很影響打開速度。但是用框架呢,以VUE為例,一般會和構(gòu)建工具配合,然后就是一個入口文件就可以完成了,在運行時候就在入口引入一次,一勞永逸。
使用組件化開發(fā),組件是前端框架里非常強大的功能之一,它可以擴展你的HTML,封裝可以重用的代碼塊,比如你的輪播圖、tab切換、頁面頭部、頁面底部等等。
這種獨立的組件具有了結(jié)構(gòu)(html),表現(xiàn)(css)和行為(js)完整的功能,很大程度的節(jié)省了代碼量,提高了代碼的復(fù)用性。特別是團隊合作的時候,可以很好的提高使用效率。
減少開發(fā)周期,如果你覺得jQuery可以減少開發(fā)周期了,那其實框架可以比庫更快。比如說使用jQuery開發(fā)的時候,很多時候是需要頻繁去操作DOM,每次效果都要去查找DOM,這樣就顯得很繁瑣了。使用框架的時候,很多功能都得到了封裝,比如說很多指令都有數(shù)據(jù)綁定,數(shù)據(jù)格式化這些功能。這樣更多時候,我們開發(fā)的時候只需要關(guān)注數(shù)據(jù)的邏輯就行了。
最后
這些也就是我們學(xué)習(xí)前端開發(fā)必備的一些知識點了。學(xué)習(xí)路線放一下給大家。
前端開發(fā)學(xué)習(xí)不是單一的,內(nèi)容比較多,同樣應(yīng)用的場景也非常多。如果你想從事前端開發(fā)工作,就要更急專心和努力,堅持方向不動搖!
更多前端開發(fā)學(xué)習(xí),關(guān)注公眾號【前端研究所】每天更新更多學(xué)習(xí)教程和方法。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/101721.html
摘要:也就是我們常見的瀏覽器以及內(nèi)置瀏覽器,比如微信打開的大型移動端網(wǎng)頁。這個以微信小程序為例,主要是微信團隊基于前端基礎(chǔ)來做的封裝語法,主要的還是語法。學(xué)習(xí)路線放一下給大家。前端開發(fā)學(xué)習(xí)不是單一的,內(nèi)容比較多,同樣應(yīng)用的場景也非常多。 近兩年來,前端開發(fā)工程師越來越火了,2019年已經(jīng)到來了,很多準(zhǔn)備入行前端開發(fā)工程師的小伙伴們,不知道準(zhǔn)備得怎么樣了呢?有的朋友在想方設(shè)法的學(xué)習(xí),爭取在年后...
摘要:也就是我們常見的瀏覽器以及內(nèi)置瀏覽器,比如微信打開的大型移動端網(wǎng)頁。這個以微信小程序為例,主要是微信團隊基于前端基礎(chǔ)來做的封裝語法,主要的還是語法。學(xué)習(xí)路線放一下給大家。前端開發(fā)學(xué)習(xí)不是單一的,內(nèi)容比較多,同樣應(yīng)用的場景也非常多。 近兩年來,前端開發(fā)工程師越來越火了,2019年已經(jīng)到來了,很多準(zhǔn)備入行前端開發(fā)工程師的小伙伴們,不知道準(zhǔn)備得怎么樣了呢?有的朋友在想方設(shè)法的學(xué)習(xí),爭取在年后...
摘要:為什么以前個人團隊的工作,現(xiàn)在你一個人操作就做了,你覺得工資給你翻三倍過分嗎年,第九個需要布局的技術(shù)物聯(lián)網(wǎng)將推進了服務(wù)器端,而不是桎梏與瀏覽器。 2010年的你,如果能學(xué)會Android開發(fā),現(xiàn)在的你,薪資不會低于年薪50萬…… 2015年的你,如果能熟練使用react,現(xiàn)在的你,薪資不會低于月薪30K…… 看到這兩個數(shù)據(jù),也許有人會反駁:技術(shù)剛出來,沒人敢用,而且隨便一門技術(shù),用上三...
摘要:結(jié)合我自己的經(jīng)驗,我整理了一份全棧工程師進階路線圖,給大家參考。乾坤大挪移第一層第一層心法,主要都是基本語法,程序設(shè)計入門,悟性高者十天半月可成,差一點的到個月也說不準(zhǔn)。 技術(shù)更新日新月異,對于初入職場的同學(xué)來說,經(jīng)常會困惑該往那個方向發(fā)展,這一點松哥是深有體會的。 我剛開始學(xué)習(xí) Java 那會,最大的問題就是不知道該學(xué)什么,以及學(xué)習(xí)的順序,我相信這也是很多初學(xué)者經(jīng)常面臨的問題。?我...
閱讀 2066·2019-08-30 15:53
閱讀 3064·2019-08-30 15:44
閱讀 2913·2019-08-30 14:11
閱讀 2909·2019-08-30 14:01
閱讀 2694·2019-08-29 15:16
閱讀 3718·2019-08-29 13:10
閱讀 1238·2019-08-29 10:56
閱讀 2525·2019-08-26 13:58