DOM加载完成以后初始化插件

2.插件中定义的变量不污染全局变量

JavaScript 具有块级作用域的标识符就是function了。那我们怎么声明我们的变量才可以使它不污染全局变量呢？ 这里我们需要用到的一个 JavaScript 函数的自执行的知识点。代码如下：

3.在不同的地方复用功能代码

这就要用到我们面向对象的知识点，把我们的功能代码抽象成对象，在我们需要使用的时候，实例化对象就可以了。那我们接着第二部的代码继续写，

4.用户可以自定义功能参数

首先我们应该有默认的参数设定，比如下面这样

其实这样写的话，使用者已经可以修改我们的 JavaScript 文件来完成自定义了。但是为了能够让我们的差价足够的好用，比如说，我们的使用者一点儿都不懂 js 呢？该怎么办？ 这样我们可以把这些参数用自定义属性配置在 html中,如下：

这样用户只需要在 html的节点中就可以配置当前容器运行的参数。这样的好处还可以使同一页面上的不同容器，可以单独的配置参数，减少耦合。

那么在 js 中我们该怎么获取这些参数呢？在上面的代码中，已经有了功能对象函数。那么我们想扩展对象方法来获取用户的自定义参数，怎么办呢？我们一般使用prototype的东西来扩展我们已有对象的方法，代码如下：

5.销毁变量和参数的功能；

最后一个就是我们的插件应该具有销毁自身变量和参数的功能。我们该怎么写呢？还是在上面的代码基础上继续扩展功能对象的可调用方法，代码如下：

由以上我们的内容我们可以大概了解了一个成熟的插件应该具有的基本功能。

2.插件开发和优化示例

刚好这个项目是在春节放假前的一个紧急的项目，当时为了赶进度就没有详细思考自己的代码结构，这样野味自己的后续优化提供了机会。

由上一节介绍的定时器的内容可以知道 JavaScript 是单线程的。所以

如果一段代码运行效率很低，就会影响后续代码的执行。所以对于 JavaScript ，代码优化是必须的。 先来看看我们的“跑马灯”插件应该具有哪些功能：

能够控制灯是否自动播放； 灯的旋转方向可以控制； 灯的旋转速度可以控制； 奖品的旋转速度可以控制； 这里就不详细的介绍这些功能点的开发过程，仅仅介绍优化过程。如果有兴趣可以看我文章最后附上的源代码地址，进行下载阅读。

1.“顺序”获取旋转灯代码的优化

因为周围的灯我是使用绝对定位来做的，所以我需要“顺序”的获取他们的列表，然后操作。

首先获取 DOM节点。

然后就应该“顺序”的获取“灯”节点的 DOM 元素列表。

我的第一版是这样做的：

因为“下”和“左”方向的灯是需要倒序的，所以我使用了两个倒序的 for循环，其实当循环出现的时候，我们都应该思考我们的代码是否有可优化的空间。

优化后的代码是这样子的，在这里我减少了4次循环的使用

列表倒序我使用了原生 Array对象的reverse方法。

2.使用“闭包”优化顺序循环播

为了能够使我们的“灯”顺序的跑起来，第一版的思路是：

给每一个“灯”（注意，这里是每一个，罪过…罪过…）定义一个setTimeout()，执行时间就是数序的加入 js 执行队列中去。 代码是下面这样子的：

这样子写的缺点很明显：如果我有100个“灯”那么就会在当前的 js 执行队列中加入100个setTimeout()，再次强调的是我这里又使用了for循环，在时间复杂度上又增加了。代码的执行效率又下降了。

后来思考了下，JavaScript 中“闭包”符合我当前的使用场景，就想着用闭包优化一下，优化后代码如下：

由以上的代码可以很明显的发现两个优点：第一，就是减少了 for循环的使用，降低了代码的时间复杂度，第二就是，每次我仅仅在当前代码执行的队列中创建一个setInterval()。减小了执行队列的复杂度。

关于JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）的相关知识就给大家介绍到这里，希望本文所述对大家有所帮助。