四处优化,3个跑马灯插件

那是自作者写的2个简易的跑马灯插件壹.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贯彻跑马灯抽取奖金活动实例代码解析与优化(壹)四处优化,3个跑马灯插件。,既然是要编写制定插件。那么叫做“插件”的事物一定是装有的一点特点能够满足大家一贯费用的须求照旧是增加我们的耗费效能。那么叫做插件的东西应该享有怎么样基本特征呢?让大家来计算一下:

JavaScript落到实处跑马灯抽取奖金活动实例代码解析与优化(二),跑马灯抽取奖金活动

在上篇小说给大家介绍了JavaScript完结跑马灯抽取奖金活动实例代码解析与优化(一),既然是要编写插件。那么叫做“插件”的事物必定是装有的一点特点能够满意大家平时支付的须求依然是增高大家的开拓成效。那么叫做插件的事物应该具有怎么样基本特征呢?让大家来总括一下:

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

配备一定要轻易
插件中定义的变量不传染全局变量;
壹致段代码能够在区别的地点复用;
用户能够自定义自身意义参数;
持有销毁变量和参数的功效;
假定依据上述的多少个特点来写插件的话,大家能够总括出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]'));
});

贰.插件中定义的变量不传染全局变量

JavaScript
具备块级作用域的标志符便是function了。那大家怎么评释大家的变量才方可使它不污染全局变量呢?
那里大家需求使用的三个 JavaScript 函数的自实施的知识点。代码如下:

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

三.在不一致的地方复用效率代码

这将要选取我们面向对象的知识点,把大家的法力代码抽象成靶子,在大家须求运用的时候,实例化对象就足以了。那大家随后第3部的代码继续写,

//
(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.销毁变量和参数的功效;

最终3个便是大家的插件应该负有销毁本身变量和参数的效应。大家该怎么写啊?照旧在上面包车型地铁代码基础上前赴后继扩张功用对象的可调用艺术,代码如下:

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个早熟的插件应该负有的基本功能。

2.插件开采和优化示例

赶巧这些项目是在大年放假前的贰个殷切的类型,当时为了赶进程就不曾详尽思量本身的代码结构,那样野味自身的持续优化提供了机会。

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

假设壹段代码运转功效十分低,就会潜移默化一而再代码的进行。所以对于 JavaScript
,代码优化是必须的。
先来看看大家的“跑马灯”插件应该具备如何功效:

能够调节灯是还是不是自动播放;
灯的团团转方向能够垄断;
灯的转动速度能够垄断(monopoly);
澳门葡京 ,奖状的转动速度能够调整;
此处就不详细的牵线这个意义点的耗费进度,仅仅介绍优化进程。就算风乐趣能够看自身小说最终附上的源代码地址,实行下载阅读。

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

因为周围的灯作者是选取绝对化定位来做的,所以作者必要“顺序”的收获他们的列表,然后操作。

第一取得 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方法。

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

为了能够使我们的“灯”顺序的跑起来,第三版的笔触是:

给每一个“灯”(注意,那里是每3个,罪过…罪过…)定义二个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);
}
}

如此子写的症结很显眼:借使自己有九20个“灯”那么就会在当前的 js
施行队列中进入97个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完结跑马灯抽取奖金活动实例代码解析与优化(二)的相干文化就给大家介绍到此地,希望本文所述对我们有着协理。

行使办法:

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

您或许感兴趣的稿子:

  • javascript 单行文字向上跑马灯滚动显示
  • javascript跑马灯悬停放大效力完成代码
  • js跑马灯代码(自写)
  • js文本框走动跑马灯效果代码分享
  • JS实现动静栏跑马灯文字效果代码
  • javascript跑马灯抽取奖品实例解说
  • JavaScript落到实处跑马灯抽取奖金活动实例代码解析与优化(一)

在上篇小说给我们介绍了JavaScript完毕跑马灯抽取奖金活动实例代码解…

一、HTML模板

陈设一定要轻松
插件中定义的变量不传染全局变量;
同等段代码能够在差异的地点复用;
用户能够自定义本身遵守参数;
负有销毁变量和参数的遵从;
假诺依照上述的多少个特色来写插件的话,大家能够总括出二个为主的代码结构,我们三个二个的来看:

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

一.插件配置要硬着头皮的差不离

第1这么些跑马灯的框架固定是那般的,不可改换。最外层的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);

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

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

JavaScript
具备块级成效域的标记符正是function了。那我们怎么注脚大家的变量才方可使它不传染全局变量呢?
那里大家必要利用的一个 JavaScript 函数的自实行的知识点。代码如下:

插件下载地址:

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

3.在分裂的地点复用功效代码

那将在采用大家面向对象的知识点,把大家的功效代码抽象成靶子,在我们须要选拔的时候,实例化对象就可以了。那大家随后第一部的代码继续写,

//
(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
中我们该怎么获取这一个参数呢?在上头的代码中,已经有了成效对象函数。那么大家想扩充对象方法来获取用户的自定义参数,如何做吧?大家1般选用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;
}
};

由以上大家的内容大家可以大约精通了多个老奸巨滑的插件应该具有的基本功用。

二.插件开拓和优化示例

正要那几个类型是在新春放假前的三个迫在眉睫的品类,当时为了赶进程就从未详尽思索自身的代码结构,这样野味自个儿的承接优化提供了机遇。

由上一节介绍的定期器的始末能够知晓 JavaScript 是单线程的。所以

要是1段代码运营作效果能相当的低,就会影响几次三番代码的实行。所以对于 JavaScript
,代码优化是必须的。
先来探望我们的“跑马灯”插件应该具有怎样功能:

能够调整灯是或不是自动播放;
灯的团团转方向能够决定;
灯的团团转速度能够操纵;
奖状的转动速度能够调整;
此处就不详细的牵线这么些意义点的费用进度,仅仅介绍优化进度。假若有意思味能够看自己文章最后附上的源代码地址,实行下载阅读。

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

因为相近的灯小编是应用相对化定位来做的,所以自身急需“顺序”的获取他们的列表,然后操作。

率先得到 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 成分列表。

本人的第3版是这般做的:

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方法。

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

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

给每3个“灯”(注意,那里是每二个,罪过…罪过…)定义贰个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);
}
}

这么子写的老毛病很引人注目:借使自个儿有玖拾捌个“灯”那么就会在近日的 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循环的使用,下落了代码的年华复杂度,第2正是,每一遍自笔者偏偏在眼下代码推行的类别中开创四个setInterval()。减小了施行队列的复杂度。

关于JavaScript完成跑马灯抽取奖金活动实例代码解析与优化(2)的相关知识就给大家介绍到那边,希望本文所述对大家持有支持。

你或然感兴趣的小说:

  • 原生JS达成跑马灯效果
  • 依据Marquee.js插件完成的跑马灯效果示例
  • Javascript贯彻跑马灯效果的简约实例
  • JavaScript兑现跑马灯抽取奖品活动实例代码解析与优化(1)
  • javascript跑马灯抽取奖金实例讲授
  • javascript音讯跑马灯实例代码
  • JS达成境况栏跑马灯文字效果代码
  • js文本框走动跑马灯效果代码分享
  • javascript
    单行文字向上跑马灯滚动展现
  • js完结文字跑马灯效果

相关文章

发表评论

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

*
*
Website