JavaScript贯彻跑马灯抽取奖品活动实例代码解析与优化,二个跑马灯插件

By admin in 4858美高梅 on 2019年4月16日

那是小编写的3个简练的跑马灯插件一.0,后边的本子将新扩大图片滚动的效果!!

叁个跑马灯插件(持续优化),跑马灯插件持续优化

那是本人写的四个归纳的跑马灯插件一.0,前面包车型地铁本子将猛增图片滚动的效能!!

运用办法:

一、HTML模板

<div id="marquee-wrapper">
    <div>
        <p>
            这是我写的一个粗略的跑马灯,滚动方向可以设置,具体的宽高样式可以设置,速度可以设置,后面会持续优化。
        </p>
    </div>
</div>

第二这些跑马灯的框架固定是那般的,不可更动。最外层的div的id自身创制。

二、属性和参数

//Author:Nangxi
//Version:1.0         
//属性               解析                可能值
//id                跑马灯的id           自定
//decoration        滚动方向             left、right、top、bottom
//width             跑马灯div宽度        自定(单位px)
//height            跑马灯div高度        自定(单位px)
//speed             跑马灯滚动速度       自定

三、调用

var marquee={
    id:"marquee-wrapper",
    decoration:"left",
    width:500,
    height:50,
    speed:10
};
scroll(marquee);

编写制定好相应参数,然后调用scroll()方法。

插件下载地址:

这是自身写的二个粗略的跑马灯插件1.0,前面包车型大巴本子将新添图片滚动的职能!!
使用方…

在上篇作品给我们介绍了JavaScript兑现跑马灯抽取奖金活动实例代码解析与优化(一),既然是要编写制定插件。那么叫做“插件”的事物一定是具备的一点特点能够满意大家经常支付的急需依旧是拉长大家的支付效能。那么叫做插件的东西应该具备哪些基本特征呢?让大家来总计一下:

JavaScript达成跑马灯抽取奖金活动实例代码解析与优化(2),跑马灯抽取奖金活动

在上篇小说给我们介绍了JavaScript完结跑马灯抽取奖金活动实例代码解析与优化(一),既然是要编写插件。那么叫做“插件”的东西一定是有着的少数特征能够满足大家一直付出的供给依然是进步我们的开拓功效。那么叫做插件的事物应该有所怎么样基本特征呢?让大家来计算一下:

一.JavaScript 插件1些基本特征:

配置一定要简明
插件中定义的变量不污染全局变量;
一样段代码能够在差异的地点复用;
用户能够自定义自个儿意义参数;
持有销毁变量和参数的效果;
如果依据以上的多少个特色来写插件的话,大家得以计算出三个主导的代码结构,大家三个二个的来看:

1.插件配置要硬着头皮的粗略

html中安排容器节点

//这里的node-type="reward-area" 是标识我们插件的容器节点
<div class="re-area" node-type="reward-area" >

DOM加载成功之后起先化插件

$(function() {
//这里的 test 是代表容器的 class
window.LightRotate.init($('[node-type=reward-area]'));
});

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

JavaScript
具备块级作用域的标志符正是function了。那我们怎么表明我们的变量才足以使它不传染全局变量呢?
此处大家必要使用的二个 JavaScript 函数的自举行的知识点。代码如下:

(function(){
// do something
})();

叁.在区别的地点复用成效代码

那就要选取大家面向对象的知识点,把大家的效果代码抽象成靶子,在我们供给选择的时候,实例化对象就足以了。那咱们跟着第二部的代码继续写,

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// do something
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

四.用户能够自定义效率参数

率先大家应该有暗中同意的参数设定,比如上边那样

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// 自定义的参数
this.setting = {
liAutoPlay: false, //周围的灯是否自动旋转
roLiSpeed: 100, //灯旋转的速度ms
roPrSpeed: 200, //奖品旋转速度ms
liDirection: true, //旋转方向 true 正方向 false 反方向
randomPrize: false //空格是否随机选取
};
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

骨子里那样写的话,使用者已经足以修改大家的 JavaScript
文件来实现自定义了。然而为了能够让大家的价格差别丰硕的好用,比如说,大家的使用者一点儿都不懂
js 呢?该如何做?
如此那般大家得以把这个参数用自定义属性配置在 html中,如下:

