华为云大前端第三阶段技术学习收获总结

不知不觉，华为云大前端公开课第三阶段已经接近尾声，所谓“工欲善其事，必先利其器”，要想学好大前端，在企业开发中提升开发效率，框架是不可或缺的一部分，感谢华为云提供了这么好的一次学习大前端框架的机会，通过这次学习可以说是收获满满，以下是我对华为云大前端第三阶段技术学习收获的简要总结。

一、第三阶段学习了哪些技术内容？

从8月23日至今不到一个月的时间，通过第三阶段的学习，我系统的学习了大前端三大主流框架（Vue+Node+React）相关的技术知识，在学习的过程中，为了能更好的、更深入的理解老师所讲解的内容，自己也去学习了一些辅助性的技术，如：ES6主要语法、Promise相关语法及axios的知识，用四个字精准的概述这一个月的学习就是：受益匪浅。

二、针对所学技术内容收获了什么？

1、ES6学习收获

ES6语法可以说是学习Vue和React的基础，如果不了解ES6的一些新特性，对Vue和React的很多代码都可能无法理解，此次学习ES6虽然没有深入研究，主要学习到了以下四个常用的特性：

（1）变量声明时推荐使用let，相比之前的var，let变量无论声明在何处，都会被视为声明在函数的最顶部；可以使用const声明常量。

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

（3）ES6中可以使用箭头函数，相比于普通函数，箭头函数语法更加简洁、清晰，箭头函数不会创建自己的this且箭头函数继承而来的this指向永远不变（这个特性在学习Vue和React时深有体会）。

（4）ES6中可以对对象和数组进行解构赋值，使用方便，不用逐个属性取值。

2、Promise学习收获

Promise其实也是ES6中的，是异步编程的一种方案，从语法上讲，Promise是一个对象，它可以获取异步操作的消息。通过对Promise的学习主要收获如下：

（1）了解了promise对象的3个状态：初始化状态(pending)、成功状态(fullfilled)、失败状态(rejected)；

（2）基于Promise处理多次Ajax请求时，可以采用链式调用的方式，减少多层嵌套；

（3）学了Promise的常用API，如：

常用实例方法： promise.then()：获取异步任务的正常结果; promise.catch()：获取异步任务的异常结果; promise.finaly()：异步任务无论成功与否，都会执行。 常用对象方法： Promise.all()：并发处理多个异步任务，所有任务都执行成功，才能得到结果; Promise.race(): 并发处理多个异步任务，只要有一个任务执行成功，就能得到结果。

3、axios学习收获

axios是前端最流行的ajax请求库，Vue和React官方都推荐使用axios发ajax请求，通过本次对axios的学习，学会了如何安装axios、如何创建axios以及如何使用axios发送请求，也学习了axios一些常用的语法，如下：

axios(config): 通用/最本质的发任意类型请求的方式 axios(url[, config]): 可以只指定url发get请求 axios.request(config): 等同于axios(config) axios.get(url[, config]): 发get请求 axios.delete(url[, config]): 发delete请求 axios.post(url[, data, config]): 发post请求 axios.put(url[, data, config]): 发put请求 axios.defaults.xxx: 请求的默认全局配置 axios.interceptors.request.use(): 添加请求- axios.interceptors.response.use(): 添加响应- axios.create([config]): 创建一个新的 axios

4、Vue学习收获

通过本次系统的对Vue框架的学习，主要学习收获如下：

（1）深入理解了什么是MVVM模型，深入学习了Vue的模板和数据绑定技术、了解了什么是组件化编程及虚拟DOM技术；

（2）学习了双大括号表达式的详细用法及常用声明式指令，如v-if、v-else、v-model、v-for、v-show等；

（3）学习了什么是计算属性、什么是监视属性及二者的常用场景及使用方式，学习了事件绑定及如何防止事件冒泡等；

（4）深入了解了Vue实例的生命周期及每个生命周期函数的作用及使用场景；

（5）学习了组件间通信常用的五种方式：prpos、vue的自定义事件、消息订阅与发布(如: pubsub 库) 、slot、vuex；

（6）知道了Vue常用的UI库，如移动端常用mint-ui，PC端常用element；

（7）深入学习和理解了vue-router相关的技术知识，学会了路由的基本配置、路由器的注册、路由组件的使用、嵌套路由、路由组件间数据传递等；

（8）深入学习了vuex，通过vuex对多组件间共享状态进行集中管理，使组件间通信更加简单且容易管理；学习了vuex五个核心对象：state、mutations、actions、getters、modules；

