未分类

Quanta杯总结-2

啊~！

JS交互（后台）

这次作品和后台交互还是蛮多的，自己已经不只是再单纯的重构写页面了，这次也花了很多时间在这里导致没有太多时间打重构的代码=。=
主要涉及这几个：表单验证，表单提交，Ajax，数据传递。

整体结构

参考的博文找不到了。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var loginBar = {
    init: function () {
            _this = loginBar;
            _this.config = {
                $loginBtn: $('#login-btn'),
                $regisBtn: $('#regis-btn'),
                $loginOly: $('#login-overlay'),
                $regisOly: $('#regis-overlay')
            };
            _this.setup();
        },
        setup: function () {
            _this.bindEvent(_this.config.$loginBtn, _this.config.$loginOly);
            _this.bindEvent(_this.config.$regisBtn, _this.config.$regisOly);
        },
        //事件绑定，外部也可以单独调用
        bindEvent: function (clickObj, targetObj) {
            clickObj.click(function () {
                targetObj.fadeIn(500).click(function (event) {
                    if (event.target == $(this).context) {
                        $(this).fadeOut(500);
                    };
                })
            })
        }
}

这种方法就是每个独立的方法都是一个对象，在对象里面有各种各样的方法可以内部互相调用。在初始化的匿名函数中：_this = loginBar，这个刚开始我觉得很巧妙，通过这个变量让内部来互相调用。不过在后来自己想，发现这个_this是个全局变量，全局变量，全局变量啊！！！所以在控制台中输入_this出来的结果一般都是指向最后使用的匿名函数。
刚开始觉得还没什么，后来用到了定时器就蛋疼了。因为定时器里面也用到了这个_this，在不同的匿名函数方法中开了两个定时器，_this的指向就开始混乱了。
好吧说一下这种JQ封装的方法：在init()中初始化用到的JQ对象，在setup()中对JQ对象进行事件绑定什么的，或者是作为程序的入口，相应调用其他方法，其他的方法就是具体到细节，处理各种各样的事情。另外也可以把这种模式换一种写法，让外界不能直接调用，但是能返回一个对象还是什么的=。=我忘记了。。下次找回那篇文章再贴上去。

表单验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("#regis-overlay input[name='email']").blur(function () {
    var status = _this.checkValidate.checkEmail($(this).attr('value'));
    if (!status) {
        $('.validateinfo').text("邮箱格式不正确");
        return false;
    } else {
        $('.validateinfo').text("");
    }
}).change(function () {
    var status = _this.checkValidate.checkEmail($(this).attr('value'));
    if (!status) {
        $('.validateinfo').text("邮箱格式不正确");
        return false;
    } else {
        $('.validateinfo').text("");
    }
});

不行让我重构一下。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var commonOperate = function (status, text) {
    if (!status) {
        $('.validateinfo').text(text);
        return false;
    } else {
        $('.validateinfo').text("");
    }
};
//表单提交前验证
$("#regis-overlay input[name='email']").blur(function () {
    var status = _this.checkValidate.checkEmail($(this).attr('value'));
    commonOperate(status, "邮箱格式不正确");
}).change(function () {
    var status = _this.checkValidate.checkEmail($(this).attr('value'));
    commonOperate(status, "邮箱格式不正确");
});

把公用部分提取出来了，因为后面其实还有三个要绑定的输入框。不过这样不同的事件绑定相同的事件处理程序应该有更好的写法吧。看着相同的代码写了两遍好不爽。
然后是正则表达式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
checkValidate: {
        checkEmail: function (str) {
            var re = /^[A-Za-z0-9]+([._\\-]*[a-z0-9])*@([A-Za-z0-9]+[A-Z-a-z0-9]*[A-Za-z0-9]+.){1,63}[A-Za-z0-9]+$/;
            return re.test(str);
        },
        checkUser: function (str) {
            var re = /^[A-Za-z].*[0-9a-zA-Z]{5,30}$|^[A-Za-z][0-9].*[A-Za-z]{5,30}$/;
            return re.test(str);
        },
        checkPassword: function (str) {
            var re = /^[A-Za-z0-9]+$/;
            return re.test(str);
        }
}

