项目总结

总算是到了项目的 片尾，开始进行测试了，一个月周期的死磕到了一决雌雄的最后关头，为了让自己有所成长,今天进行一个小结，内容都是干货，有需要的可以拿去。虽然都是看起来非常简单的东西，用老大的话说就是就这么点东西，但是都是血和泪的历史。好了，开始进入正题。

一.首先总结一下项目中常用的小插件,当然网上一堆堆，不知道可自行百度谷歌：

1.时间日历插件          laydate.js

2.文件上传插件          ajaxupload.js

3.表单验证插件   jquey.validate.js

4.弹窗  因公司而异，这里我是用的公司自己封装的插件

5.省市区级联   初出茅庐时用的是插件，后面发现后台写到数据库里面，js绑定一下容易多了，妈妈再也不用担心我的学习，so easy,后面再讲

6.绑定数据插件   这里我想说一般情况下类似于后台管理的项目，一点点在表单上浪费的事件都是没有意义的，完全没有技术可言，这里奉献一个插件，后面再讲

7.差点忘了，还有分页      我见过最笨拙的分页方式是前端写好样式，等待js大神们来绑，其实我们可以更简单

        1.时间日历插件

插件目录分为 need（laydate.css）    /     skin （dahong / default）    /    laydate.js

need目录是放日历的基本样式，skin目录是放不同颜色样式，可以选择最适合项目的，laydate.js就是调用的插件，这里强调一下调用的时候不要引用css,因为js会自行调用

讲一下用法，我这里放的是开始时间与结束时间的，如果只要一个，就只要用一个就好了：

var start = {    elem: '#startTime',    format: 'YYYY-MM-DD',    min: '1900-01-01',    choose: function (datas) {        end.min = datas;        end.start = datas;    }};var end = {    elem: '#endTime',    format: 'YYYY-MM-DD',    min: '1900-01-01',    choose: function (datas) {        start.max = datas;    }};laydate(start);laydate(end);

2.文件上传插件

通常前端对文件上传的用法是非常复杂地用input的type为file，然而还在忙着调透明度的时候却被老板踢飞在厕所。

我这里用的是ajaxupload这个插件，只要把上传点击的id帮给js的btn 里面就可以了，上代码：

 <div class="cf">     <div class="btn-upload fl" name="upload" id="btnUploadImg">上传凭证</div>     <div class="file_img fl" id="file_img"></div>     <p class="fl uploadInfo">支持格式jpg、png、bmp大小不超过3M</p> </div> <input type="hidden" id="imgSrc" name="imgSrc" />ajax_FileUpload({    btn: $("#btnUploadImg"),    callback: function (data) {        if (!data.Success) {          } else {            $("#file_img").show().html("<a href='" + data.FilePath + "' target='_blank'><img src='" + data.FilePath + "' height='28' width='28' /></a>");        }    }});

这里的上传凭证的div就是点击的按钮,ID为file_img的是图片上传的显示盒子，最后一个ID为imgSrc的隐藏input框是为了保存文件上传的路径给前端去判断是否有上传的路径从而做出错误提示的判断，这个没什么好说。

这里强调一点文件上传的路径应是绝对路径，类似于/a/b/c.img,如果是相对路径，形同这样../../a/b/c.img，那么传给后台是会报错的，当后台饱含泪水地来找你的时候，才发现其实是自己的问题。当然说到图片，必须得扩展一下，html里面最好加上width和height，不然不利于性能的优化，时刻注意这些小细节，否则随时会有被屌的风险，当然这是小事，一个项目的点点滴滴都可能影响它的整体的效果和网站的性能评分，所以革命尚未成功，下一句不说了，继续。。。

3.表单验证插件         jquery.validate.js

说到表单验证，是不是还有小伙伴在用funcion去验证，当然一些简单的登录注册这些小表单可以用，并且可以详细地把每个文本框的内容丰富及错误提示，但是遇到一个表单有三四十个的，你还这样的话，我只想说，你找shi。所以，遇到这种情况，夹起你们的尾巴，还是好好做人，学会用validate.js这个插件吧

validate.js的验证类似这样：

$("#form").validate({

onfocusout:function(element){$(element).valid();}

rules:{},

messages:{}

});

至于rules和messages怎么设置我就不说了，自行脑补，我想讲的是怎么得到它返回的值进行判断是否要进行提交的操作，好的，那就上代码：

function verify(){    return $("#form").validate({         onfocusout:function(element){$(element).valid();}         rules:{},         messages:{}    });}

这样verify这个方法可以返回表单验证的值，那怎么调用呢，按照一般的方法调用的思路，是这样的：verify(),不，老大看到会让你滚蛋走人的，so,可以这样：

if(!verify().form()){

return false;

}

