JS理解 | 青训营笔记

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

1. 编写JS代码的一些原则

1. 结构、表现、行为的分离

HTML、CSS、Javascript是前端基础三件套，我们利用HTML控制页面结构，利用CSS控制页面元素表现，利用Javascipt控制各个终端图形化界面的人机交互工作，在编写前端代码的过程中，我们应该让他们各司其职，这样的代码结构清晰、后期容易维护。

Javascript分为两部分，ECAMScript、Web API,ECAMScript定义了一些核心代码规则，而Web API用来实现人机交互的功能，这种功能的实现是靠操作页面中的DOM（Document Object Model）元素来实现的，同时还有与浏览器的交互（靠BOM——Brower Object Model）。利用Javascript，我们可以操控页面的结构、样式、行为，但在工作中，我们一般不推荐利用Javascrip去操控页面的表现，而是让HTML、CSS、Javascript各司其职。

对于更改页面样式，可以对直接元素的样式进行操作，可以设置元素class类，可以为元素设置伪类、伪元素选择器等等，后两种方法是比较受我们推崇的。

更改页面背景颜色——通过直接操控元素style属性

更改页面背景颜色——通过直接操控元素className属性

2. 组件化

在前端工作开发过程中，我们会不可避免地遇到重复性工作，比如轮播图、按钮、倒计时等等，轮播图有自动播放、点击切换图片等功能，按钮有不同的样式、不同功能的按钮等，对于这些常见的业务，我们可以将其封装成一个具有封装性、可用性、复用性、可扩展性的组件，当我们需要用到相关业务时，我们就可以直接引入该组件输入相关参数即可完成该业务的开发，这样可以大大提高程序员工作效率，毫无疑问这应该程序员必备的技能之一。

所以什么为组件？组件为页面局部功能的代码（HTML、CSS、Javasript等）与资源（图片等）的集合。现在较流行的前端开发框架Vue、React都是组件化开发，每个组件中都有对应的HTML结构、CSS表现代码以及交互逻辑代码，组件化的开发毫无疑问能提高代码的维护性、可扩展性、复用性等。

2. 过程抽象

过程抽象：处理“局部细节控制”的一些方法。何为“局部细节控制”？在前端业务逻辑中，经常会有“点击事件”的功能需求，如轮播图中的左右按钮、点击发送请求获取数据...若用户频繁触发点击事件，则会出现不可预估的错误，对于这种情况，我们就需要对该点击事件进行“防抖”处理，即让事件在一定的时间后再执行，若中间被多次触发，则重新计时，这样就可以限制用户因为频繁触发而导致事件回调多次执行的现象。

为了能够让“少量触发”的需求覆盖不同的事件处理函数，我们可以将其剥离出来，这个过程就是“过程抽象”。

下面实现数字1秒内只能加1的功能

下面实现让数字在1秒后加1的功能，这样就实现了就算用户频繁点击后事件也就执行1次的功能