華為云大前端第三階段技術(shù)學(xué)習(xí)收獲總結(jié)

不知不覺，華為云大前端公開課第三階段已經(jīng)接近尾聲，所謂“工欲善其事，必先利其器”，要想學(xué)好大前端，在企業(yè)開發(fā)中提升開發(fā)效率，框架是不可或缺的一部分，感謝華為云提供了這么好的一次學(xué)習(xí)大前端框架的機(jī)會(huì)，通過這次學(xué)習(xí)可以說是收獲滿滿，以下是我對(duì)華為云大前端第三階段技術(shù)學(xué)習(xí)收獲的簡(jiǎn)要總結(jié)。

一、第三階段學(xué)習(xí)了哪些技術(shù)內(nèi)容？

從8月23日至今不到一個(gè)月的時(shí)間，通過第三階段的學(xué)習(xí)，我系統(tǒng)的學(xué)習(xí)了大前端三大主流框架（Vue+Node+React）相關(guān)的技術(shù)知識(shí)，在學(xué)習(xí)的過程中，為了能更好的、更深入的理解老師所講解的內(nèi)容，自己也去學(xué)習(xí)了一些輔助性的技術(shù)，如：ES6主要語法、Promise相關(guān)語法及axios的知識(shí)，用四個(gè)字精準(zhǔn)的概述這一個(gè)月的學(xué)習(xí)就是：受益匪淺。

二、針對(duì)所學(xué)技術(shù)內(nèi)容收獲了什么？

1、ES6學(xué)習(xí)收獲

ES6語法可以說是學(xué)習(xí)Vue和React的基礎(chǔ)，如果不了解ES6的一些新特性，對(duì)Vue和React的很多代碼都可能無法理解，此次學(xué)習(xí)ES6雖然沒有深入研究，主要學(xué)習(xí)到了以下四個(gè)常用的特性：

（1）變量聲明時(shí)推薦使用let，相比之前的var，let變量無論聲明在何處，都會(huì)被視為聲明在函數(shù)的最頂部；可以使用const聲明常量。

（2）以前字符串中使用變量都是采用拼接的形式，在ES6中則可以直接使用模板字符串，直觀且方便。

（3）ES6中可以使用箭頭函數(shù)，相比于普通函數(shù)，箭頭函數(shù)語法更加簡(jiǎn)潔、清晰，箭頭函數(shù)不會(huì)創(chuàng)建自己的this且箭頭函數(shù)繼承而來的this指向永遠(yuǎn)不變（這個(gè)特性在學(xué)習(xí)Vue和React時(shí)深有體會(huì)）。

（4）ES6中可以對(duì)對(duì)象和數(shù)組進(jìn)行解構(gòu)賦值，使用方便，不用逐個(gè)屬性取值。

2、Promise學(xué)習(xí)收獲

Promise其實(shí)也是ES6中的，是異步編程的一種方案，從語法上講，Promise是一個(gè)對(duì)象，它可以獲取異步操作的消息。通過對(duì)Promise的學(xué)習(xí)主要收獲如下：

（1）了解了promise對(duì)象的3個(gè)狀態(tài)：初始化狀態(tài)(pending)、成功狀態(tài)(fullfilled)、失敗狀態(tài)(rejected)；

