在上篇文章给大家介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化（一），既然是要编写插件。那么叫做“插件”的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率。那么叫做插件的东西应该具有哪些基本特征呢？让我们来总结一下：
1.JavaScript 插件一些基本特征：
配置一定要简单
插件中定义的变量不污染全局变量；
同一段代码可以在不同的地方复用；
用户可以自定义自己功能参数；
具有销毁变量和参数的功能；
如果按照以上的几个特征来写插件的话，我们可以总结出一个基本的代码结构，我们一个一个的来看：
1.插件配置要尽可能的简单
html中配置容器节点
//这里的node-type="reward-area" 是标识我们插件的容器节点 <div node-type="reward-area" >
DOM加载完成以后初始化插件
$(function() { //这里的 test 是代表容器的 class window.LightRotate.init($('[node-type=reward-area]')); });
2.插件中定义的变量不污染全局变量
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);
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 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.销毁变量和参数的功能；
最后一个就是我们的插件应该具有销毁自身变量和参数的功能。我们该怎么写呢？还是在上面的代码基础上继续扩展功能对象的可调用方法，代码如下：