[如何写好 JavaScript|青训营笔记]
JavaScript之各司其职
本节课从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”，并从 JS 出发，总结其他语言编码可遵循的共性原则，由浅入深，该小节将集中讲解三大原则之一的“各司其职”原则。
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
写好JS的一些原则
- 各司其职
- 让HTML、CSS和JavaScript职能分离（角色表现行为分离）
- 组件封装
- 好的UI组件具备正确性、扩展性、复用性
- 过程抽象
- 应用函数式编程思想
结论：
- HTML\CSS\JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用户class来表示状态
- 纯展示类交互寻求零JS方案
JavaScript之组件封装
本节课将主要围绕编码三大原则的“组件封装”原则展开。组件是 Web 页面上所抽取的模版、功能与样式的单元，自从 React，Vue 等前端框架在市面上大量使用之后，组件化开发逐渐成为了前端主流开发方式。
- 组件的定义解析及特征
- 组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
- 组件封装基本方法 第一步：定义基础HTML结构 第二步：通过CSS实现动画效果 第三步：利用JavaScript实现行为 第四步：模板化，抽象，将组件通用模型抽象出来
总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构：插件化、模板化、抽象画（组件框架）
JavaScript编码原则之过程抽象
在学习编程的过程中，一个核心的任务是编写可以完成任务的函数，本节课通过由浅入深的过程案例讲解，详细解读编码三大原则的“过程抽象”原则。
- 过程抽象概念
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
- 高阶函数使用模式
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
- JavaScript编程范式
- 命令式与声明式
个人理解
JavaScript是网页的骨架，用于编写页面逻辑