（2）基于Promise處理多次Ajax請(qǐng)求時(shí)，可以采用鏈?zhǔn)秸{(diào)用的方式，減少多層嵌套；

（3）學(xué)了Promise的常用API，如：

常用實(shí)例方法： promise.then()：獲取異步任務(wù)的正常結(jié)果; promise.catch()：獲取異步任務(wù)的異常結(jié)果; promise.finaly()：異步任務(wù)無論成功與否，都會(huì)執(zhí)行。 常用對(duì)象方法： Promise.all()：并發(fā)處理多個(gè)異步任務(wù)，所有任務(wù)都執(zhí)行成功，才能得到結(jié)果; Promise.race(): 并發(fā)處理多個(gè)異步任務(wù)，只要有一個(gè)任務(wù)執(zhí)行成功，就能得到結(jié)果。

3、axios學(xué)習(xí)收獲

axios是前端最流行的ajax請(qǐng)求庫，Vue和React官方都推薦使用axios發(fā)ajax請(qǐng)求，通過本次對(duì)axios的學(xué)習(xí)，學(xué)會(huì)了如何安裝axios、如何創(chuàng)建axios以及如何使用axios發(fā)送請(qǐng)求，也學(xué)習(xí)了axios一些常用的語法，如下：

axios(config): 通用/最本質(zhì)的發(fā)任意類型請(qǐng)求的方式 axios(url[, config]): 可以只指定url發(fā)get請(qǐng)求 axios.request(config): 等同于axios(config) axios.get(url[, config]): 發(fā)get請(qǐng)求 axios.delete(url[, config]): 發(fā)delete請(qǐng)求 axios.post(url[, data, config]): 發(fā)post請(qǐng)求 axios.put(url[, data, config]): 發(fā)put請(qǐng)求 axios.defaults.xxx: 請(qǐng)求的默認(rèn)全局配置 axios.interceptors.request.use(): 添加請(qǐng)求- axios.interceptors.response.use(): 添加響應(yīng)- axios.create([config]): 創(chuàng)建一個(gè)新的 axios

4、Vue學(xué)習(xí)收獲

通過本次系統(tǒng)的對(duì)Vue框架的學(xué)習(xí)，主要學(xué)習(xí)收獲如下：

（1）深入理解了什么是MVVM模型，深入學(xué)習(xí)了Vue的模板和數(shù)據(jù)綁定技術(shù)、了解了什么是組件化編程及虛擬DOM技術(shù)；

（2）學(xué)習(xí)了雙大括號(hào)表達(dá)式的詳細(xì)用法及常用聲明式指令，如v-if、v-else、v-model、v-for、v-show等；

（3）學(xué)習(xí)了什么是計(jì)算屬性、什么是監(jiān)視屬性及二者的常用場(chǎng)景及使用方式，學(xué)習(xí)了事件綁定及如何防止事件冒泡等；

（4）深入了解了Vue實(shí)例的生命周期及每個(gè)生命周期函數(shù)的作用及使用場(chǎng)景；

（5）學(xué)習(xí)了組件間通信常用的五種方式：prpos、vue的自定義事件、消息訂閱與發(fā)布(如: pubsub 庫) 、slot、vuex；

（6）知道了Vue常用的UI庫，如移動(dòng)端常用mint-ui，PC端常用element；

（7）深入學(xué)習(xí)和理解了vue-router相關(guān)的技術(shù)知識(shí)，學(xué)會(huì)了路由的基本配置、路由器的注冊(cè)、路由組件的使用、嵌套路由、路由組件間數(shù)據(jù)傳遞等；

（8）深入學(xué)習(xí)了vuex，通過vuex對(duì)多組件間共享狀態(tài)進(jìn)行集中管理，使組件間通信更加簡(jiǎn)單且容易管理；學(xué)習(xí)了vuex五個(gè)核心對(duì)象：state、mutations、actions、getters、modules；

（9）最后深入底層，學(xué)習(xí)了Vue核心源碼，了解了Vue模板解析的全過程，數(shù)據(jù)綁定的核心原理及數(shù)據(jù)綁定的四個(gè)核心對(duì)象（Observer、Dep、Compiler、Watcher）。

5、Node學(xué)習(xí)收獲

Node.js是一個(gè)能夠在服務(wù)器端運(yùn)行JavaScript的開放源代碼、跨平臺(tái)JavaScript運(yùn)行環(huán)境，通過本次對(duì)Node.js的學(xué)習(xí)，主要收獲如下：

（1）學(xué)習(xí)了以解壓縮和直接安裝的方式安裝及配置node環(huán)境；

（2）學(xué)習(xí)了node的主要特點(diǎn)及模塊化管理的思想，學(xué)會(huì)了如何引用模塊及如何定義模塊；

（3）學(xué)習(xí)了一些常用的npm命令，如下：

npm -v 查看npm的版本 npm version 查看所有模塊的版本 npm init 初始化項(xiàng)目（創(chuàng)建package.json） npm search 包名 搜索包 npm i/install 包名 安裝指定的包 npm remove / r 包名 刪除包 npm i/install 包名 --save 安裝指定的包并添加依賴 npm i/install 安裝當(dāng)前項(xiàng)目所依賴的包 npm install 包名 -g 全局安裝包（全局安裝的包一般都是一些工具） npm s/search 包名 搜索包 npm r/remove 包名 刪除一個(gè)包

（4）學(xué)習(xí)了node.js的fs模塊，學(xué)會(huì)了如何通過node.js操作文件（分為同步和異步的方式），主要API如下：

Buffer（緩沖區(qū)）：Buffer和數(shù)組的結(jié)構(gòu)的非常類似，Buffer是用來存儲(chǔ)二進(jìn)制數(shù)據(jù)的 Buffer的常用方法： Buffer.from(字符串)：將一個(gè)字符串中內(nèi)容保存到一個(gè)buffer中 buf.toString()：將buffer轉(zhuǎn)換為一個(gè)字符串 Buffer.alloc(size)：創(chuàng)建一個(gè)指定大小的buffer對(duì)象 Buffer.allocUnsafe(size)：創(chuàng)建一個(gè)指定大小的buffer對(duì)象，可以包含敏感數(shù)據(jù) fs模塊常用方法（同步方法帶sync；異步方法沒有sync，都需要回調(diào)函數(shù)）： 打開文件： fs.open(path, flags[, mode], callback) fs.openSync(path, flags[, mode]) 寫文件： fs.write(fd, string[, position[, encoding]], callback) fs.writeSync(fd, string[, position[, encoding]]) 讀文件： fs.read(fd, buffer, offset, length, position, callback) fs.readSync(fd, buffer, offset, length, position) 關(guān)閉文件： fs.close(fd, callback) fs.closeSync(fd) 簡(jiǎn)單文件寫入： fs.writeFile(file, data[, options], callback) fs.writeFileSync(file, data[, options]) 簡(jiǎn)單文件讀取： fs.readFile(path[, options], callback) fs.readFileSync(path[, options]) 流式文件讀取和寫入（流式讀取和寫入適用于一些比較大的文件）： fs.createWriteStream(path[, options]) fs.createReadStream(path[, options])

6、React學(xué)習(xí)收獲

React是用于動(dòng)態(tài)構(gòu)建用戶界面的JavaScript庫，通過本次的學(xué)習(xí)主要收獲如下：

（1）學(xué)習(xí)了React的基本使用及React的相關(guān)js庫（react.js：React核心庫、react-dom.js：提供操作DOM的react擴(kuò)展庫、babel.min.js：解析JSX語法代碼轉(zhuǎn)為JS代碼的庫）；

（2）學(xué)習(xí)了一些常用jsx的語法，知道了jsx語法與js語法的異同之處；

（3）React也是面向組件編程的框架，學(xué)習(xí)了React組件的三大核心屬性：state、props、refs與事件處理；

（4）深入了解React組件的生命周期，并對(duì)新舊版本React的生命周期的異同點(diǎn)進(jìn)行了學(xué)習(xí)；

（5）深入學(xué)習(xí)了React的虛擬DOM和DOM Diffing算法的原理；

（6）學(xué)習(xí)了如何基于React腳手架create-react-app快速的創(chuàng)建React應(yīng)用；

（7）學(xué)習(xí)了React常用的發(fā)送請(qǐng)求的方式，如：axios、fetch等；

（8）深入學(xué)習(xí)了React路由組件（react-router-dom）的使用，知道了什么是SPA應(yīng)用，React中路由跳轉(zhuǎn)的原理，路由組件間參數(shù)傳遞的方式等；

（9）簡(jiǎn)單了解了React常用的UI組件庫，比較流行開源React UI組件庫國外的主要是material-ui，國內(nèi)的主要是ant-design（螞蟻金服）；

（10）最后深入學(xué)習(xí)了redux，主要學(xué)習(xí)了redux的三個(gè)核心概念（action、reducer、store），學(xué)習(xí)了redux的核心API，如下：

createstore()：創(chuàng)建包含指定reducer的store對(duì)象 store對(duì)象：redux庫最核心的管理對(duì)象，它內(nèi)部維護(hù)著state和reducer 核心方法: getState()：獲取狀態(tài) dispatch(action)：分發(fā)事件 subscribe(listener)：訂閱事件 applyMiddleware()：應(yīng)用上基于redux的中間件(插件庫) combineReducers()：合并多個(gè)reducer函數(shù)

三、還期望在華為云看到哪些技術(shù)的公開課？

自2020年7月至今，陸續(xù)參加了華為云的《JAVA開發(fā)全棧成長(zhǎng)計(jì)劃》、《AI人工智能全棧成長(zhǎng)計(jì)劃》、《大數(shù)據(jù)全棧成長(zhǎng)計(jì)劃》、《Python編程創(chuàng)造營(yíng)》、《Java編程創(chuàng)造營(yíng)》以及當(dāng)前的《大前端全棧成長(zhǎng)計(jì)劃》，可以說課程覆蓋面非常廣泛，從后端到前端，從大數(shù)據(jù)到人工智能，于我個(gè)人而言也是收獲良多，每一個(gè)公開課的授課講師都很專業(yè)，講解的都很透徹，我對(duì)未來華為云的公開課也是充滿期待，期待后續(xù)能再開一些大數(shù)據(jù)HBase、Hive、Kafka等技術(shù)相關(guān)的課程，針對(duì)大前端、Java后端、大數(shù)據(jù)也可以開一些實(shí)戰(zhàn)相關(guān)的課程。

Node.js Promise React Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。