JavaScript|青训营笔记

42 阅读1分钟

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

⭐️本堂课重点

  • 如何写好JavaScript

⭐️知识点&实践例子

写好JS的原则

各司其责

  • 让HTML、CSS和JavaScript职能分离。
  • 应当避免不必要的由JS直接操作样式。
  • 可以用class来表示状态。
  • 纯展示类交互寻求零JS方案。

组件封装

组件:Web页面上抽出来一个个包含模版(HTML)、功能(JS)、和样式(CSS)的单元。好的UI组件具备正确性、扩展性、复用性。

实现组件的步骤

  • 结构设计
  • 展现效果
  • 行为设计(API、Event)

三次重构

插件化
  • 将控制元素抽取成插件
  • 插件与组件之间通过依赖注入方式建立联系
模版化
  • 将HTML模板化,更易于扩展
抽象
  • 将组件通用模型抽象出来

过程抽象

应用函数式编程思想。

  • 用来处理局部细节控制的一些方法
  • 函数式编程思想的基础应用

高阶函数

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器

截屏2023-02-1717.50.48.png

常用高阶函数
  • Once
  • Throttle
  • Debounce
  • Consumer/2
  • Iterative

编程范式

截屏2023-02-1717.57.55.png

代码

NPM模块粒度

代码风格

代码质量

代码质量优化

⭐️个人总结

通过对本堂课的学习对如何写好JavaScript代码有了一个框架认识。课程从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”,并从 JS 出发,总结其他语言编码可遵循的共性原则,由浅入深。同时通过对课上示例代码的阅读和分析,进一步掌握了相关知识。