javaｓｃｒｉｐｔ实现跑马灯抽奖实例代码分析与优化（a）

最近做的一个项目，项目需要的是实现跑马灯的抽奖效果，主要使用JS相关知识，ADO，有兴趣的朋友可以阅读文本。

在开始之前，本文中缺少的两个问题和几个知识点是在重构过程中使用的。

1。在移动终端的像素的像素线问题

我的手机终端页面的设计草稿是设计者的2倍，原因是，在写网页时，所有对象的实际大小将是2，但对于1像素线呢
先看看这两幅画，设计草图的效果：
三星S4下的实际显示效果：
可以看出，此时像素线无法显示。问题是对S4手机屏幕像素密度有关。有很多关于屏幕像素密度和1px线之间的关系的文章，可以搜索并了解自己。这里的解决方案是，像素线路不处理。写多少你写。即使我的基本单位是REM，不是其他单位。
{
位置：绝对；
宽度：13rem；
身高：9.2rem；
边境：1px solid # 000；
}
在2.pc端浏览器和移动端浏览器的容错性差异

先看一段代码：
$（{节点类型= row-a）发现（'div）；
很明显，我使用的选择器是语法性的，但是在浏览器中运行的结果会是什么呢请看下面的图片。

很明显，对于属性选择器，即使我有语法错误，pc端浏览器也能被正确解析。但是在手机终端，这篇文章不能正确解析，代码无法运行。

因此，在编写代码时，必须注意一些小细节。

在3.jquery选择器的使用

使用最频繁的在使用jQuery选择器或Zepto过程如下。
$（'div.testclass）
只需在$（）中编写所需的DOM节点的类或ID，或者使用属性选择器。

查看jQuery文档，对$（）有这样的描述：
jQuery（{选择符，{上下文}）
最重要的是看上下文的描述，这是最容易被忽略的，但在我们通常使用的参数中非常有用：

默认情况下，如果没有指定上下文参数，$（）将查找当前HTML文档中的DOM元素。如果指定的上下文参数，如对象的DOM元素集或jQuery，它将在这一背景下发现的。在jQuery 1.3.2，元素的返回顺序等于中的秩序。
当我开始学习Javaｓｃｒｉｐｔ时，我听说DOM的操作对浏览器性能的损失非常大，遍历DOM也影响程序的性能。

如果我们在指定的范围内查找所需的Dom，它将比查找整个文档快得多，并且在编写Web组件的过程中，一个页面上的组件可能会出现很多次，那么我们如何确定我们将要运行的组件呢此上下文参数将在确定行中起作用。请继续查看哇。

对4.jquery对象转换为数组

当我开始学习jQuery时，我在书中看到了一个单词。

jQuery对象是一个Javaｓｃｒｉｐｔ数组。

在使用jQuery的过程中，js对象转向jQuery对象，jQuery对象转向JS对象。

但有时我们希望使用jQuery对象上的一些本地数组对象的方法或属性：
从图中的代码运行结果，您可以知道jQuery对象上没有反向方法。

那么，我们怎样才能允许jQuery对象使用本机数组对象呢

4.1使用原型链扩展

例如，下面的代码：
原型，反向=函数（）{
操作
}
在使用原型扩展方法时，其缺点是会污染现有的原型链方法，也需要在访问原型链时找到原型链。

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

请看下面的代码
VaR测试=美元（'div.test）；
var = { }；
$（test）。每个（函数（）{）
A.push（$（this））；
}）；
A.reverse（）；
这允许jQuery对象被翻转。

4.3使用数组对象的from（）方法

这种方法也在你的文档描述写plug-in.look过程的方法：

Array.from（）方法可以将一个类的对象或一个对象数组成一个真正的数组。

个人对使用此代码的感觉更加简洁。目前还不知道性能的影响：
VaR测试=美元（'div.test）；
创建一个array.from（测试）；
A.reverse（）；
对5.setinterval效果（）和setTimeout（）对程序性能

因为setTimeout（）和两个函数setInterval（）是完全相同的执行机制在Javaｓｃｒｉｐｔ中，只有setTimeout（）验证了这里

所以看看代码的两部分
var = {
测试：函数（）{
setTimeout（this.bbb，1000）；
}，
Bbb：函数（）{
console.log（'，'）；
}
}；
A.test（）
输出结果如下：
看看下面的代码输出是什么
var = {
测试：函数（）{
setTimeout（）{（）函数（
console.log（本）；
This.bbb（）；
}，1000）；
}，
Bbb：函数（）{
console.log（'，'）；
}
}；
A.test（）；
当运行此代码时，代码是错误的。
从上面的结果，我们可以知道，当我们使用setInterval和setTimeout（）（），当我们用这个回报，这个范围已经发生了变化，它已经指出窗口。

setTimeout（fn的含义，0）是指定要在主线程的最早可用空闲时间执行一个任务，也就是说，尽可能早。它增加了在任务队列的最后一个事件，那么它将直到所有现有的事件在同步任务任务队列处理执行。

这意味着，当我们建立了setTimeout（），我们可能不会立即等待几秒钟，然后我们将立即执行，但我们将等待主线程要处理的任务在执行之前，所以有一种现象，等待超过自己设置的时间。同时，会有其他的setTimeout（）在异步队列，这将在等待做然后执行电流。

看演示：
setTimeout（功能BBB）{ }，（4000）；
函数AAA（）{
setTimeout（功能CCC）{ }，（1000）；
}
（AAA）；
如果我们运行上面的代码，当我们执行AAA（）一秒钟时，我们将不立即执行CCC（），但等待BBB（）完成执行CCC（）。这时，主线程的运行结束是4S。

以上内容是针对javaｓｃｒｉｐｔ实现跑马灯抽奖实例的代码分析与优化（a），继续共享javaｓｃｒｉｐｔ实现跑马灯抽奖实例的代码分析与优化（二），有兴趣的朋友请注意。