JavaScript | 青训营笔记

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

以下为日常上课笔记，有关于JavaScript领域的一些基础内容 

什么才是好的JavaScript代码？

写好JS的一些原则

• 各司其责

  • 让HTML、CSS和JavaScript职能分离

    • HTML/CSS/JS各司其责

    • 应当避免不必要的由JS直接操作样式

    • 可以用class来表示状态

    • 纯展示类交互寻求零JS方案

• 组件封装

  • 好的UI组件具备正确性、扩展性、复用性

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

    • 轮播图 改进版 终极版

      • 结构

      • 表现

      • 行为

    • 总结:基本方法

      • 结构设计

      • 展现效果

      • 行为设计

        • API(功能)

        • Event(控制流)

    • 重构

      • 解耦

      • 插件化

        • 将控制元素抽取成插件

        • 插件与组件之间通过依赖注入方式建立联系

      • 模板化

        • 将HTML模板化,更易于扩展

        • CSS模板化……

      • 组件框架

        • 抽象

          • 将组件通用模型抽象出来

    • 总结

      • 组件设计的原则:封装性、正确性、扩展性、复用性

      • 实现组件的步骤:结构设计、展现效果、行为设计

      • 三次重构

        • 插件化

        • 模板化

        • 抽象化(组件框架)

• 过程抽象

  • 过程抽象

    • 用来处理局部细节控制的一些方法

    • 函数式编程思想的基础应用

  • 应用函数式编程思想

    • 高阶函数

    • 常用高阶函数

      • HOF

      • Once

      • Throttle

      • Debounce

      • Consumer / 2

      • Iterative

    • 为什么要使用高阶函数？

• 编程范式

  • 命令式

  • 声明式

    • 可拓展性强

  • 例子

    • Toggle - 命令式

    • Toggle - 声明式

    • Toggle - 三态

写代码最应该关注什么？

• 风格？

• 效率？

• 约定？

• 使用场景？

• 设计？

Leftpad事件

• 原始代码

• 槽点

  • NPM模块粒度

  • 代码风格

  • 代码质量/效率

• 改进代码
  代码更简洁、效率提升
  ​

• 不断改进……

• 思考

  • 细分模块是必要的

    • 你应该不想把哪怕只有几行的工具函数在各个项目里面重复的去复制粘贴，毕竟 DRY（Don't Repeat Yourself） 嘛。

    • 人们管理软件复杂度的通常方法都是拆分，写好一个模块，做好测试，然后直接使用这个模块。“small module” 的想法本来就是很好的。

    • 另外一种想法是我所有的工具函数都统一放在一个模块，这很容易造成工具模块越来越大，什么都往里放。而别人使用这个庞大的工具模块时，很可能其中很多东西根本就用不上。

    • 还有人说这个功能根本不用这么多代码，但是到处写这一行代码也挺烦不是？况且你也不知道一个几行代码能解决的问题有可能随着需求的变化需要更复杂的实现（比如：更多的定制性、性能要求）。

    • 所以，NPM 一直提倡和推动的 small module 的理念并没有什么错，我们不应该因为这个事件就把各种“小模块”的依赖从自己项目中去掉，甚至自己也不写“小模块”了。

交通灯状态切换