写得好臭的感觉= =不过多多少少又对正则入门了一些。对于：

1
2
3
4
5
6
7
reurn re.test(str);
//
if(re.test(str)){
    return true;
} else {
    return false;
}

本来是下面这样写的，然后WebStorm帮我改成了上面这种/(ㄒoㄒ)/~~
正则表达式验证：正则表达式验证

表单提交

1
2
3
4
5
6
7
8
9
10
submitForm: function (btn, tform, turl) {
    if (btn.attr("id") == 'logS') {
        btn.click(function () {
            ///code
        })
    } else { //通用方法 给所有表单使用
                btn.click(function () {
                    tform.submit();
                })
        }

因为在重构的时候所有按钮都用<a>标签来写了，所以后台一直在喊”哇不是吧你怎么这么坑啊submit在哪里啊”…
所以写了个方法给他调用，不过要在每个要提交的按钮加个Id咯，还有form也要=。=然后在一些特定的按钮就加了一些判断，普通表单直接提交，像登陆注册这种就做了一层合法性验证。

Ajax

这次用了很多。在表单提交啊，聊天视频同步啊，搜索啊，添加信息什么的都用到了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$.ajax({
    url: turl,
    data: $("#loginForm").serialize(),
    dataType: 'json',
    type: 'POST',
    success: function (data) {
            if (data.status == 1) {
                tform.submit();
            } else if (!data.content.verifyresult) {
                console.log(data);
                $('.validateinfo').text("验证码错误");
            } else if (!data.content.userresult) {
                $('.validateinfo').text("用户名不存在");
            } else if (!data.content.pwresult) {
                $('.validateinfo').text("密码错误");
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest, textStatus, errorThrown);
            console.log($("#loginForm").serialize());
        }
})

这个是登陆用的Ajax。也是第一个写的Ajax。
后台在我重构页面的时候一直催我催我”哈哈浩笙快写Ajax啊我后台函数都写好了啊就靠你了啊”…然后出现了不少坑：
url问题：因为后台写提交链接是使用了Thinkphp的内置写法：__URL__，__PUBLIC__什么的，如果在这JS里面写，以为这个放在了静态资源那里，所以Thinkphp并不会渲染修改字符串。刚开始就妥协的写法，直接写路径，不久就出现了问题：/../getpauseplay?creatermd5=像这样，是绝对路径，而登陆注册框几乎在每个页面都有，所以不可能每个页面写一个路径。后来就直接给这个方法传递路径参数了，调用写在了HTML里，就能正确渲染后传值给JS这里了。
data：刚开始查JQ的文档的时候还弄错了这个参数，用了content…理解成向后台发送的数据了，实际上是：

content: 一个以”{字符串:正则表达式}”配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。

改完之后就能传递表单数据了：$("#loginForm").serialize()

serialize():序列表表格内容为字符串。

datatype : 这个会自动判断，不过当Ajax请求成功但是却不是你要的内容，可以设置为text来查看具体返回了什么。这次后台一律使用json来传递数据。

type ： 默认是get，有时候需要改为post。后台应该说清楚不然我总是请求不成功=。=

success ： 函数参数就是请求成功返回的数据了。然后就对数据进行各种调教…

error ： 这个前期总是发生=。=基本都是上面提到的问题，然后给我抛出各种错误长长的一串我也不知道是什么意思不过有些数字记下来：
AJAX状态值与状态码
一般遇到404.或者200但是textStatus返回这个：
unexpected token <类似这样的。设置返回内容为文本后发现数据返回的是HTML…
然后不断的check。一般有两个原因：

  1. 该死的后台用了dump()，返回的数据带了后台测试的输出
  2. 请求的地址中没有发送任何内容，会直接返回原页面…
    写多几个Ajax后面就没什么太多的问题了。
分享到