（9）最后深入底层，学习了Vue核心源码，了解了Vue模板解析的全过程，数据绑定的核心原理及数据绑定的四个核心对象（Observer、Dep、Compiler、Watcher）。

5、Node学习收获

Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境，通过本次对Node.js的学习，主要收获如下：

（1）学习了以解压缩和直接安装的方式安装及配置node环境；

（2）学习了node的主要特点及模块化管理的思想，学会了如何引用模块及如何定义模块；

（3）学习了一些常用的npm命令，如下：

npm -v 查看npm的版本 npm version 查看所有模块的版本 npm init 初始化项目（创建package.json） npm search 包名 搜索包 npm i/install 包名 安装指定的包 npm remove / r 包名 删除包 npm i/install 包名 --save 安装指定的包并添加依赖 npm i/install 安装当前项目所依赖的包 npm install 包名 -g 全局安装包（全局安装的包一般都是一些工具） npm s/search 包名 搜索包 npm r/remove 包名 删除一个包

（4）学习了node.js的fs模块，学会了如何通过node.js操作文件（分为同步和异步的方式），主要API如下：

Buffer（缓冲区）：Buffer和数组的结构的非常类似，Buffer是用来存储二进制数据的 Buffer的常用方法： Buffer.from(字符串)：将一个字符串中内容保存到一个buffer中 buf.toString()：将buffer转换为一个字符串 Buffer.alloc(size)：创建一个指定大小的buffer对象 Buffer.allocUnsafe(size)：创建一个指定大小的buffer对象，可以包含敏感数据 fs模块常用方法（同步方法带sync；异步方法没有sync，都需要回调函数）： 打开文件： 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) 关闭文件： fs.close(fd, callback) fs.closeSync(fd) 简单文件写入： fs.writeFile(file, data[, options], callback) fs.writeFileSync(file, data[, options]) 简单文件读取： fs.readFile(path[, options], callback) fs.readFileSync(path[, options]) 流式文件读取和写入（流式读取和写入适用于一些比较大的文件）： fs.createWriteStream(path[, options]) fs.createReadStream(path[, options])

6、React学习收获

React是用于动态构建用户界面的JavaScript库，通过本次的学习主要收获如下：

（1）学习了React的基本使用及React的相关js库（react.js：React核心库、react-dom.js：提供操作DOM的react扩展库、babel.min.js：解析JSX语法代码转为JS代码的库）；

（2）学习了一些常用jsx的语法，知道了jsx语法与js语法的异同之处；

（3）React也是面向组件编程的框架，学习了React组件的三大核心属性：state、props、refs与事件处理；

（4）深入了解React组件的生命周期，并对新旧版本React的生命周期的异同点进行了学习；

（5）深入学习了React的虚拟DOM和DOM Diffing算法的原理；

（6）学习了如何基于React脚手架create-react-app快速的创建React应用；

（7）学习了React常用的发送请求的方式，如：axios、fetch等；

（8）深入学习了React路由组件（react-router-dom）的使用，知道了什么是SPA应用，React中路由跳转的原理，路由组件间参数传递的方式等；

（9）简单了解了React常用的UI组件库，比较流行开源React UI组件库国外的主要是material-ui，国内的主要是ant-design（蚂蚁金服）；

（10）最后深入学习了redux，主要学习了redux的三个核心概念（action、reducer、store），学习了redux的核心API，如下：

createstore()：创建包含指定reducer的store对象 store对象：redux库最核心的管理对象，它内部维护着state和reducer 核心方法: getState()：获取状态 dispatch(action)：分发事件 subscribe(listener)：订阅事件 applyMiddleware()：应用上基于redux的中间件(插件库) combineReducers()：合并多个reducer函数

三、还期望在华为云看到哪些技术的公开课？

自2020年7月至今，陆续参加了华为云的《JAVA开发全栈成长计划》、《AI人工智能全栈成长计划》、《大数据全栈成长计划》、《Python编程创造营》、《Java编程创造营》以及当前的《大前端全栈成长计划》，可以说课程覆盖面非常广泛，从后端到前端，从大数据到人工智能，于我个人而言也是收获良多，每一个公开课的授课讲师都很专业，讲解的都很透彻，我对未来华为云的公开课也是充满期待，期待后续能再开一些大数据HBase、Hive、Kafka等技术相关的课程，针对大前端、Java后端、大数据也可以开一些实战相关的课程。

Node.js Promise React Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。