用JavaScript实现抽奖示例的代码分析与优化(一)

最近做了一个项目，其中项目要求是用灯笼实现抽奖效果。为了实现这个功能，我主要使用js相关知识。没有太多废话，感兴趣的朋友可以阅读全文。

在开始之前，先看看前一篇文章中遗漏的两个问题和几个知识点，这些都是自我重构过程中需要用到的：

1.移动终端上1px像素线的问题。

对于设计师给我的手机网页的设计稿来说，是双图。按照道理，写网页的时候，所有对象的实际大小都会除以2。但是一条1像素的线呢？

我们先来看看这两张图，设计稿的效果：

三星S4下的实际显示效果：

您可以看到1px行此时无法显示。这个问题与S4手机的每英寸屏幕像素有关。关于每英寸屏幕像素和1px线的关系的文章很多，可以自己去搜。我这里的解决方案是不处理1px线。想写多少就写多少。即使我的基本单位是rem，它也不是另一个单位。

{position:绝对值；宽度： 13毫米；高度： 9.2毫米；border:1px固体# 000；} 2.}2.pc浏览器与移动浏览器的容错性差异。

让我们先看一段代码：

$('[node-type=row-a])。find(' div ')；很明显，我使用的选择器在语法上是不正确的。但是当你在浏览器中运行它时会发生什么呢？请看下图：

显然，即使我有语法错误，PC浏览器也能正确解析属性选择器。但是在手机端，这种编写方法无法正确解析，代码无法运行。

所以写代码的时候一定要注意一些小细节。

3.3.jQuery中选择器的使用

在使用jQuery或Zepto的过程中，最常用的选择器编写如下。

$('div.testClass ')只是在$()中写入您需要的Dom节点的类或ID，或者使用属性选择器。查看jQuery的文档，对于$()，会有这样的描述：

jQuery([选择器、[context]]最重要的是看上下文的描述(这也是我们正常使用中最容易被忽略但非常有用的参数):

默认情况下，如果没有指定上下文参数，$()将在当前HTML文档中查找DOM元素；如果指定了上下文参数，如DOM元素集或jQuery对象，将在此上下文中搜索它。在jQuery 1.3.2之后，jQuery返回的元素顺序等于它们在上下文中出现的顺序。

刚开始学习JavaScript的时候，听说操作DOM是浏览器性能的一大损失，遍历DOM也会影响程序性能。如果我们在指定的范围内找到需要的Dom，会不会比从整个文档中找到要快很多？而且，在编写web组件的过程中，组件可能会在一个页面上多次出现，那么我们如何判断要操作哪个组件呢？该上下文参数将在确定线时发挥作用。请继续查看详情。

4.4.jQuery对象到数组的转换。

刚开始研究jQuery的时候，在一本书里看到一句话：

jQuery对象只是一个JavaScript数组。

另外，在使用jQuery的过程中，会遇到js对象转换为jQuery对象，jQuery对象转换为js对象的情况。不要过多介绍这些基金会。但是有时我们希望将本机Array对象的一些方法或属性应用于jQuery对象。看一个简单的例子：

从图中的代码运行结果，我们可以知道jQuery对象上没有反向方法。即使测试是一个数组。那么，我们可以做些什么来使jQuery对象使用本机Array对象的方法呢？

4.1使用原型链扩展。

例如，以下代码：

jquery . prototype . reverse=function(){//某些操作}在使用prototype扩展方法时，人们总是认为它的缺点是可能污染原型链中已有的方法。在访问方法时，还需要找到原型链。

4.2将jQuery对象中的对象添加到数组中。

请看下面的代码

var测试=$(' div . test ')；var a=[]；$(测试)。每个(function(){ a . push($(this))；});a .反向()；这样，您就可以翻转jQuery对象。

4.3使用Array对象的from()方法。

这个方法也是我自己在编写插件的过程中使用的。查看文档描述：

Array.from()方法可以将类数组对象或可迭代对象转换为实数组。个人觉得用这个代码比较简单。还不知道对性能有没有影响。继续查看以下代码：

var测试=$(' div . test ')；var a=Array.from(测试)；a .反向()；5.5.setInterval()和setTimeout()对程序性能的影响。

因为setTimeout()和setInterval()在JavaScript中有相同的实现机制，所以只有setTimeout()用于验证。

看两段代码。

var a={ test : function(){ setTimeout(this . BBB，1000)；}，BBB : function(){ console . log('-')；}};a . a . test()输出结果如下：

请看下面的代码输出。

var a={ test : function(){ setTimeout(function(){ console . log(this))；this . BBB()；},1000);}，BBB : function(){ console . log('-')；}};a . test()；运行此代码时，代码报告了一个错误。

从上面的结果，我们可以知道，当我们使用setInterval()和setTimeout()时，以及当我们在rollback中使用这个时，这个的范围已经改变并指向window。

setTimeout(fn，0)的含义是指定在主线程最早可用空闲时间执行的任务，即尽可能早地执行。它在任务队列的末尾添加了一个事件，因此在同步任务和任务队列中的现有事件得到处理之前，它不会被执行。也就是说，我们在设置setTimeout()后，可能不会等待很多秒后再立即执行，而是等待主线程的任务处理完毕后再执行，所以就出现了“等待”超过我们设置时间的现象。同时，其他setTimeout()已经存在于异步队列中，将等待前面的执行，然后再执行当前的。

看一个演示：

setTimeout(函数bbb(){}，4000)；函数aaa(){setTimeout(函数ccc(){}，1000)；} AAA()；如果运行上述代码，则在执行aaa()一秒钟后不会立即执行ccc()，而是在执行bbb()后执行ccc()。主线运行结束已经4秒了。

以上内容是用JavaScript对跑马灯抽奖示例的代码分析和优化(一)。下一部分将继续与您分享用JavaScript (II)进行的Marquee幸运抽奖示例的代码分析和优化。感兴趣的朋友请关注。