相关问题还有怎么设置错误提示的样式呢，怎么把特殊的验证用validate验证呢，菜鸟宝宝基本不用担心，但是老大们还是会把这些提为公共的。这些不细说，百度都有，形同这样

// 联系电话(手机/电话皆可)验证   jQuery.validator.addMethod("isTel", function (value, element) {    var length = value.length;    var mobile = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;    var tel = /^(\d{3,4}-?)?\d{7,9}$/g;    return this.optional(element) || tel.test(value) || (length == 11 && mobile.test(value));}, "请正确填写您的联系方式");// 匹配qq      jQuery.validator.addMethod("isQq", function (value, element) {    return this.optional(element) || /^[1-9]\d{4,12}$/;}, "匹配QQ");// 邮政编码验证    jQuery.validator.addMethod("isZipCode", function (value, element) {    var zip = /^[0-9]{6}$/;    return this.optional(element) || (zip.test(value));}, "请正确填写您的邮政编码。");

4.弹窗

关于弹框，我这里又要啰嗦一番，弹框可以分为四类，我就说公司里面封装的方法了，分别是：

1）几秒消失的弹层，类似于移动端自带那种；                              ----------                                      

2）success  /  warn  /  error这几种提示的弹层；                            ----------             封装了$.systemTip的插件，调用时直接$obj.systemTip("error","您的信息填写错误")

3）可以用来放比较多表单内容的自定义弹框；                              ----------              封装了$.fn.popShow的插件，调用时直接$obj,popShow({})就可以了;

4）最后就是加载中提示的弹层；                                                    ----------              封装了$.loadingTip的插件，调用时直接$obj.loadingTip();就可以了

当然，有那种弹出一个表单确认的打开就要有关闭，所以还加一个隐藏弹出层

其实，会用插件那都时浮云，会写插件才是真本事，所以前端路漫漫，理清插件思路才是真道理啊！

5.省市区级联

之前用的是网上的插件，但是比较繁琐，需要引用省市区级联的插件，这样其实还是不方便管理的。这里我们使用了一个新方法，就是把省市区写进数据库，然后用js对其进行限制，选择了省才可以选择市，选择了市才可以选择区，所以只要区没有选择，那么省和市就没有填写完整，所以只要调用一个绑定省份的js，判断有没有区，就可以了。

//绑定省

function bindProvince(callback){

$.ajax({

url:"/Province/ProvinceList",

type:"get",

cache:false,

success:function(data){

if(data.Success){

var pObj = $("#sltProvince");

pObj.find("option"),remove();

var html = "<option value='0'>请选择</option>";

$(data.Data).each(function(){

html += "<option value='"+v.ProvinceID+"'>"+v.Name+"</option>";

});

pObj.append(html);

callback && callback();

}

}

});

}

//绑定市

function bindCity(provinceId,callback){

if(!provinceId){

return;

}

$.ajax({

url:"/Province/CityList",

type:"get",

cache:false,

data:{provinceId:provinceId},

success:function(data){

if(data.Success){

var pObj = $("#sltCity");

pObj.find("option"),remove();

var html = "<option value='0'>请选择</option>";

$(data.Data).each(function(){

html += "<option value='"+v.CityID+"'>"+v.Name+"</option>";

});

pObj.append(html);

callback && callback();

}

}

});

}

//绑定区

function bindDistrict(cityId,callback){

if(!cityId){

return;

}

$.ajax({

url:"/Province/DistrictList",

type:"get",

cache:false,

data:{cityId:cityId},

success:function(data){

if(data.Success){

var pObj = $("#sltDistrict");

pObj.find("option"),remove();

var html = "<option value='0'>请选择</option>";

$(data.Data).each(function(){

html += "<option value='"+v.DistrictID+"'>"+v.Name+"</option>";

});

pObj.append(html);

callback && callback();

}

}

});

}

//绑定省市区

function bindPCD(){

bindProvince(function(){

var provinceId = $("#sltPorvince").attr("provinceId");

$("#sltProvince").val(provinceId);

if(provinceId && provinceId>0){

bindCity(provinceId,function(){

var cityId = $("#sltCity").attr("cityId");

$("#sltCity").val(cityId);

if(cityId && cityId>0){

bind(cityId,function(){

$("#sltDistrict").val($("#sltDistrict").attr("districtId"));

});

}

});

}

});

}

省  $("#sltProvince")      市  $("#sltCity")         区$("#sltDistrict")

调用时只要调用    bindProvince();

6.绑定数据

一般情况下的页面绑定数据是后台来绑定的，特别是像jsp,asp,php里面都是的，但是对于数据量特别大的表格，其实前端可以代替后端进行一些分工，这里主要是通过js进行数据绑定。当然数据量不是很多的情况，特别是页面显示比较多的，也有让前端负责数据绑定的，不过对于那种前后端分离的情况，前端其实承担的责任还是更大的。

