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

前言

在前端领域中，JavaScript语言的应用是十分广泛的，那在前端开发中，我们改如何写好JS呢？

这里有三个原则：各司其职、组件封装、过程抽象

1.各司其职

(让HTML，CSS和JavaScript只能分离)

1.  HTML/CSS/JS各司其职,HTML来操作页面结构，CSS来操作页面样式，JS来操作页面功能。
2.  应用避免不必要的由JS直接操作样式
3.  可以用class来表示状态（在JS中改变页面的ClassName来改变样式）
4.  纯展示类交互寻求零JS方案（可以尽量用高级的CSS解决）

2.组件封装

(组件是指Web页面上抽出来一个个包含模板(HTML),功能(JS),和样式(CSS), 好的UI组件具备正确性，扩展性，复用性)

1.实现组件的步骤:

• 结构设计（布局好组件的HTML）
• 展现效果（布局好组件的CSS）
• 行为设计（布局好组件的JS）

2.组件的设计原则

• 封装性（可以直接引用）
• 正确性（组件功能齐全）
• 扩展性（组件需要可以拓展功能）
• 复用性（组件需要有许多的应用场景）

3.三次重构

1. 插件化重构（解耦）

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入 方式建立联系

2. 模板化重构

• 将HTML模板化，更易于扩展

2. 抽象化重构（组件框架）

• 将组件通过模板抽象出来

3.过程抽象

(应用函数式编程）

1.用来处理局部细节控制的一些方法

2.函数式编程思维的基础应用

(为了能够让只执行一次的需求覆盖不同的事件处理，我们可以用Once函数将这个需求剥离出来。这个过程我们称为过程抽象)

应用高阶函数（HOF）

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

常用高阶函数

• Once(执行一次方法)
• Throttle(节流函数)
• Debounce(防抖函数)
• Consumer(延时调用方法)
• Interative(可迭代方法)

命令式/声明式

命令式：命令式代码是指我们编写的代码更适合计算机,而声明式代码是指对人更容易读懂的代码。 更具体地说,命令式代码是指我们告诉JavaScript(或任何你正在编码的语言)要做什么以及如何做。

声明式：声明式代码则不同。我们用它来声明我们想要完成的内容，JavaScript会完成它。换句话说，它对我们人类是可读的，而不仅仅是对计算机。事实上，它对其他开发者的可读性正是我们试图用更多的声明式写作所追求的。

（在我们写JS中我们应该追求声明式JS函数，减少命令式JS函数）

 写好JavaScript注意事项

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

具体的代码实现要因场景而定，不同的场景我们的注重点也不一样，例如在某些比较底层的场景，可能更注重效率，而在多人协作的时候可能更关注约定。所以要写好一份JS，我们要从使用场景出发，按照约定的规则，去设计代码的风格和提高代码的执行效率。