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

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

一、本堂课重点内容

• JavaScript 好代码的标准
• HTML/CSS/JS各司其责
• 组件的定义解析及特征
• 组件封装基本方法
• 利用原生JS实现电商网站轮播图
• 过程抽象概念
• 高阶函数使用模式
• JavaScipt 变成范式

二、详细知识点介绍

JavaScript 好代码的原则：各司其责、组件封装、过程抽象。

HTML/CSS/JS各司其责的好处：可以从代码中直观了解代码的本意，不需要去翻看需求文档。

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

实现组件封装的基本方法：结构设计、展现效果、行为设计（API功能和Event控制流）。

对代码重构进行解耦的好处：将HTML模板化，更易于扩展。

如何进行解耦：将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。

三次重构：插件化、模板化、抽象化。

三、实践练习例子

• 交通灯
• 洗牌
• 分红包

四、课后个人总结

通过该课程深刻的了解了什么是好的JavaScript代码。好的JavaScript代码要与CSS代码和Html代码区分开来，各司其责，也就是在JS代码中不要进行CSS样式的设置和HTML内容的添加，这样的好处是能在不阅读需求文档的情况下，通过阅读代码就了解代码实现的功能。 同时编写代码时要注意各模块之间的耦合程度，耦合程度过大可以通过插件化、模板化、抽象化等方式进行解耦。解耦能降低模块之间的耦合程度，并且在一定程度上利于代码的重用。