前端開發的五大知識（一篇講透大前端）

2023-04-18 23:55:59

一篇講透「大」前端

說到前端大家就會想到瀏覽器，對！前端的主要工作就是通過瀏覽器顯示你要展現的內容。之前的瀏覽器性能和產品多樣、性能差別大、語法還不通一（那個調試過程真的苦不堪言），現在學習前端的朋友，真心替你門感到很幸福。。。

前端三板斧:

1.html

2.Css

3.javascript

其中html ：作用就是展現頁面中的按鈕、文本框、輸入框、文字、圖片。比如：標籤、、.

Css：給按鈕、文本框、輸入框、文字添加顏色。

Javascript：執行頁面中的按鈕按下時動作的程序，和一些動態效果

模板引擎

通過三板斧怎麼做出類似表格的頁面內容呢？後來就發展出了（後臺java），幾種模板：

jsp、freemarker、velocity，數據轉成頁面內容,動態數據生成靜態頁面

插件jQuery

因為之前的瀏覽器性能和產品多樣、性能差別大、語法還不通一，這時神器誕生jQuery，相當於在javascript外面包了一層，同一語法並提高了開發效率

頁面UI

隨著發展市面上就出現了一些UI框架，Extjs自成體系，easyUI，layui。UI提供組件（比如）：下拉框，樹形結構，進度條，表格等使web頁面的空間更加漂亮，並且開發人員的效率也更高。

可視化技術：

隨著時代進步，可視化發展起來了相應的技術火了起來：svg，canvas，webgl（html5）

Svg:可伸縮矢量圖形 (Scalable Vector Graphics),用來定義用於網絡的基於矢量的圖,SVG 使用 XML 格式定義圖形。

Canvas:通過 JavaScript 在網頁矩形區域繪製路徑、矩形、圓形、字符以及添加圖像，可以控制到像素級別。

Webgl：簡單說WebGL是一種3D繪圖標準，提供硬體3D加速渲染，前端開發人員就可以更流暢地展示一些3D場景和模型，完善數據視覺化。

Web的可視化發展就是網際網路的發展必然結果，同時前端框架也層出不窮。

前端框架：Vue，React

Vue 是一套用於構建用戶界面的漸進式框架。所謂框架，就是vue已經給你建好地基、結構，你蓋房子需要在vue的結構規則上去實現。

之前的界面需要操作dom元素：javascript，jQuery，前端模板

vue 的出現不用關心dom渲染，雙向數據綁定，減少的DOM操作，提高渲染效率

React：構建用戶界面的JavaScript框架。

使用VDOM，減少DOM的交互，使用JSX（解決了部分JS的缺陷），單向響應數據流。

現在前端頁面越來越複雜，就出現了相應的優化工具WebPack

WebPack主要進行模塊轉換，打包，優化的。

打包：把多個Javascript文件打包成一個文件，提升下載速度。

轉換：把拓展語言轉換成為普通的JavaScript，使瀏覽器能夠識別。

優化：前端變的越來越複雜後，性能也會遇到問題，而WebPack也開始肩負起了優化和提升性能的責任。

WebPack的作用:

伺服器開發：NodeJS

NodeJs :運行在服務端的 JavaScript。基於Google的V8引擎，

通過事件驅動I/O服務端JavaScript環境