如何写好JS｜ 青训营笔记

文章第一句话为“这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

写好JS的原则

对于好的 js 代码来说，应该要遵循的是以下三个原则。分别是：

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

1. 各司其职👋

（1）定义

写前端的小伙伴们应该知道，前端为什么要分成 HTML 、 CSS 和 JS 。那其实实际上，在前端中， HTML 负责结构， CSS 负责表现，而 JS 负责行为。如下图所示：

2. 组件封装🤏

（1）定义

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

具体如下👇

• 组件设计的原则： 封装性、正确性、扩展性、复用性；
• 实现组件的步骤： 结构设计、展现效果、行为设计；
• 三次重构： 插件化、模板化、抽象化（组件框架）。

3. 过程抽象👌

（1）定义

• 所称抽象，指的是用来处理局部细节控制的一些方法；
• 过程抽象，是一种思维方法，也是一种编程范式；
• 函数式编程思想的基础应用。

写代码最应当关注的是什么？

风格
效率
约定
使用场景
设计

下面介绍下我个人的心得体会，关于如何写好JS

1. 代码应该有清晰的结构

   有了清晰的结构，方便我们后续的阅读和维护，假以时日再次阅读该代码也可以快速上手，如果没有清晰的结构，一旦代码量增大，则可能导致难以排查错误的情况。

2. 指定良好的编码规范

   一个良好的代码不应该有下面的问题：

   重复代码 命名不规范 函数过长

3. 避免使用JS内置不合理语法

   JS这门语言由于历史原因，存在一些不合理的语法（可能会造成预料之外的bug）,例如全局变量、等于判断、eval的使用等。

4. 尽量简洁的JS代码

   在实现一个功能的时候，写法往往有很多种，一万个人就有一万个哈姆雷特，但是越简洁的语法，越能激起人们阅读的兴趣，同时能够提高可读性。