前端三要素
HTML（結(jié)構(gòu)）：超文本標(biāo)記語言（Hyper Text Markup Language），決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容
CSS（表現(xiàn)）：層疊樣式表（Cascading Style Sheets）驾锰，設(shè)定網(wǎng)頁的表現(xiàn)樣式
JavaScript（行為）：是一種弱類型腳本語言，其源代碼不需經(jīng)過編譯稻据，而是由瀏覽器解釋運(yùn)行，用于控制網(wǎng)頁的行為
結(jié)構(gòu)層（HTML5）
html全稱為HyperText Markup Language捻悯，中文直意為“超級(jí)文本標(biāo)記語言”而那個(gè)5對(duì)應(yīng)的是它的重大修改次數(shù)淤毛，自然你就明白了今缚，5就是第五修改低淡，第五代更新！
那么與H4對(duì)比H5有哪些好處?
- 通訊能力增強(qiáng)
例如: WebSocket長連接蔗蹋，支持后端推送 - 性能得到了提示
WebWorker -- 實(shí)現(xiàn)了網(wǎng)頁多線程加載，不會(huì)阻塞UI主線程 - 前端存儲(chǔ)能力得到提升
cookie vs WebStorage：2K數(shù)據(jù) - 5M數(shù)據(jù) - 增加了一系列新功能
拖放API: 例如：dragstart：拖動(dòng)開始\drag：拖動(dòng)中\(zhòng)dragend：拖動(dòng)結(jié)束
地理定位: 通過瀏覽器獲取當(dāng)前用戶的所在地理坐標(biāo)猪杭，以實(shí)現(xiàn)“LBS服務(wù)”（Location Based Service）餐塘，如實(shí)時(shí)導(dǎo)航、周邊推薦戒傻。
圖片處理加強(qiáng)：例如：SVG繪圖（矢量圖）,Canvas繪圖(位圖)
視頻和音頻: 增加了視頻及音頻的標(biāo)簽
增強(qiáng)型表單：新的表單元素、表單元素的新屬性 - 新的語義標(biāo)簽：
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
表現(xiàn)層（CSS3）
CSS 層疊樣式表是一門標(biāo)記語言需纳，并不是編程語言，因此不可以自定義變量不翩，不可以引用等，換句話說就是不具備任何語法支持慌盯，它主要缺陷如下：
- 語法不夠強(qiáng)大掂器，比如無法嵌套書寫亚皂，導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器；
- 沒有變量和合理的樣式復(fù)用機(jī)制国瓮，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出灭必，導(dǎo)致難以維護(hù)乃摹；
這就導(dǎo)致了我們?cè)诠ぷ髦袩o端增加了許多工作量。為了解決這個(gè)問題孵睬，前端開發(fā)人員會(huì)使用一種稱之為 【CSS 預(yù)處理器】 的工具，提供 CSS 缺失的樣式層復(fù)用機(jī)制掰读、減少冗余代碼，提高樣式代碼的可維護(hù)性烁试。大大提高了前端在樣式上的開發(fā)效率。
什么是 CSS 預(yù)處理器
CSS 預(yù)處理器定義了一種新的語言拢肆，其基本思想是减响，用一種專門的編程語言，為 CSS 增加了一些編程的特性支示，將 CSS 作為目標(biāo)生成文件鄙才，然后開發(fā)者就只要使用這種語言進(jìn)行 CSS 的編碼工作颂鸿。轉(zhuǎn)化成通俗易懂的話來說就是“用一種專門的編程語言咒循，進(jìn)行 Web 頁面樣式設(shè)計(jì)绞愚，再通過編譯器轉(zhuǎn)化為正常的 CSS 文件颖医，以供項(xiàng)目使用”。
常用的 CSS 預(yù)處理器有哪些
- SASS：基于 Ruby熔萧，通過服務(wù)端處理，功能強(qiáng)大贮缕。解析效率高俺榆。需要學(xué)習(xí) Ruby 語言，上手難度高于 LESS罐脊。
- LESS：基于 NodeJS，通過客戶端處理萍桌，使用簡單。功能比 SASS 簡單恃逻，解析效率也低于 SASS藕施，但在實(shí)際開發(fā)中足夠了，所以我們后臺(tái)人員如果需要的話铅碍，建議使用 LESS。
Less示例：
/* Mixin */
@base: #663333;
@complement1: spin(@base, 180); //旋轉(zhuǎn)180度
@complement2: darken(spin(@base, 180), 5%); //變暗5%
@lighten1: lighten(@base, 15%); //變亮15%
@lighten2: lighten(@base, 30%); //變亮30%
/* Implementation */
.one {color: @base;}
.two {color: @complement1;}
.three {color: @complement2;}
.four {color: @lighten1;}
.five {color: @lighten2;}
CSS3新特性
1.媒體查詢(@media)尘盼，多欄布局（flex）
2.css動(dòng)畫：取代動(dòng)畫圖片、Flash 動(dòng)畫以及 JavaScript卿捎，主要是transform及animation
太陽9大行星示例
3.CSS3選擇器径密，例如：p:nth-child(3){} //父元素的第3個(gè)子元素
4.文字特效，例如反射效果
<style>
.classReflect{
-webkit-box-reflect: below 5px
-webkit-gradient(linear, left top, left bottom, from(transparent),
to(rgba(255, 255, 255, 0.51)));
}
</style>
<p class="classReflect">WEB2.0</p>
行為層（JavaScript）
JavaScript 一門弱類型腳本語言，其源代碼在發(fā)往客戶端運(yùn)行之前不需經(jīng)過編譯植袍，而是將文本格式的字符代碼發(fā)送給瀏覽器由瀏覽器解釋運(yùn)行籽懦。
ES6
原生 JS ，也就是讓我們按照 【ECMAScript】 標(biāo)準(zhǔn)的開發(fā)方式暮顺，簡稱是 ES，特點(diǎn)是所有瀏覽器都支持捶码。
- ES5（全瀏覽器支持）
- ES6（常用，當(dāng)前主流版本）
區(qū)別就是逐步增加新特性档押。
ES6新特性
主流JavaScript 框架
- jQuery：大家熟知的 JavaScript 框架尤筐，優(yōu)點(diǎn)是簡化了 DOM 操作洞就，缺點(diǎn)是 DOM 操作太頻繁盆繁，影響前端性能旬蟋；在前端眼里使用它僅僅是為了兼容 IE6、7冕碟、8匆浙；
- Angular：Google 收購的前端框架，由一群 Java 程序員開發(fā)首尼，其特點(diǎn)是將后臺(tái)的 MVC 模式搬到了前端并增加了模塊化開發(fā)的理念，與微軟合作软能，采用 TypeScript 語法開發(fā)；對(duì)后臺(tái)程序員友好凳枝，對(duì)前端程序員不太友好跋核；最大的缺點(diǎn)是版本迭代不合理（如：1代 -> 2代岖瑰，除了名字，基本就是兩個(gè)東西聪全；截止發(fā)表博客時(shí)已推出了 Angular6）
- React：Facebook 出品辅辩，一款高性能的 JS 前端框架；特點(diǎn)是提出了新概念 【虛擬 DOM】 用于減少真實(shí) DOM 操作玫锋，在內(nèi)存中模擬 DOM 操作，有效的提升了前端渲染效率谦炬；缺點(diǎn)是使用復(fù)雜键思，因?yàn)樾枰~外學(xué)習(xí)一門 【JSX】 語言；
-
Vue：一款漸進(jìn)式 JavaScript 框架吼鳞，所謂漸進(jìn)式就是逐步實(shí)現(xiàn)新特性的意思叫搁，如實(shí)現(xiàn)模塊化開發(fā)、路由渴逻、狀態(tài)管理等新特性。其特點(diǎn)是綜合了 Angular（模塊化） 和 React（虛擬 DOM） 的優(yōu)點(diǎn)雪位； -
Axios：前端通信框架梨撞；因?yàn)?Vue的邊界很明確雹洗，就是為了處理 DOM聋袋，所以并不具備通信能力，此時(shí)就需要額外使用一個(gè)通信框架與服務(wù)器交互嗜侮；當(dāng)然也可以直接選擇使用 jQuery 提供的 AJAX 通信功能；
UI 框架
- Ant-Design：阿里巴巴出品锈颗，基于 React 的 UI 框架
- ElementUI：餓了么出品，基于 Vue 的 UI 框架
- Bootstrap：Twitter 推出的一個(gè)用于前端開發(fā)的開源工具包
- AmazeUI：又叫“妹子 UI”击吱，一款 HTML5 跨屏前端框架
JavaScript 構(gòu)建工具
- Babel：JS 編譯工具，主要用于瀏覽器不支持的 ES 新特性朵纷，比如用于編譯 TypeScript
- WebPack：模塊打包器永脓，主要作用是打包、壓縮常摧、合并及按序加載
Nodejs后端技術(shù)
前端人員為了方便開發(fā)也需要掌握一定的后端技術(shù)，但我們 Java 后臺(tái)人員知道后臺(tái)知識(shí)體系極其龐大復(fù)雜落午，所以為了方便前端人員開發(fā)后臺(tái)應(yīng)用，就出現(xiàn)了 NodeJS 這樣的技術(shù)界拦。
NodeJS 的作者已經(jīng)聲稱放棄 NodeJS（說是架構(gòu)做的不好再加上笨重的 node_modules盐类，可能讓作者不爽了吧），開始開發(fā)全新架構(gòu)的 Deno
既然是后臺(tái)技術(shù)在跳，那肯定也需要框架和項(xiàng)目管理工具隐岛，NodeJS 框架及項(xiàng)目管理工具如下：
- Express：NodeJS 框架
- Koa：Express 簡化版
- NPM：項(xiàng)目綜合管理工具，類似于 Maven
- YARN：NPM 的替代方案割坠，類似于 Maven 和 Gradle 的關(guān)系
附A：當(dāng)前主流前端框架
Vue.js
iView
iview 是一個(gè)強(qiáng)大的基于 Vue 的 UI 庫妒牙，有很多實(shí)用的基礎(chǔ)組件比 elementui 的組件更豐富彼哼，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品湘今。使用單文件的 Vue 組件化開發(fā)模式 基于 npm + webpack + babel 開發(fā)，支持 ES2015 高質(zhì)量拴签、功能豐富 友好的 API ，自由靈活地使用空間蚓哩。
備注：屬于前端主流框架，選型時(shí)可考慮使用喜颁，主要特點(diǎn)是移動(dòng)端支持較多
ElementUI
Element 是餓了么前端開源維護(hù)的 Vue UI 組件庫曹阔，組件齊全稿茉，基本涵蓋后臺(tái)所需的所有組件漓库，文檔講解詳細(xì)，例子也很豐富茂装。主要用于開發(fā) PC 端的頁面少态，是一個(gè)質(zhì)量比較高的 Vue UI 組件庫。
備注：屬于前端主流框架侨歉，選型時(shí)可考慮使用，主要特點(diǎn)是桌面端支持較多
ICE
飛冰是阿里巴巴團(tuán)隊(duì)基于 React/Angular/Vue 的中后臺(tái)應(yīng)用解決方案火脉，在阿里巴巴內(nèi)部棋枕，已經(jīng)有 270 多個(gè)來自幾乎所有 BU 的項(xiàng)目在使用兵睛。飛冰包含了一條從設(shè)計(jì)端到開發(fā)端的完整鏈路祖很，幫助用戶快速搭建屬于自己的中后臺(tái)應(yīng)用。
備注：主要組件還是以 React 為主骨稿，截止 2019 年 02 月 17 日更新博客前對(duì) Vue 的支持還不太完善形耗，目前尚處于觀望階段
VantUI
Vant UI 是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的 Vue 組件庫激涤，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件倦踢。通過 Vant，可以快速搭建出風(fēng)格統(tǒng)一的頁面般贼，提升開發(fā)效率。
AtUI
at-ui 是一款基于 Vue 2.x 的前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品端衰。 它提供了一套 npm + webpack + babel 前端開發(fā)工作流程灭抑，CSS 樣式獨(dú)立腾节，即使采用不同的框架實(shí)現(xiàn)都能保持統(tǒng)一的 UI 風(fēng)格案腺。
CubeUI
cube-ui 是滴滴團(tuán)隊(duì)開發(fā)的基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫。支持按需引入和后編譯同辣，輕量靈活；擴(kuò)展性強(qiáng)陡舅，可以方便地基于現(xiàn)有組件實(shí)現(xiàn)二次開發(fā)靶衍。
混合開發(fā)
Flutter
Flutter 是谷歌的移動(dòng)端 UI 框架，可在極短的時(shí)間內(nèi)構(gòu)建 Android 和 iOS 上高質(zhì)量的原生級(jí)應(yīng)用田弥。Flutter 可與現(xiàn)有代碼一起工作, 它被世界各地的開發(fā)者和組織使用, 并且 Flutter 是免費(fèi)和開源的偷厦。
備注：Google 出品剖笙，主要特點(diǎn)是快速構(gòu)建原生 APP 應(yīng)用程序弥咪，如做混合應(yīng)用該框架為必選框架
Ionic
Ionic 既是一個(gè) CSS 框架也是一個(gè) Javascript UI 庫聚至，Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架扳躬。通過 SASS 構(gòu)建應(yīng)用程序库说，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用潜的。它使用 JavaScript MVVM 框架和 AngularJS/Vue 來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定亡呵，使用它成為 Web 和移動(dòng)開發(fā)者的共同選擇。
