如何写好JavaScript|青训营
JavaScript定义
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
好的JavaScript
- 容易理解，无须求助原始开发者，任何人一看代码就知道它是干什么的，以及它是怎么实现的
- 符合常识，代码中的一切都显得顺理成章，无论操作多么复杂
- 容易适配，即使数据发生变化也不用完全重写
- 容易扩展，代码架构经过认真设计，支持未来扩展核心功能
- 容易调试，出问题时，代码可以给出明确的信息，通过它能直接定位问题
写好JavaScript的原则
各司其责
- HTML/CSS/JS各司其责
- 应避免不必要的由JS直接操作样式
- 可以使用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
- 组件是指Web网页上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元
- 组件设计原则封装性、正确性、扩展性、复用性
- 实现组建的步骤
- 结构设计
- 展现效果
- 行为设计
- API（功能）：API设计应保证原子操作，职责单一，满足灵活性
- Event（控制流）：使用自定义事件来解耦
- 三次重构
- 插件化：将控制元素抽取成插件；插件与组件之间通过依赖注入方式建立联系
- 模板化：将HTML模板化，更易于扩展
- 抽象化（组件框架）：将通用的组件模型抽象出来
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
松散耦合
- 只要应用程序的某个部分对另一部分依赖的过于紧密，代码就会变得紧密耦合，因而难以维护。
- 典型的问题是在一个对象中直接引用另一个对象，这样，修改其中一个，可能必须还得修改另一个。紧密耦合的软件难以维护，肯定需要频繁的重写。
解耦HTML和JavaScript
- web开发中最常见的耦合是HTML和JavaScript，在网页中，HTML和JavaScript分别代表不同层面的解决方案，HTML是数据，JavaScript是行为。这是因为它们之间要相互操作，需要通过不同的方式将这两种技术联系起来。可惜的是，其中一些方式会导致HTML与JavaScript紧密耦合。
- 理想情况下，HTML和JavaScript应该完全分开，通过外部文件引JavaScript，然后使用DOM添加行为。
- 一般来说，应该避免在JavaScript中创建大量的HTML。同样，这主要是为了做到数据层和行为层各司其职，在出错时更容易定位问题所在。
解耦CSS和JavaScript
web应用程序的另一层是CSS，负责页面样式显示、 JavaScript和CSS紧密相关，都构建咋HTML之上，因此经常一起使用。
解耦应用程序逻辑和事件处理程序
每个web应用程序中都会有大量事件处理程序在监听各种事件。可是，其中很少能做到应用程序逻辑与事件处理程序分离。 以下是解耦应用程序逻辑和业务逻辑时应该注意的几点：
- 不要把event对象传给其他方法，而是只传递event对象中必要的数据；
- 应用程序中每个可能的操作都应该无须事件处理程序就可以执行；
- 事件处理程序应该处理事件，而把后续处理交给应用程序逻辑；
- 做到以上几点能够给任何代码的可维护性带来巨大的提升，同时也能为将来的测试和开发提供很多可能性。
