[ 跟着月影学 JavaScript | 青训营笔记]

65 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

今天学习了【跟着月影学 JavaScript】

1.本堂课重点内容

  1. JavaScript 好代码的标准
  2. HTML/CSS/JS 各司其责
  3. 组件的定义解析及特征
  4. 组件封装基本方法
  5. 利用原生 JS 实现电商网站轮播图
  6. 过程抽象概念
  7. 高阶函数使用模式
  8. JavaScript 编程范式
  9. 代码写作关注事项
  10. left-pad 事件背后的代码规范
  11. 代码实践1 - 交通灯
  12. 代码实践2 - 洗牌
  13. 代码实践3 - 分红包

2.详细知识点介绍

一些原则

  • 各司其责,组件封装,过程抽象
  • HTML->Structural
  • CSS->Presentational
  • JavaScript->Behavioral

组件的定义解析及特征

  • 组件(component)也是抽象的概念,可以理解为一些符合某种规范的类组合在一起就构成了组件
  • 利用原生JS实现轮播图并不困难,重点是对代码进行优化,使其具有良好的可移植性,模块化。

过程抽象

  • 忽略任务具体完成的过程,只精确描述该任务所要完成的功能

高阶函数

  • 函数可以作为参数被传递
  • 函数可以作为返回值被输出

JavaScript 编程范式

  • JS支持3种编程范式:命令式、面向对象和函数式

3.代码案例

left-pad 事件背后的代码规范

  • left-pad工具模块被作者从 NPM 上撤下,所有直接或者间接依赖这个模块的 NPM 包就忧伤的挂掉了,包括 babel 这样的热门项目。

4.课后个人总结

我们在进行前端代码书写的时候需要遵循各司其责,组件封装,过程抽象的原则,这样我们写出的代码才能是优雅,复用性强的代码,也才能真正的提高我们的水平。

5.引用参考

  • 如何写好 JS1

code.juejin.cn/pen/7117822…

  • 如何写好 JS2

code.juejin.cn/pen/7119668…