这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
今天学习了【跟着月影学 JavaScript】
1.本堂课重点内容
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
- 代码写作关注事项
- left-pad 事件背后的代码规范
- 代码实践1 - 交通灯
- 代码实践2 - 洗牌
- 代码实践3 - 分红包
2.详细知识点介绍
一些原则
- 各司其责,组件封装,过程抽象
- HTML->Structural
- CSS->Presentational
- JavaScript->Behavioral
组件的定义解析及特征
- 组件(component)也是抽象的概念,可以理解为一些符合某种规范的类组合在一起就构成了组件
- 利用原生JS实现轮播图并不困难,重点是对代码进行优化,使其具有良好的可移植性,模块化。
过程抽象
- 忽略任务具体完成的过程,只精确描述该任务所要完成的功能
高阶函数
- 函数可以作为参数被传递
- 函数可以作为返回值被输出
JavaScript 编程范式
- JS支持3种编程范式:命令式、面向对象和函数式。
3.代码案例
left-pad 事件背后的代码规范
- left-pad工具模块被作者从 NPM 上撤下,所有直接或者间接依赖这个模块的 NPM 包就忧伤的挂掉了,包括 babel 这样的热门项目。
4.课后个人总结
我们在进行前端代码书写的时候需要遵循各司其责,组件封装,过程抽象的原则,这样我们写出的代码才能是优雅,复用性强的代码,也才能真正的提高我们的水平。
5.引用参考
- 如何写好 JS1
- 如何写好 JS2