近来的项目中做了一个“跑马灯”的抽奖殊效插件。上篇文章已分享过html和css 的相干学问。这篇文章主要分享一些 JavaScript 相干的学问。这几天在写这篇文章的时刻，也顺便把本身的代码重构了一下。
这里重假如来写写本身的优化历程。俗语说：

一个递次猿的提高是从对本身的代码不满意最先的。

最先之前先来看上篇文章脱漏的两个题目和几个学问点，是本身重构的历程当中须要用到的：

1.挪动端1px像素线的题目

关于设想师给我的手机端网页的设想稿都是2倍图。根据原理来讲，在写网页的时刻，一切对象的现实尺寸都是会除2。然则关于1像素的线呢？
先来看两张图，设想稿的效果：

在三星 S4下的现实显现效果：

能够看到这个时刻1px的线居然显现不出来了。这个题目是跟 S4手机的屏幕像素密度有关。关于屏幕像素密度和1px 线的关联有许多文章引见，能够自行搜刮相识。我这里的解决方案是，对1px 的线不做处置惩罚。是若干就写若干。就算我的基本单元是rem，也不是别的单元。

{
    position: absolute;
    width: 13rem;
    height: 9.2rem;
    border:1px solid #000;
}

2.pc 端浏览器和挪动端浏览器容错率的差别

先来看一段代码：

$('[node-type=row-a').find('div');

很明显能够发明，我应用的选择器是有语法错误的。然则在浏览器中运转会有什么效果呢？看下图：

很明显能够看出关于属性选择器，就算我有语法错误，PC 端浏览器也是能够准确剖析的。然则在手机端，这类写法是不能够准确剖析，代码不能够运转。

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

3.jQuery中选择器的应用

在应用 jQuery 或许是 Zepto 的历程当中最常常应用的选择器的写法就是下面如许吧，

    $('div.testClass')

只是在$() 中写上本身须要的 Dom 节点的 class或许 ID 或 者应用属性选择器。
在检察 jQuery的文档，关于$()会有如许的形貌：

jQuery([selector,[context]])

最主要的是看看对 context (它也是我们日常平凡应用中最轻易疏忽，然则却异常有效的一个参数)的形貌：

默许情况下, 假如没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；假如指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在jQuery 1.3.2今后，其返回的元素递次等同于在context中涌现的先后递次。

刚最先进修 JavaScript 那会儿，就听说了操纵 DOM 是很消耗浏览器机能，遍历 DOM 也是很影响递次机能的。
假如我们在指定的范围内查找须要的 Dom 会不会比从全部document 中查找快许多。而且在我们写 web 组件的历程当中，一个页面上组件能够涌现许屡次，那我们怎样推断我们要操纵哪一个组件呢？这个context参数就会起到决议行的作用。详细请继承看哇。。。

4.jQuery对象到数组的转换

刚最先进修 jQuery的时刻在一本书上看到一句话：

jQuery对象就是一个 JavaScript 数组。

而且在应用 jQuery的历程当中，都邑碰到，js对象转 jQuery对象，jQuery对象转 js对象。关于这些基本不做过量引见。
然则有时刻我们会想在 jQuery对象上应用一些原生Array对象的要领或许属性。来看一个简朴的例子：

由图中的代码运转效果，能够晓得在 jQuery对象上是没有我们要应用reverse要领的。只管test是一个数组。
那末我们怎样办才能够让 jQuery对象应用原生的 Array对象的要领呢？

4.1应用原型链扩大

比方下面的代码：

jQuery.prototype.reverse=function(){
    //一些操纵
}

应用prototype来扩大要领的时刻，人人一向比较认为是瑕玷的就是能够会污染已存在的原型链上的要领。另有就是接见要领的时刻须要查找原型链。

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

看下面的代码

var test = $('div.test');
var a=[];
$(test).each(function(){
    a.push($(this));
});

a.reverse();

如许就能够将 jQuery对象翻转。

4.3应用 Array对象的 from()要领

这类要领也是本身在编写插件历程当中应用的要领。看一下文档形貌：

Array.from() 要领能够将一个类数组对象或可迭代对象转换成实在的数组。

个人感觉应用这个代码比较简约。临时还不晓得有无机能的影响。继承看下面的代码：

var test = $('div.test');
var a= Array.from(test);
a.reverse();

5.setInterval()和setTimeout()对递次机能的影响

由于setTimeout()和setInterval()这两个函数在 JavaScript 中的完成机制完整一样，这里只拿 setTimeout()考证

那末来看两段代码

var a ={
    test:function(){
        setTimeout(this.bbb,1000);
    },
    bbb:function(){
        console.log('----');
    }
};
a.test()

输出效果以下：

看下面的代码输出是什么

var a ={
    test:function(){
        setTimeout(function(){
            console.log(this);
            this.bbb();
        },1000);
    },
    bbb:function(){
        console.log('----');
    }
};
a.test();

运转这段代码的时刻，代码报错

由以上的效果能够晓得，当我们在应用setInterval()和setTimeout()的时刻，在回掉中应用this的时刻，this的作用域已发生了转变，而且指向了 window。

setTimeout(fn,0)的寄义是，指定某个使命在主线程最早可得的余暇时候实行，也就是说，尽量早得实行。它在”使命行列”的尾部增加一个事宜，因而要比及同步使命和”使命行列”现有的事宜都处置惩罚完，才会获得实行。

意义就是说在我们设置 setTimeout()以后，也能够不是马上守候若干秒以后就马上实行回掉，而是会守候主线程的使命都处置惩罚完后再实行，所以存在 “守候”凌驾本身设置时候的征象。同时也会存在异步行列中已存在了别的的 setTimeout() 也是会守候之前的都实行完再实行当前的。

看一个 Demo：

setTimeout(function bbb(){},4000);

function aaa(){
    setTimeout(function ccc(){},1000);
}

aaa();

假如运转上面的代码，当实行完 aaa() ，JavaScript 线程余暇，这时候最先计时：守候1秒后将 ccc()到场实行行列,守候4s 将 bbb() 到场实行行列。这时候从 ccc()到场实行行列到 bbb()到场实行行列中心时候距离是3s。

实行效果以下图：