1 什么是JavaScript

在学习了html（结构）、css（样式）后，我来学习第三个JavaScript，它主要负责的是行为。

JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

2 各司其责

• 应当避免不必要的由 JS 直接操作样式
• 可以用 class 来表示状态
• 纯展示类交互寻求零 JS 方案

通过例子可以知道，我们可以改变样式，通过用css给元素添加一些类的样式，再让JavaScript修改他们的类名，就可以实现了样式与行为分离。

3 组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。

其中好的组件具备以下四种特点：封装性、正确性、扩展性、复用性。

实现组件的步骤：使用HTML进行基础的结构设计，基于HTML在CSS写上对应的样式，实现出要展现的效果，最后再设计对应的API （功能）和Event （控制流）。

4 优化JavaScript代码质量

• 删除多余的代码和功能

应用程序包含的代码越多，就需要将更多的数据传输到客户端。浏览器也需要更多时间来分析和解释代码。可能打包了很多根本用不到的功能。最好只在开发环境中保留这些额外的代码。

• 尽可能缓存

缓存可以减少延迟和网络流量，从而减少了显示资源表示所需的时间，以提高网站的速度和性能。当满足某些条件时，上述缓存机制能够处理和重新生成缓存。

• 避免内存泄漏

作为一种高级语言，JS 会负责一些底层管理工作，例如内存管理。垃圾回收是大多数编程语言共有的过程。用外行术语来说，垃圾收集就是收集并释放已分配给对象，但目前尚未在程序的任何部分中使用的内存。

• 尽早打破循环

超大循环肯定会消耗很多宝贵的时间，所以你应该尽早打破它们。你可以用 break 关键字和 continue 关键字来做这件事。编写最高效的代码是你的责任。