<div class="re-area" node-type="reward-area" data-setting='{
"liAutoPlay":false,
"roLiSpeed":100,
"roPrSpeed":200,
"liDirection":true,
"randomPrize":false}'>

如此用户只供给在
html的节点中就可以安顿当前容器运转的参数。那样的补益还能够使同一页面上的例外容器,能够独立的布置参数,减弱耦合。

那么在 js
中大家该怎么获取这几个参数呢?在地点的代码中,已经有了效果对象函数。那么大家想扩张对象方法来获得用户的自定义参数,如何是好呢?大家一般采取prototype的东西来扩展大家已有目的的方法,代码如下:

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// 自定义的参数
this.setting = {
liAutoPlay: false, //周围的灯是否自动旋转
roLiSpeed: 100, //灯旋转的速度ms
roPrSpeed: 200, //奖品旋转速度ms
liDirection: true, //旋转方向 true 正方向 false 反方向
randomPrize: false //空格是否随机选取
};
//这里调用对象的获取用户自定义参数的方法,并且将默认参数合并
$.extend(_this.setting, _this.getSettingUser());
};
LightRotate.prototype = {
//扩展获取用户自定义参数的方法
getSettingUser: function () {
var userSetting = this.LightArea.attr('data-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
}
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

5.销毁变量和参数的效能;

最后1个正是大家的插件应该负有销毁自身变量和参数的效劳。大家该怎么写吧?照旧在上头的代码基础上一连扩大功用对象的可调用艺术,代码如下:

LightRotate.prototype = {
//扩展获取用户自定义参数的方法
getSettingUser: function () {
var userSetting = this.LightArea.attr('data-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
},
//销毁对象参数
destory: function () {
$(_this.LightArea).off();
this.closeAnimation();
this.rewardTimer = null;
}
};

由上述大家的内容大家能够大约领悟了四个大智若愚的插件应该具有的基本成效。

二.插件开采和优化示例

刚好这么些类型是在大年放假前的二个急迫的档次,当时为了赶进程就从不详尽思念本人的代码结构,那样野味自身的延续优化提供了机遇。

由上一节介绍的定期器的剧情能够领略 JavaScript 是单线程的。所以

若是1段代码运转效用异常低,就会影响三番8次代码的举办。所以对于 JavaScript
,代码优化是必须的。
先来探望大家的“跑马灯”插件应该具有何等成效:

可知调控灯是或不是自动播放;
灯的旋转方向能够决定;
JavaScript贯彻跑马灯抽取奖品活动实例代码解析与优化,二个跑马灯插件。灯的团团转速度能够操纵;
奖状的转动速度能够操纵;
那里就不详细的牵线那么些意义点的支付进程,仅仅介绍优化过程。如若风趣味能够看本身文章最后附上的源代码地址,实行下载阅读。

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

因为相近的灯作者是行使相对化定位来做的,所以小编必要“顺序”的收获他们的列表,然后操作。

第3获得 DOM节点。

//获取外围的灯,可以看到我这里使用的选择器多了一个 select,是为了获取当前容器下的某些元素,避免有多个容器存在时冲突
this.topLight = $('[node-type=re-top]', select).find('span');
this.rightLight = $('[node-type=re-right]', select).find('span');
this.bottomLight = $('[node-type=re-bottom]', select).find('span');
this.leftLight = $('[node-type=re-left]', select).find('span');

然后就应当“顺序”的获取“灯”节点的 DOM 成分列表。

自家的首先版是那样做的:

Zepto(topLight).each(function() {
lightList.push(this);
});
Zepto(rightLight).each(function() {
lightList.push(this);
});
for (var j = bottomLight.length - 1; j >= 0; j--) {
lightList.push(bottomLight[j]);
}
for (var m = leftLight.length - 1; m >= 0; m--) {
lightList.push(leftLight[m]);
}

因为“下”和“左”方向的灯是内需倒序的,所以作者动用了八个倒序的
for循环,其实当循环出现的时候,大家都应该考虑大家的代码是还是不是有可优化的空间。

优化后的代码是那样子的,在这里笔者压缩了四遍巡回的使用

function () {
var lightList = [];
var bottomRever;
var leftRever;
bottomRever = Array.from(this.bottomLight).reverse();
leftRever = Array.from(this.leftLight).reverse();
lightList = Array.from(this.topLight).concat(Array.from(this.rightLight));
lightList = lightList.concat(bottomRever);
lightList = lightList.concat(leftRever);
}

列表倒序笔者动用了原生 Array对象的reverse方法。

贰.采用“闭包”优化顺序循环播

为了能够使大家的“灯”顺序的跑起来,第一版的思路是:

给每一种“灯”(注意,那里是种种,罪过…罪过…)定义一个setTimeout(),试行时间正是数序的参与js 实行队列中去。
代码是底下那规范的:

var zepto_light = Zepto(lightList);
var changeTime = 100;
var lightLength = zepto_light.length;
var totleTime = changeTime * lightLength;
function lightOpen() {
for (var i = 0; i < lightLength; i++) {
(function temp(i) {
lightTimer = setTimeout(function() {
if (stopAnimation === false) {
Zepto(zepto_light).removeClass('light_open');
Zepto(zepto_light[i]).addClass("light_open");
} else {
return;
}
}, changeTime * i);
})(i);
}
}

如此那般子写的败笔很引人侧目:假如本人有924个“灯”那么就会在现阶段的 js
实施队列中投入100个setTimeout(),再一次重申的是本人那里又采取了for循环,在时刻复杂度上又扩展了。代码的实践成效又回落了。

新生想想了下,JavaScript
中“闭包”符合笔者当下的选择情状,就想着用闭包优化一下,优化后代码如下:

lightRun: function () {
var _this = this;
function tempFunc() {
var lightList = _this.getLightList();
var lightLength = lightList.length;
var i = 0;
return function () {
$(lightList, _this.LightArea).removeClass('light_open');
$(lightList[i], _this.LightArea).addClass("light_open");
i++;
//使一轮循环结束后能够继续下次循环
if (i === lightLength) {
i = 0;
}
};
}
var lightRunFunc = tempFunc();
lightRunFunc();
_this.lightInterVal = setInterval(lightRunFunc, _this.setting.roLiSpeed);
}

由上述的代码能够很显然的发现多个优点:第二,正是减掉了
for循环的接纳,降低了代码的小时复杂度,第二正是,每一次自小编只有在方今代码施行的队列中创建二个setInterval()。减小了施行队列的复杂度。

关于JavaScript实现跑马灯抽取奖品活动实例代码解析与优化(二)的连带文化就给大家介绍到那里,希望本文所述对大家全部接济。

选取方法:

1.JavaScript 插件1些基本特征:

你只怕感兴趣的篇章:

  • javascript 单行文字向上跑马灯滚动展现
  • javascript跑马灯悬停放大要义落到实处代码
  • js跑马灯代码(自写)
  • js文本框走动跑马灯效果代码分享
  • JS达成动静栏跑马灯文字效果代码
  • javascript跑马灯抽取奖金实例讲明
  • JavaScript兑现跑马灯抽取奖金活动实例代码解析与优化(壹)

在上篇作品给我们介绍了JavaScript达成跑马灯抽取奖金活动实例代码解…

一、HTML模板

安插一定要简明
插件中定义的变量不污染全局变量;
一如既往段代码能够在区别的地点复用;
用户能够自定义本人意义参数;
抱有销毁变量和参数的功力;
借使依据以上的多少个特点来写插件的话,我们得以总计出3个骨干的代码结构,大家二个1个的来看:

<div id="marquee-wrapper">
    <div>
        <p>
            这是我写的一个粗略的跑马灯,滚动方向可以设置,具体的宽高样式可以设置,速度可以设置,后面会持续优化。
        </p>
    </div>
</div>

一.插件配置要硬着头皮的简约

率先这么些跑马灯的框架固定是如此的,不可退换。最外层的div的id自个儿制订。

html中配置容器节点

二、属性和参数

//这里的node-type="reward-area" 是标识我们插件的容器节点
<div class="re-area" node-type="reward-area" >
//Author:Nangxi
//Version:1.0         
//属性               解析                可能值
//id                跑马灯的id           自定
//decoration        滚动方向             left、right、top、bottom
//width             跑马灯div宽度        自定(单位px)
//height            跑马灯div高度        自定(单位px)
//speed             跑马灯滚动速度       自定

DOM加载成功之后伊始化插件

三、调用

$(function() {
//这里的 test 是代表容器的 class
window.LightRotate.init($('[node-type=reward-area]'));
});
var marquee={
    id:"marquee-wrapper",
    decoration:"left",
    width:500,
    height:50,
    speed:10
};
scroll(marquee);

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

编辑好相应参数,然后调用scroll()方法。

JavaScript
具有块级功能域的标记符正是function了。那大家怎么表明大家的变量才方可使它不污染全局变量呢?
此处我们需求动用的一个 JavaScript 函数的自试行的知识点。代码如下:

插件下载地址:

(function(){
// do something
})();

三.在分化的地点复用作用代码

这将要选择大家面向对象的知识点,把大家的机能代码抽象成靶子,在我们需求选择的时候,实例化对象就足以了。那我们跟着第一部的代码继续写,

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// do something
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

4.用户能够自定义成效参数

第一我们应当有默许的参数设定,比如上面这样

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// 自定义的参数
this.setting = {
liAutoPlay: false, //周围的灯是否自动旋转
roLiSpeed: 100, //灯旋转的速度ms
roPrSpeed: 200, //奖品旋转速度ms
liDirection: true, //旋转方向 true 正方向 false 反方向
randomPrize: false //空格是否随机选取
};
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

实际这么写的话,使用者已经足以修改我们的 JavaScript
文件来达成自定义了。但是为了能够让我们的价差丰硕的好用,比如说,大家的使用者一点儿都不懂
js 呢?该怎么做?
如此那般大家得以把这一个参数用自定义属性配置在 html中,如下:

<div class="re-area" node-type="reward-area" data-setting='{
"liAutoPlay":false,
"roLiSpeed":100,
"roPrSpeed":200,
"liDirection":true,
"randomPrize":false}'>

4858美高梅,这么用户只需求在
html的节点中就可以配备当前容器运营的参数。那样的便宜还足以使同1页面上的不一样容器,能够单独的配备参数,裁减耦合。

那正是说在 js
中大家该怎么获取这么些参数呢?在地点的代码中,已经有了功用对象函数。那么大家想扩展对象方法来获得用户的自定义参数,怎么办吧?我们壹般选用prototype的事物来扩大大家已有目的的主意,代码如下:

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// 自定义的参数
this.setting = {
liAutoPlay: false, //周围的灯是否自动旋转
roLiSpeed: 100, //灯旋转的速度ms
roPrSpeed: 200, //奖品旋转速度ms
liDirection: true, //旋转方向 true 正方向 false 反方向
randomPrize: false //空格是否随机选取
};
//这里调用对象的获取用户自定义参数的方法,并且将默认参数合并
$.extend(_this.setting, _this.getSettingUser());
};
LightRotate.prototype = {
//扩展获取用户自定义参数的方法
getSettingUser: function () {
var userSetting = this.LightArea.attr('data-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
}
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

伍.销毁变量和参数的效果;

最后一个正是大家的插件应该具有销毁本人变量和参数的法力。我们该怎么写吗?还是在上头的代码基础上接轨扩马俊亮能对象的可调用艺术,代码如下:

LightRotate.prototype = {
//扩展获取用户自定义参数的方法
getSettingUser: function () {
var userSetting = this.LightArea.attr('data-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
},
//销毁对象参数
destory: function () {
$(_this.LightArea).off();
this.closeAnimation();
this.rewardTimer = null;
}
};

由上述大家的始末我们得以大约明白了1个成熟的插件应该有所的基本作用。

贰.插件开垦和优化示例

正好那几个连串是在新禧放假前的二个迫比不上待的种类,当时为了赶进程就从不详细考虑自个儿的代码结构,这样野味本身的接续优化提供了机遇。

由上一节介绍的定期器的剧情能够领略 JavaScript 是单线程的。所以

一旦一段代码运维功用相当低,就会潜移默化一而再代码的奉行。所以对于 JavaScript
,代码优化是必须的。
先来看望大家的“跑马灯”插件应该有所哪些效率:

能够调控灯是或不是自动播放;
灯的团团转方向能够垄断(monopoly);
灯的转动速度能够操纵;
奖状的转动速度可以调节;
这里就不详细的介绍这几个意义点的开支进度,仅仅介绍优化进程。固然有意思味能够看自个儿文章最终附上的源代码地址,进行下载阅读。

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

因为左近的灯笔者是行使绝对化定位来做的,所以本人急需“顺序”的获取他们的列表,然后操作。

先是获得 DOM节点。

//获取外围的灯,可以看到我这里使用的选择器多了一个 select,是为了获取当前容器下的某些元素,避免有多个容器存在时冲突
this.topLight = $('[node-type=re-top]', select).find('span');
this.rightLight = $('[node-type=re-right]', select).find('span');
this.bottomLight = $('[node-type=re-bottom]', select).find('span');
this.leftLight = $('[node-type=re-left]', select).find('span');

然后就应当“顺序”的得到“灯”节点的 DOM 成分列表。

自家的第二版是这么做的:

Zepto(topLight).each(function() {
lightList.push(this);
});
Zepto(rightLight).each(function() {
lightList.push(this);
});
for (var j = bottomLight.length - 1; j >= 0; j--) {
lightList.push(bottomLight[j]);
}
for (var m = leftLight.length - 1; m >= 0; m--) {
lightList.push(leftLight[m]);
}

因为“下”和“左”方向的灯是内需倒序的,所以本人利用了三个倒序的
for循环,其实当循环出现的时候,大家都应有思虑大家的代码是还是不是有可优化的上空。

优化后的代码是那样子的,在那里本身压缩了6回巡回的运用

function () {
var lightList = [];
var bottomRever;
var leftRever;
bottomRever = Array.from(this.bottomLight).reverse();
leftRever = Array.from(this.leftLight).reverse();
lightList = Array.from(this.topLight).concat(Array.from(this.rightLight));
lightList = lightList.concat(bottomRever);
lightList = lightList.concat(leftRever);
}

列表倒序小编利用了原生 Array对象的reverse方法。

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

为了能够使大家的“灯”顺序的跑起来,第3版的思绪是:

给每八个“灯”(注意,那里是每3个,罪过…罪过…)定义1个setTimeout(),实施时间就是数序的参加js 施行队列中去。
代码是下面那规范的:

var zepto_light = Zepto(lightList);
var changeTime = 100;
var lightLength = zepto_light.length;
var totleTime = changeTime * lightLength;
function lightOpen() {
for (var i = 0; i < lightLength; i++) {
(function temp(i) {
lightTimer = setTimeout(function() {
if (stopAnimation === false) {
Zepto(zepto_light).removeClass('light_open');
Zepto(zepto_light[i]).addClass("light_open");
} else {
return;
}
}, changeTime * i);
})(i);
}
}

如此子写的弱项很鲜明:假使小编有100个“灯”那么就会在时下的 js
推行队列中加入九陆个setTimeout(),再度重申的是小编那边又选拔了for循环,在岁月复杂度上又加多了。代码的推行效用又下降了。

新生沉思了下,JavaScript
中“闭包”符合自身眼下的行使情状,就想着用闭包优化一下,优化后代码如下:

lightRun: function () {
var _this = this;
function tempFunc() {
var lightList = _this.getLightList();
var lightLength = lightList.length;
var i = 0;
return function () {
$(lightList, _this.LightArea).removeClass('light_open');
$(lightList[i], _this.LightArea).addClass("light_open");
i++;
//使一轮循环结束后能够继续下次循环
if (i === lightLength) {
i = 0;
}
};
}
var lightRunFunc = tempFunc();
lightRunFunc();
_this.lightInterVal = setInterval(lightRunFunc, _this.setting.roLiSpeed);
}

由上述的代码能够很显然的意识多少个亮点:第一,正是缩减了
for循环的运用,降低了代码的光阴复杂度,第1正是,每一趟笔者只是在现阶段代码施行的类别中创设3个setInterval()。减小了实行队列的复杂度。

有关JavaScript完毕跑马灯抽取奖品活动实例代码解析与优化(二)的连锁知识就给大家介绍到此地,希望本文所述对我们具备扶助。

你可能感兴趣的篇章:

  • 原生JS达成跑马灯效果
  • 基于Marquee.js插件实现的跑马灯效果示例
  • Javascript实现跑马灯效果的简约实例
  • JavaScript落到实处跑马灯抽取奖金活动实例代码解析与优化(1)
  • javascript跑马灯抽取奖金实例疏解
  • javascript新闻跑马灯实例代码
  • JS实现情状栏跑马灯文字效果代码
  • js文本框走动跑马灯效果代码分享
  • javascript
    单行文字向上跑马灯滚动展现
  • js实现文字跑马灯效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有