既然是要编写插件。那么叫做“插件”的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率。那么叫做插件的东西应该具有哪些基本特征呢？让我们来总结一下：
1.JavaScript 插件一些基本特征：
- 配置一定要简单
- 插件中定义的变量不污染全局变量；
- 同一段代码可以在不同的地方复用；
- 用户可以自定义自己功能参数；
- 具有销毁变量和参数的功能；
如果按照以上的几个特征来写插件的话，我们可以总结出一个基本的代码结构，我们一个一个的来看：
1.插件配置要尽可能的简单
html中配置容器节点
|
1 2 |
//这里的node-type="reward-area" 是标识我们插件的容器节点 <div class="re-area" node-type="reward-area" > |
DOM加载完成以后初始化插件
|
1 2 3 4 |
$(function() { //这里的 test 是代表容器的 class window.LightRotate.init($('[node-type=reward-area]')); }); |
2.插件中定义的变量不污染全局变量
JavaScript 具有块级作用域的标识符就是function了。那我们怎么声明我们的变量才可以使它不污染全局变量呢？
这里我们需要用到的一个 JavaScript 函数的自执行的知识点。代码如下：
|
1 2 3 |
(function(){ // do something })(); |
3.在不同的地方复用功能代码
这就要用到我们面向对象的知识点，把我们的功能代码抽象成对象，在我们需要使用的时候，实例化对象就可以了。那我们接着第二部的代码继续写，
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// (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.用户可以自定义功能参数
首先我们应该有默认的参数设定，比如下面这样
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// (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中,如下：