我遇到比较常见的数据量比较多的情况是下面是显示地表格，上面有搜索的条件，当点击搜索的时候，下面查到的数据也要进行改变。这种情况还是比较多的，一般的数据管理的系统都会有这种数据绑定。最开始接触这个数据的时候，我是写了两个ajax，下面的表格数据用一次ajax查询，上面的搜索也用了一次查询，这样的话，最后的效果其实没有太多的差别，但是代码终究还是比较冗余的，所以我们采用更简单的方式进行绑定。如果想要知道怎么用插件快速绑定数据，那就私聊我吧，这里就还是不说了。

7.分页是数据量比较大的时候需要使用的，上面我说的绑定数据的时候肯定也是需要用到绑定数据的，大家是怎么做分页及分页的数据绑定的，也可以找我讨论一下

二.其次再总结一下项目中遇到的表单问题，感觉像是吃了颗灵泛丸，用了百试百灵，就这么点东西，不说了，都是泪：

1.围绕input的type值，（text / password / reset / checkbox / radio / submit  / button / file / hidden）

2.围绕form提交的方式  （button / submit）

3.讲到表单，就顺带讲一下页面跳转

1.围绕input的type值，讲一下这些常用的的表单以及需要注意的一些问题。

1）text     文本框，主要是想讲一下如果做点击文本框出现时间的情况让文本框不可以手动输入的一个属性       readonly="readonly"只读就可以了，当然简写最好

2）password    密码框

3）reset        重置，如果让你重置表单，你通常会怎么做，不要告诉我还要得到每个input框的val，然后清空，其实最简单的就是让input的type为reset，然后点击这个input的时候就自动清空文本框的内容了

4）checkbox      复选框，这里我不得不说对于复选框，用原生的功能比较好，但是样式在浏览器下确实是让人不忍直视，特别是360的ie7内核，丑了我一脸。要想好看，就得自己写样式，不管是前者还是后者都会遇到的常见的问题就是------如何判断选中不选中

原生选中              $("input:checkbox").attr("checked","checked");

                不选中         $("input:checkbox").removeAttr("checked");

       判断是否选中   $("input:checkbox").is(":checked");

如果是自己写的，选不选中就是给那个div加不加选中的类，判断选中也就只要判断是不是有那个类就可以了

5）radio         单选框，同样也是分为原生和自己手写两种，

     如果是原生的单选的话，只要让这些可以选择项的name相同就可以了，当然我推荐使用自己手写的。一个是因为兼容性更好，第二个也是因为它的灵活性也更强，

     原生的选中      $("input:radio[name="a"]").eq(0).attr("checked",'checked');

      不选中    $("input:radio").attr("checked","false");

6）submit      提交

7）button      按钮

8）file       一般是文件上传，不过我上面也有说过只要用文件上传的插件，不用input的file也可以，所以这里也不细说了

9）hidden      隐藏域，一般情况下都是后端数据绑定的情况下使用，或者就是前端不显示的内容需要提交给后端的

2.讲一下表单提交的两种方式，一种是通过input的submit的固有的来设，另一种就是通过button来设。

先说一下submit的方法：顾名思义就是通过点击提交按钮就自动触发提交的方法，所以给提交按钮的type设为submit，然后再在form上加一个onsubmit="submitData();return false;"然后直接就在js里面写submitData()的方法就好了。

如果是button的方法，就是点击提交这个button按钮的时候触发submitData()的方法，这两种都可以，任选之一就好了。

其实方法很简单，但是怎么把提交验证的思路搞定才是真的。

3.讲到这里我又想说一下表单提交的方式，上面讲表单验证的插件的时候讲了一种validate验证，还有一种是用方法去验证，但是用方法去验证的时候没有思路的情况下我总能见到各种奇葩的写法。这里可以给一个更好的思路。验证的子方法因时而异，来说一下整体验证判断是否要提交表单。打个比方有3个验证的方法a(),b(),c(),验证是否提交的话，只要定义一个变量var verifyVal = a();  verifyVal = b() && verifyVal;  verifyVal = c() && verifyVal;这样得到的verifyVal值就是判断是否要提交的最后的布尔值

4.页面跳转

主要有window.location.href,    window.open，页面刷新的话可以window.location.href=window.location.href;

三.讲一下遇到的逻辑性js问题

1.做设置满送活动的时候，在满送规则上没少花心思                这里讲一下如何不能设置重复的满送规则

2.在做开户申请的时候，有个意向银行的排序也是费些脑细胞的

3.在做选择订单索取发票的时候，这个类似于购物车的勾选问题也是狗血了一脸

4.当然让人吐血窒息的，还有一个充值和支付遇到的选择优惠活动的问题，妈呀，心塞

写到这里，感觉有一点要瞬间崩塌的感觉，所以，这里的js总结就放到后面再说吧。over....