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

一、JavaScript介绍

JavaScript（JS）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位

JavaScript 与 HTML 和 CSS 共同构成了网页
HTML——定义网页的内容，例如标题、正文、图像等
CSS——控制网页的外观，例如颜色、字体、背景等
JavaScript——实时更新网页中的内容

二、JavaScript编码原则

1、各司其职

HTML/CSS/JS各司其职，应当避免不必要的由JS直接操作样式，可以用class来表示状态，纯展示类交互寻求零JS方案

2、组件封装

（1）组件介绍

组件是指web页面上抽出一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性

（2）如何编写组件

graph TD
结构HTML --> 表现CSS
表现CSS -->行为JS

行为JS——行为API

API设计应保证原子操作、职责单一、满足灵活性

行为JS——控制流

使用自定义事件来进行解耦

重构：组件框架

解耦：解耦是将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。解耦将HTML模板化，更易于扩展

插件化
模板化
抽象化（组件框架）

3、过程抽象

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

编程规范

命令式和声明式

命令式编程——命令机器如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现
声明式编程——告诉机器你想要的是什么(what)，让机器想出如何去做(how)

命令式
let list=[1,2,3,4];
let map=[];
for(let i=0;i<list.length;i++){
   mapl.push(list[i]*2);
}
声明式
let list=[1,2,3,4];
const double=x=>x*2;
list.map(double);

三、如何写好JavaScript？

1、代码写作关注事项

写代码应关注——风格、效率、约定、使用场景、设计

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

事件本身槽点：NPM模块位置、代码风格、代码质量/效率——>代码更简洁，效率提升

学习总结

通过这几门课程，我深入了解了JavaScript的相关知识，关于组件封装、抽象化这些知识点有点难理解，可结合相关代码进行理解消化

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