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

---

【如何写好JS】

Content

• 各司其职
• 组件封装
• 过程抽象

各司其职

深色模式的变化

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

组件封装

用原生JS写一个电商网站的轮播图

轮播图是一个无序列表的结构，是通过<ul>来实现的

并且使用css中的绝对定位将图片重叠在同一个位置，轮播图切换的动画使用css transition

最后通过js来实现功能

总的来说，基本方法分为三点

• 结构设计
• 展示效果
• 行为设计

在以上的例子中，若想要复用这个轮播图组件，需要对代码进行封装重构，来提高代码的可用性。

对于负责不同任务的代码来说，要将他们之间的联系通过依赖注入的方式构建，将不同的控制元素抽取成插件。并且要将HTML模板化，使其更易于扩展

最终，还要将通用的组件模型抽象出来，封装成最后的可以重用的组件。

抽象处理

在实际的开发过程中，还需要对所使用的函数进行抽象处理。

案例：对操作次数进行限制

在开发中需要对一些操作进行次数限制，避免产生错误，这些基本的限制需要在不同的程序中多次繁复的使用，那就不可能每次都要重写，所以就需要将这一操作进行抽象处理。
抽象的过程中需要完全将函数抽离出实际的应用场景中，就像是在开发中所使用的语言自带的函数一样，那么这个过程就是抽象处理。

高阶函数

在实际的开发中，有时函数处理的并不是一个参数，而是一个函数，那么这个处理的函数就被称为高阶函数。

高阶函数有以下特征：

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数修饰器

常用的高阶函数有上面所提到的Once，还有Throttle, Debounce...

高阶函数作为纯函数，不依赖外部环境，也不改变外部环境，作为函数修饰器可以在完成自己任务的同时不会改变其他的业务逻辑。

编程范式

分为命令式和声明式，命令式更多的是关注怎么做；声明式更多的是关注做什么，在处理复杂的逻辑时，更需要写声明式，抽象程度更高，拓展性更强。

写代码还应该注意些什么

• 保证正确，作为代码来说，最基本的就是完成任务，那么正确的代码是最基础的
• 代码风格，在团队项目开发中，由于参与代码编写和维护的人很多，那么代码风格的统一，保证代码的可读性是很有必要的。