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

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

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

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

从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后端、大数据也可以开一些实战相关的课程。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。