这是我参与「第四届青训营 」笔记创作活动的第4天
这些年来，随着 HTML5 和 Node.js 的发展，JavaScript 在各个领域遍地开花，已经从“世界上最被误解的语言”变成了“世界上最流行的语言”。但是由于历史原因，JavaScript 语言设计中还是有一些糟粕和鸡肋，比如：全局变量、自动插入分号、typeof、NaN、假值、==、eval 等等，并不能被语言移除。
那么在前端开发的过程中我们如何优雅的编写 JavaScript 代码？
在本次青训营的学习中，我了解到一些写好javascript的一些原则：
html、css、javascript各司其职
1.HTML来操作页面结构，CSS来操作页面样式，JS来操作页面功能。
2.能用css直接操作样式就尽可能不要使用js来实现样式的改变
3.纯展示页面就不要使用js，尽可能使用高级的css属性来实现
组件封装
好的UI组件具备正确性、扩展性、复用性
1.实现组件的步骤:
结构设计（布局好组件的HTML）
展现效果（布局好组件的CSS）
行为设计（布局好组件的JS）
2.组件的设计原则
封装性（可以直接引用）
正确性（组件功能齐全）
扩展性（组件需要可以拓展功能）
复用性（组件需要有许多的应用场景）
3.三次重构
1. 插件化重构（解耦）
-将控制元素抽取成插件
-插件与组件之间通过依赖注入方式建立联系
2. 模板化重构
-将HTML模板化，更易于扩展
3. 抽象化重构（组件框架）
-将组件通过模板抽象出来
过程抽象
应用函数式编程思想。
- 提倡组合（composition），组合是王道。
- 每个函数尽可能完成单一的功能。
- 屏蔽细节，告诉计算机我要做什么，而不是怎么做。我们看 filter / map，它们并未暴露自身的细节。一个 filter 函数的实现，在单核 CPU 上可能是一个循环，在多核 CPU 上可能是一个 dispatcher 和 aggregator，但我们可以暂时忽略它的实现细节，只需了解它的功能即可。
- 尽可能不引入或者少引入状态。
1.使用有意义，可读性好的变量名
2.使用 ES6 的 const let 定义常量
3.使用易于检索的名称
4.使用说明性的变量(即有意义的变量名)
5.方法：保持函数功能的单一性
6.函数名应明确表明其功能（见名知意）
7.使用默认变量替代短路运算或条件
8.函数参数 (理想情况下应不超过 2 个)
9.移除重复代码
这些特点运用得当的话，能够为软件带来：
- 更好的设计和实现。
- 更加清晰可读的代码。由于状态被大大减少，代码更容易维护，也带来更强的稳定性。
- 在分布式系统下有更好的性能。函数式编程一般都在一个较高的层次进行抽象，map / filter / reduce 就是其基础指令，如果这些指令为分布式而优化，那么系统无需做任何改动，就可以提高性能。
- 使得惰性运算成为可能。在命令式编程中，由于你明确告诉了 CPU 一步步该怎么操作，CPU 只能俯首听命，优化的空间已经被挤压；而在函数式编程里，每个函数只是封装了运算，一组数据从输入经历一系列运算到输出，如果没有人处理这些输出，则运算不会被真正执行。
