前端技術彙總+Vue最新快速上手
前端知識體系
想要成為真正的"網際網路Java全站工程師"還有很長的一段路要走,其中"我大前端"是繞不開的一門必修課.本階段主要目的就是Java後端程式設計師認識一下前端,瞭解前端,掌握前端為成為現實的全站工程師再向前邁進一步.
前端三要素
- HTML(結構):超文字標記語言(Hyper Test Markup Language),決定網頁的結構和內容
- CSS(表現):層疊樣式(Cascading Style Sheets),設定網頁的表現形式
- JavaScript(行為):是一種弱型別指令碼語言,其原始碼不需要經過編譯,而是由瀏覽器解釋執行,用於控制頁面行為
結構層(HTML)
略,太簡單
表現層(CSS)
Css層疊樣式表是一門標記語言,並不是程式語言,因此不可以自定義變數,不可以引用等,換句話說就是佈局任何語法支援,它主要缺陷如下:
- 語法不夠欠打,比如無法巢狀書寫,導致模組化開發中需要書寫很多重複的選擇器;
- 沒有變數和合理的樣式服用機制,使得邏輯上相關的水性指必須以字面量的形式重複輸出,導致難以維護
這就導致了我們在工作中無端增加了許多工作量,為了解決這個問題,前端開發人員使用一種稱之為
CSS前處理器的工具,提供Css確實的樣式層複用機制,減少冗餘程式碼,提高樣式程式碼的可維護性.大大提高了前端在樣式上的而開發效率.
什麼是CSS前處理器
CSS前處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為CSS增加了一些程式設計的特性,將CSS作為目標生成檔案,然後開發者就只要使用這種語言進行CSS的編碼工作.用通俗一點的話說就是"用一種專門的程式語言,進行Web頁面樣式設計,再通過編譯器轉化為正常的CSS檔案,以供專案使用"
常用的CSS前處理器有哪些
- SASS:基於Ruby,通過服務端處理,功能強大,解析效率高.需要學習Ruby語言,上手難度高於LESS
- LESS:基於NodeJS,通過客戶端處理,使用簡單.功能比SASS簡單,解析效率也低於SASS,但是實際開發種族狗狗了,所以魔門後臺人員如果需要的話,建議使用LESS.
行為層(JavaScript)
JavaScript一門弱型別指令碼語言,其原始碼在發往客戶端執行之前不需要進行編譯,而是將文字格式的字元程式碼送給瀏覽器解釋執行.
Native 原生JS開發
原生JS開發,也就是讓我們只能找[ECMAScript]標準的開發方式,簡稱ES,特點是所有瀏覽器都支援.
TypeScript微軟的標準
TypeScript是一種由微軟開發的自由和開源的程式語言.他是JavaScript的一個超集,而且本質上這個語言添加了可選的靜態型別和基於類的面向物件程式設計.
該語言的特點就是除了具備的ES的特性之外還納入了許多不再標準範圍內的新特性,所以會導致很多瀏覽器不能支援TypeScript語法,需要解釋後(編譯成 JS)才能被瀏覽器正確執行.
JavaScript框架
- JQuery:大家熟知的JS框架,有點是簡化了DOM操作,缺點是DOM操作太頻繁,影響前端效能;在前端眼裡使用它僅僅是為了相容IE6,7,8;
- Angular:Google收購的前端框架,由一群Java程式設計師開發,其特點是將後臺的MVC模式搬到了前端並增加了模組化開發的理念,與微軟合作,採用TypeScript語法開發;對後臺程式設計師友好,對前端程式設計師不太友好;做大缺點是版本迭代不合理
- React:Facebook出品,一款高效能的JS前端框架;夜店是提出了新概念[虛擬DOM]用於減少真是的DOM操作,在記憶體中模擬DOM操作,有效的提升了前端渲染效率;缺點是使用複雜,因為需要一個額外學習一門JSX語言;
- Vue:一款漸進式JavaScript框架,所為漸進式就是逐步實現新特性的意思,如實現模組化開發,路由,轉檯管理等特性.其特點是綜合了Auglar模組化和React的有點
- Axious: 前端通訊框架;因為Vue的便捷很明確,就是為了處理DOM所以並不具備通訊功能,此時就需要額外使用一個通訊框架與服務互動;當然也可以直接使用JQuery提供的AJAX通訊功能;
UI框架
- Ant-Design:Alibaba出品基於React的UI框架
- ElementUI.iview.ice:餓了嗎出品,基於Vue的UI框架
- Bootstrap: Twitter推出的一個用於前端開發的開源工具包
- AmazeUI: 又叫妹子UI,一款HTML5跨屏前端框架
JavaScript構建工具
- Babel: JS編譯工具,主要用於瀏覽器不支援的ES新特性,比如用於編譯TypeScript
- WebPack:模組打包器,主要作用是打包,壓縮,合併及按序載入
三端統一
混合開發(Hybrid App)
主要目的是實現一套底阿媽三端統一(PC,Android,IOS:.ipa)並能夠呼叫到裝置底層硬體(如:感測器,GPS,攝像頭等),打包方式主要有以下兩種
- 雲打包:Hbuild -> HbuildX,DCloud出品:API Cloud
- 本地打包: Cordova
微信小程式
詳見微信官網,這裡介紹一個方便微信小程式UI:WeUI
後端技術
前端技術人員為了方便開發也需要掌握一定的後端技術,但是我們Java後臺人員指導後臺只是體系機器龐大複雜,所以為了方便前端人員開發後臺應用,就出現了NodeJS這樣的技術.
NodeJS的作者已經生成放棄NodeJS,開始開發全新的Deno
既然是後臺技術,那肯定也需要框架和專案管理工具,NodeJS框架以及專案管理工具如下
- Express: NodeJS框架
- Koa:Express簡化版
- NPM:專案綜合管理工具,類似於Maven
- YARN:NPM代替方案,類似於Maven和Gradle的關係
主流前端框架
Vue.js
iView
iView是一款強大的基於Vue的UI庫,有很多實用的基礎元件比elementtui的元件更豐富,主要服務於PC介面的中後臺產品.使用單檔案的Vue元件開發模式,基於npm+webpack+babel開發
支援ES2015高質量,功能豐富友好API,自由靈活的使用空間
ElementUI
Element是餓了嗎前端開源維護的Vue UI元件庫,元件齊全,基本涵蓋後臺所需的所有元件,文件講解詳細,例子也很豐富,主要開發PC端頁面,是一個質量比較高的Vue UI元件庫
ICE
飛冰是阿里巴巴團隊基於React/Angular/Vue的中後臺應用解決方案,在阿里巴巴內部,已經有270多個來自幾乎所有BU的專案在使用,飛冰包含了一條從設計端開發端的完整鏈路,幫助使用者快速搭建屬於自己的中臺應用
前端為主的MV*時代
- MVC:Model View Controller
- MVP:Model View Presenter
- MVVM:Model View ViewModel
為了降低前端開發的複雜度,湧現了大量的前端框架,比如:AngularJS,React,Vue.js,EmberJS等,這些框架總原則是先按照型別分層,比如Iemplates,Controllers,Models然後再層內做切分
Vue
Vue概述
Vue是一套用於構建使用者介面的漸進式框架,釋出於2014年2月,與其他的大型框架不同的是,Vue被設計為可以自底向上層主鍵應用.Vue的核心只關注檢視層,不近易於上手,還便於與第三方庫(如vue-router:跳轉,vue-resource:通訊,vuex:管理或已有專案整合)
官網:https://cn.vuejs.org/v2/guide/
遵循Soc原則
檢視: 給使用者看,重新整理後臺給的資料
為什麼要使用Vue.JS
- 輕量級,體積小是一個重要指標.Vue.js壓縮後只有20多kb
- 移動優先,更適合移動端,比如移動端Touch事件
- 易上手,學習曲線平穩,文件齊全
- 吸收了Angular和React的長處,並擁有自己獨特的功能
- 開源,社群活躍度高