滑块验证，jquery实例的方法封装，验证登录，(支持PC端和移动端)

问题：

在工作中，为了防止别人刷接口，难免会遇到滑动验证。我在网上找个相关的代码，是经过jquery实例的方法封装，相对简单易学，我在这里进行了基本的解析
源码请看：码云链接

这里主要说一说jquery实例的封装

/* 封装基本架子 */
/* jQuery, window, document */
(function(t, i, s) {
    var l = function(i, s) {
        this.ele = i;
        this.defaults = {
            width: 300,
            height: 34,
            sliderBg: "#e8e8e8",
            color: "#666",
            fontSize: 12,
            bgColor: "#7ac23c",
            textMsg: "请按住滑块，拖动到最右边",
            successMsg: "验证成功",
            successColor: "#fff",
            time: 160,
            callback: function(t) {}
        };
        this.opts = t.extend({}, this.defaults, s);
        this.init()
    };
    l.prototype = {
        init: function() {
            this.result = false;
            this.sliderBtn_left = 0;
            this.maxLeft = this.opts.width - this.opts.height;
            this.render();
            this.eventBind()
        },
        render: function() {
            /*1.渲染html*/
            /*2.调用样式处理方法*/
            this.initStatus()
        },
        restore: function() {}，
        initStatus: function() {
            /* 样式处理 */
        },
        eventBind: function() { 
            /*事件绑定*/
        }
    };
    t.fn.slider = function(i) {
        return this.each(function() {
            var s = t(this);
            var e = s.data("slider");
            if(!e) {
                e = new l(s, i);
                s.data("slider", e)
            }
            if(typeof i === "string") {
                e[i]()
            }
        })
    }
})(jQuery, window, document);

• 中间部分是实例的原型方法，应该好理解
• 难理解的是头和尾，封装的核心架子
• 它里面有很多相同的变量名需要注意，比如i,s,t，其实表达的含义并不相同有种混淆变量的感觉

首先，看看jquery给实例添加的方法主题部分

在这里，为jquery的实例( 比如：$(‘.box’) )添加了一个slider方法

t.fn.slider = function(i) {
    return this.each(function() {
        var s = t(this);
        var e = s.data("slider");
        if(!e) {
            e = new l(s, i);
            s.data("slider", e)
        }
        if(typeof i === "string") {
            e[i]()
        }
    })
}

1. 写法上，有两种： (jquery拓展方法的写法)

t.fn.slider = function(i) {
    ......
}
t.fn.extend({
    slider : function(i) {
        ......
    }
})

2. jquery拓展方法说明

• return this.each，这里的this指的是所有调用这个方法的实例对象，是jquery对象
• var s = t(this);这里的this是指每一个实例对象，是DOM元素，s是jquery元素
• 在这里创建这个方法的对象实例e = new l(s, i);
• 参数有三种情况，不传、传对象、传字符串，下面有讲解
• 还有一点是data自定义属性的加入，它是将方法存储在了自定义属性slider中，可能是因为避免因为某种原因重复调用？我没有找到这种可能的情况。为什么多次一举，还需要探究，了解的朋友也可以找我交流

再看看这个方法本身

var l = function(i, s) {
    this.ele = i;
    this.defaults = {
        width: 300,
        height: 34,
        sliderBg: "#e8e8e8",
        color: "#666",
        fontSize: 12,
        bgColor: "#7ac23c",
        textMsg: "请按住滑块，拖动到最右边",
        successMsg: "验证成功",
        successColor: "#fff",
        time: 160,
        callback: function(t) {}
    };
    this.opts = t.extend({}, this.defaults, s);
    this.init()
};

3.方法说明

• 注意变量代表的是什么

//在jquery拓展中，是这么调用的：
e = new l(s, i);这里s指的是jquery实例对象，i指的是传的参数对象

//方法是这么写的：
var l = function(i, s){};这里的i和s与上面刚好相反，i指的是jquery实例对象，s指的是传的参数对象

**变量千万不要弄反哦，不要被迷惑了呦**

• 调用方法的参数与默认参数

//函数中有一个方法
this.opts = t.extend({}, this.defaults, s);

s是指传的参数(可以是一个对象，可以不传，在这里也可以传一个方法名‘restore’),
t是jquery

*注意*: jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象，相同属性后者会覆盖前者的属性值。

• jQuery.extend()方法说明

  • $.extend(item)，代表给jquery添加静态属性或方法，比如： jQuery.extend (min: function(a, b) { return a < b ? a : b; })
  • extend(result,item1,item2…..)；这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这样就会破坏result的结构。
  • extend({},item1,item2,……)；用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。
  • extend(bool,{},item1,item2….)；Extend方法还有带bool型参数的重载。bool型参数为true表示深拷贝，为false时表示浅拷贝。
  • 具体请看相关链接：http://blog.csdn.net/qq_34664239/article/details/79143172

• 传的参数类型
  正常传参，有两种方式

  • 一是什么也不传，一切用默认的配置。比如：$(“#slider2”).slider()；
  • 二是传对象，用来更改default的配置，改变属性值。 比如 ：二
  • 三是传字符串，restore，直接执行对象的restore方法； //个人觉得没必要有这种

//二：
$("#slider3").slider({ width: 340, callback: function(result) {$("#result2").text(result);}})

//三：
//在方法中的处理，影响参数
this.opts={
    0: "r", 1: "e", 2: "s", 3: "t", 4: "o", 5: "r", 6: "e", width: 300, sliderBg: "#e8e8e8"…
}
//在拓展方法中的影响：
if(typeof i === "string") {
    e[i]()
}
直接执行对象的i方法；算是一个初始化的东西