第四部分 JS基础 | 青训营笔记

2022-07-27 118 阅读1分钟

这是我参与第四届青训营笔记创作活动的第3天，学习到了JS的高级运用，主要讲解了写好JS的三大原则，分别为各司其责、组件封装、过程抽象

注意：

1.各司其职：让HTML、CSS和JavaScript职能分离 2.组件封装：好的UI组件具备正确性、扩展性、复用性 3.过程对象：应用函数式编程思维

1.例子1

例子1-1.png

点击图标之后更换了背景颜色及字体颜色

例子1-2.png

分析及代码：

例子1-3.png

还存在改进空间

例子1-4.png

例子1-5.png

注意：

1.版本三没有使用JavaScript，使用了CSS的伪类选择器

例子1-6.png

2.组件封装

组件封装-1.png

组件封装-2.png

组件封装-3.png

组件封装-4.png

组件封装-5.png

组件封装-6.png

组件封装-7.png

注意：

1.减少代码的修改量

组件封装-8.png

组件封装-9.png

3.过程抽象

过程抽象-1.png

过程抽象-2.png

过程抽象-3.png

过程抽象-4.png

过程抽象-5.png

过程抽象-6.png

过程抽象-7.png

编程范式-1.png