前端知識體系
想要成為真正的"互聯網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語言,上s手難度高於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的長處,並擁有自己獨特的功能
- 開源,社區活躍度高
第一步:新建項目
直接新建一個文件夾,然后用idea直接打開這個文件夾
我就不從官網下載js源文件,或者從github克隆源文件了,直接用cnd引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
或者
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
其中第一個是源碼,第二個是沒有空格的壓縮版,只有一行
HTML如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- view層模板-->
<div id="app">
{{message}} //第一個輸出
{{message}} //第二個輸出
</div>
<!--導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> //用上面說的cnd引入
<script>
var vm = new Vue({ //這里跟定義一個對象差不多
el: "#app", //el(element):元素 綁定app
//Model數據層
data: { //跟鍵值對差不多
message: "hello,vue!" //值
}
});
</script>
</body>
</html>
界面如下
以上就能看出Vue.js的MV了,那么VM體現在哪里呢?我們繼續打開剛才這個網頁,點擊f12.在console中輸入
vm.message = "窩草!竟然!我的天!"
回車
vm.message = "窩草!竟然!我的天!"
這里就會直接改變,而不是像之前的頁面一樣刷新之后才會改變