新技術新框架不斷涌現,目前學習web前端開發都要掌握什麼?

来源:https://www.cnblogs.com/lyy-1/archive/2020/06/12/13098898.html
-Advertisement-
Play Games

web前端開發由網頁製作演變而來,隨著web2.0的發展,網頁不再只是承載單一的文字和圖片,各種豐富媒體讓網頁的內容更加生動,網頁上軟體化的交互形式為用戶提供了更好的使用體驗,這些都是基於前端技術實現的。 經過了市場的沉澱,很多前端們開始無所適從,以前簡單的技能已經無法適用前端技術的發展,新技術新框 ...


web前端開發由網頁製作演變而來,隨著web2.0的發展,網頁不再只是承載單一的文字和圖片,各種豐富媒體讓網頁的內容更加生動,網頁上軟體化的交互形式為用戶提供了更好的使用體驗,這些都是基於前端技術實現的。

經過了市場的沉澱,很多前端們開始無所適從,以前簡單的技能已經無法適用前端技術的發展,新技術新框架又不斷涌現,

 

前端開發市場仍然有著大量的需求。我們知道前端開發應用是很廣泛的,這些公司都有前端開發崗位(當然這隻是一部分):並且薪資也不低。除了互聯網公司,傳統公司想要連接互聯網,同樣離不開前端工程師。而隨著H5、微信小程式、各類APP的發展,對於前端的需求將一直上漲。所以總的來說,前端開發行業仍然有羹可分。並且營養豐富。

任何行業都需要努力,前端開發也不例外,首先你必須真的想要學習,想要改變。你需要有一個清晰的學習路線和方向,最好是能跟著有經驗的人學習,這樣才能快速入門前端,不走彎路。

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

網頁佈局基礎:HTML+CSS

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

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

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

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

1.標簽語義化,SEO

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

3.網頁結構

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

5.CSS選擇器

6.CSS佈局浮動、定位

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

瀏覽器腳本語言:JavaScript

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

由於今年疫情,所以轉行學前端的千萬不要選擇裸辭,能邊工作邊學習儘量就邊工作邊學習,今年就業環境嚴峻,崗位需求降低,
對於個人技術水平提高,所以千萬不能盲目跟風,自己是否對於前端感興趣
是否有學習的耐心,是否有這方面的學習能力,希望你可以自學半個月自己感受一下,有任何問題隨時問我。我建立的前端學習q裙
                                                                                               851231348

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通過封裝,減輕了遍歷、對象選擇等等很多的問題。把網頁特效的實現變得簡單化,通過調用方法就可以了。

 

在學習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佈局。

 

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

小程式

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

 

Hybrid-App

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

 

前端主流技術框架

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

 

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

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

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

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

Web前端開發入門低的另一個重要表現就是符合8/2定律,也就是20%的東西使用率占到80%。所以很適合囫圇吞棗,因此我們的重點就是把這20%學起來,而首先要做的就是把這20%的東西找出來。前端這20%的東西大概就是常用的HTML標簽,css的盒子模型,基本的原生js,以及熟練使用jquery,ajax,常見瀏覽器的相容。拿下這些東西意義非凡,一方面證明你適合做前端這份工作,另一方面這些技能能讓你找到一份工作。

讓你能夠從容地去學習剩下的80%。總之就是專心對付重要的東西,那些什麼less、sass、angular這類的東西,當你把我之前說的基礎打好之後,學習起來暢通無阻,隨學隨用。較難的就是實踐,只有實踐才能學到真正的技術,新人很難參與一些有價值有意義的項目,沒有這些項目又很難成長,所以自己有項目可參與應該珍惜。

 

小白學習web前端最常見的幾個問題和誤區:

1.無腦盲目的刷視頻去看,但是很少去練習。正常的狀態應該是在整個學習的過程中,四分之三的時間都是在練習。視頻只是讓你瞭解學習什麼內容,看一遍就行了。有很多人都是無腦的刷視頻看,最後浪費幾個月的時間,也找不到工作。

2.小白開始學習的時候,看書是一種非常嚴重的誤區。所以新手禁忌看書學習編程。至於原因是什麼,在這裡我不做太多解釋。

3.很多人都是遇到一個問題,就是能看懂代碼,但是不會寫,這是比較常見的問題。

4.還有一個最現實的問題,就是學了後面的忘了前面,這是由於學習方法和方式存在這很大的錯誤。

5.整個學習流程混亂,沒有系統的安排,學的不系統不專業,技術掌握的不好,浪費幾個月甚至半年的時間。

6.缺乏和專業人士交流的過程,作為一個小白,在初期學習的時候,所學的最多的東西一定是從別人那裡學到的,閉門造車。

不管是web前端技術還是其他IT技術也好,其實都是從零基礎開始的,你可以直接學習或者是通過相近經歷轉行。所以新人不需要因零基礎而擔心自己學不會。
想要成為合格的WEB前端工程師,其實也不是很難的事情,主要是要選擇科學的學習方式。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要 數據是我們每天都在接觸的東西,我們需要清晰的瞭解去瞭解數據的變化趨勢,就需要讓數據可視化。最近在接觸學習antd的社區精選組件,上一篇文章主要是講了高德地圖的應用,這次我們就來分享下G2Plot在react中實現可視化數據圖表的簡單應用。 Ant Design Charts的使用方法 安裝 n ...
  • 摘要 平常生活中,地圖導航是必不可少的,最近在學習Ant Design,瞭解了下社區的精選組件,看到了與地圖相關的精品組件庫,高德地圖組件庫。所以記錄下這次高德地圖的使用心得,既可以提升自己的業務多樣性,也可以分享給需要的小伙伴。 React-Amap用法 安裝 npm install --save ...
  • 本文主要介紹如何通過CLI命令行(也就是終端或者cmd打開的那個shell視窗)實現 js和 css 的合併壓縮。 uglifyjs 合併壓縮 js: 1.安裝node 這一步就不多說了,下載node自行安裝。 2.安裝 uglifyjs 全局安裝: npm install -g uglify-js ...
  • 一. 普通對象與函數對象 JavaScript 中,萬物皆對象!但對象也是有區別的。分為普通對象和函數對象,Object 、Function 是 JS 自帶的函數對象。下麵舉例說明 var o1 = {}; var o2 =new Object(); var o3 = new f1(); ​ fun ...
  • # 從零開始的前端生活--盒尺寸 padding padding對塊級元素的影響 css中預設的box-sizing 是content-box,使用padding會額外增加元素的尺寸。 當padding足夠大,把width擠沒掉了,這時width就無效。裡面的內容表現為“首選最小寬度” 首選最小寬 ...
  • 最近碰到了關於閉包的問題,查看資料總結下我眼中的閉包 var price=document.getElementsByTagName('div'); for (var i = 0; i < 6; i++) { price[i].onClick=function () { console.log(i) ...
  • 1.創建github庫 創建github庫這個網上有很多教程,不是很難,不懂得可以搜下。 創建好庫之後我們把庫的地址複製下來 點擊圖中標註的地方就能把github庫的地址複製下來。 之後我們把庫clone到本地,我們需要新建一個文件夾,然後開始clone,克隆方式可以使用git也可以cmd(我的是w ...
  • 俗人手把手教你搭建vue項目 項目使用vue-cli開始,包含全家桶(vue-cli + vue3.0 + vuex + vue-router + axios + element-ui),包括自定義方法等。俗人會在本文中把詳細的流程呈現出來。 我把新建的項目放到我的庫里,有需要的可以自行c http ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...