logo头像

学如逆水行舟,不进则退!!!

文章目录

前端开发中快速掌握的技巧

本文于559天之前发表,文中内容可能已经过时。

之前开发过程中没有太在意前端方法的封装,最近在项目里看到别人封装的方法了,实在太有用了,自己总结了一下,好东西就应该共享一下

  • 之前开发过程中没有太在意前端方法的封装,最近在项目里看到别人封装的方法了,实在太有用了,自己总结了一下,好东西就应该共享一下
  • 表单验证非空:
    • 以前我都是将需要验证的字段在js中拿到这个字段的变量,然后判断这个变量是否是空值的,相信你也是这样的,那么来看看改进之后的方法吧`/**
  • 验证表单
    */
function validForm() {
    var b = true;

    //    遍历页面中,所有符合条件的控件,eg:<input type="..." verify="decimal" msg="用户名"/>
    $("body").find("*").each(function(){
        if (typeof ($(this).attr("verify")) != "undefined") {
            var data = $.trim($(this).val());
            if (data.length < 1) {
                // 数据为空时,消息提示
                var msg = $(this).attr("msg")
                msg += ",不能为空";
                $(this).focus();
                alert(msg);
                b = false;
                return b;
            }else {
                //    合法校验
                b = validData(data,$(this).attr("verify"),$(this).attr("msg"));
                if (!b) {
                    return b;
                }
            }
        }
    });

    return b;
}`
 - 封装了这个方法的好处在哪里,看到里面的遍历方法了,这个方法会遍历页面中所有符合条件的空间进行非空验证,你可能会说他是如何筛选这个条件的呢,看到verify了吗,我们只需要在jsp页面中在需要验证的控件上面填一个verify字段就行了,这个字段不需要附任何值,这就是告诉我,这个空间需要进行非空验证。这里我只是提了一个非空验证,如果验证一些其他规则的就可以在Verify中传值了,这个读者可以自行扩展一下,实现好了的,希望大家也可以发给我,让我瞅瞅。
 - 下面贴个我们公司的大牛写了验``
 /**
 * 验证基本数据格式,如果本方法未提供符合要求的验证,请自行添加,格式参照如下
 */
function validData(value,type,msg){
    //    验证数字:
    if (type == 'number') {
        var reg = /^[0-9]*$/
        if (!reg.test(value)) {
            alert(msg+",不是数字");
            return false;
        }
    }
    //    验证Email地址:
    if (type == 'email') {
        var reg = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/
        if (!reg.test(value)) {
            alert(msg+",格式不对");
            return false;
        }
    }

    //    手机号码:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$或 var regMobile=/^1[3,5,8]\d{9}$/;
    if (type == 'phone') {
        var reg = /^1[3,5,8]\d{9}$/
        if (!reg.test(value)) {
            alert(msg+",不是手机号码");
            return false;
        }
    }

    //    验证电话号码::--正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。
    if (type == 'telephone') {
        var reg = /^((d{3,4})|d{3,4}-)?d{7,8}$/
        if (!reg.test(value)) {
            alert(msg+",不是电话号码");
            return false;
        }
    }

    //    验证身份证号(15位或18位数字):
    if (type == 'ID') {
        var reg = /^d{15}|d{}18$/
        if (!reg.test(value)) {
            alert(msg+",格式不正确");
            return false;
        }
    }

    //    非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
    if (type == 'decimal') {
        var reg = /^\d+(\.\d{0,5})?$/
        if (!reg.test(value)) {
            alert(msg+",格式不正确(数值类型,允许保留到小数点后5位)");
            return false;
        }
    }

    //    验证用户密码: 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。    
    if (type == 'password') {
        var reg = /^[a-zA-Z]w{5,17}$/
        if (!reg.test(value)) {
            alert(msg+",格式不正确\n正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线");
            return false;
        }
    }
    return true;
}
  • 在前端我们除了验证可能遇到最多的就是与后台数据的传递,以前我都是借助框架的封装来传递的,还有就是我自己手动拼接的json,现在来看一种封装指定控件的工具
/**
 * 获取需要保存的页面数据
 * @returns json 
 */
function getFormData() {
    var jsonArray = [], data = {};
    //    遍历页面中,所有符合条件的input 输入类型控件,eg:<input type="..." column="columnA"/>
    $("input").each(function(i, e) {
        if (typeof ($(e).attr("column")) != "undefined") {
            data["" + $(e).attr('column')] = $(e).val();
        }
    });
    //    遍历页面中,所有符合条件的select 输入类型控件,eg:<select column="columnA">...</select>
    $("select").each(function(i, e) {
        if (typeof ($(e).attr("column")) != "undefined") {
            data["" + $(e).attr('column')] = $(e).val();
        }
    });

    //    遍历页面中,所有符合条件的textarea 输入类型控件,eg:<textarea column="columnA">...</textarea>
    $("textarea").each(function(i, e) {
        if (typeof ($(e).attr("column")) != "undefined") {
            data["" + $(e).attr('column')] = $(e).val();
        }
    });
    jsonArray.push(data);
    //    转译为字符串 ,以“dd”标识,用于后台controller接收,eg: "[{'columnA':'valueA','columnB':'valueB'}]"
    var jsondata = {
        "zxh" : JSON.stringify(jsonArray)
    };
    return jsondata;
}
  - 这个和验证是一样的,我将jsp中所有具有column属性的空间的值拿过来进行封装在json中,在json中的名称就是column字段属性的名称,最后将这个字符串返回出来,我们就可以在ajax中将这个字符串当做参数传递到后台,因为参数中的是zxh,所以我在后台中的接受就需要接受这个zxh,这样我们就拿到的jsp中的数据,在后台拿到数据了,作为程序员的你应该懂得
  • 3加载jsp中的空间
    • 比如现在我的jsp中有一个select空间,我在页面初始化的时候需要把后台的数据拿过来,你可以自己写,如果我说这个jsp中有100select 的话,你难道要一个一个写?答案当然是NO,还是一样我在jsp中给每个select 的column 属性赋值,然后我在通用函数中将传这个column的字段,这个函数就会将column这个select框加载到指定的select的位置上去,怎么样方便吧
/**
 * 加载 下拉框
 * @param jsonArray
 */
function loadSelectData(jsonArray,select) {
    $("select[column='"+select+"']").empty();
    $.each(jsonArray, function(i) {    //    遍历下拉框数据
        var data = jsonArray[i];
        $("select[column='"+select+"']").append('<option value="'+data.ID+'">'+data.NAME+'</option>');
    });
}
  • 下面的方法我就不一一介绍了,总的来说就是不要仅仅局限于孔健中给我们提供 的那些属性,我们要善于自定义属性
  • 4js操作cookie
    • 你知道session和cookie吗,JavaWeb开发师最属性的两个东西,但是我们用的最多的就是在后台操作,在前台还是第一次听说吧,相信不少朋友都忘记js怎么操作cookie的了,
    • 这里我们要用到document
// 写cookie
function _setCookie(key, value, time) {
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec * 1);
    document.cookie = key + "=" + escape(value) + ";expires="
            + exp.toGMTString();
}
  • 既然可以设定cookie的时间,必须有获取时间的方法
//    获取cookie时间
function getsec(str) {
    var str1 = str.substring(1, str.length) * 1;
    var str2 = str.substring(0, 1);
    if (str2 == "s") {
        return str1 * 1000;
    } else if (str2 == "h") {
        return str1 * 60 * 60 * 1000;
    } else if (str2 == "d") {
        return str1 * 24 * 60 * 60 * 1000;
    }
}
  • 下面我们来获取cookie吧
//    获取cookie
function _getCookie(key) {
    var arr, reg = new RegExp("(^| )" + key + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}
  • js既然想操作cookie那必须像Java一样,所以我们还差一个删除cookie的方法
//    删除cookie
function _delCookie(key) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = _getCookie(key);
    if (cval != null)
        document.cookie = key + "=" + cval + ";expires=" + exp.toGMTString();
}
  • 到这里cookie基本操作就这些,没了。下面我们来谈谈ajax,上面我们也提到了,封装的json是如何传入后台的呢,ajax,对就是他,网站开发中的王者,没了他我们就要失业了
  • ajax同步
    • async: false 就这一个属性就可以实现了,默认是true我们有的时候需要进行同步操作,只需要将async改为false就可以了
  • ajax异步
    • async: true 异步更简单写这句话,或者什么都不写就是异步
  • ajax会发送吗?不会?那我就没办法了$.ajax(url,param,success,error); 这是最基本的ajax,还有好多他的变形方法,读者可以百度一下或看一下手册就好了
  • 前端美工是不可忽视的一种行业,在条CSS的时候最怕的就是浏览器版本问题,所以我们的知道我们的浏览器的版本
$(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        alert('I am an old fashioned Internet Explorer');
      }
});
  • 元素固定在顶部 这个是很有用的,有时候我们的导航按钮就需要这样设计,还有我们的工具栏也是需要固定在顶部的
$(function(){
    var $win = $(window)
    var $nav = $('.mytoolbar');
    var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
    var isFixed=0;

    processScroll()
    $win.on('scroll', processScroll)

    function processScroll() {
    var i, scrollTop = $win.scrollTop()

    if (scrollTop >= navTop && !isFixed) { 
        isFixed = 1
        $nav.addClass('subnav-fixed')
    } else if (scrollTop <= navTop && isFixed) {
        isFixed = 0
         $nav.removeClass('subnav-fixed')
    }
}
  • 用其他内容取代html标志 jQuery使得用另外一个东西取代html标志很简单。
`$('li').replaceWith(function(){
  return $("
").append($(this).contents());
});`
  • 检测视窗宽度 这个也很重要,我们的用户有的喜欢小屏幕有的喜欢超大的,你的网站需要适合所有大小的屏幕这样才能赢得用户的好感
    var responsive_viewport = $(window).width();
  • 检测复制、粘贴和剪切的操作 你的网站如果不是那种要求高的,都是可以让用户赋值你网站上面的东西的,
 $("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});
  • 遇到外部链接自动添加target=”blank”的属性 现在网络的发展快,很多网站希望提高自己的访问量,会到一些知名网站上发送外链(我也经常干,但我都是发别人需要的,不是那种水军),这样我们可以防止
 var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});
  • 在文本或密码输入时禁止空格键
$('input.nospace').keydown(function(e) {
    if (e.keyCode == 32) {
        return false;
    }
});
  • 页面显示也是前端的菜,显示中最常见的就是分页显示了,我们的数据可能是成千上万的数据,你想一次都展示吗,当然不,我们就炫耀用到分页,下面我简单介绍几种分页插件吧
  • 这里写图片描述
    jqPagination 是一个简单易用的轻量级 jQuery 分页插件,其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件。此外,它的外观样式是可自定义的,扩展性很强
  • 这里写图片描述
    这个是我用的最多的,读者可以结合我的另外一篇文章看看
    http://blog.csdn.net/u013132051/article/details/51753312
  • 下面接不介绍了,分页只要懂就行,下面看看其他的分页的效果吧
  • 这里写图片描述
    这里写图片描述
  • +++++++++++++++++++++++++++++++++++++++++++
  • 下面我在讲讲显示的框架,我用的最多的是jQuery 、bootstrap
    里面显示数据的用的datagrid最多,最近用的是mmgrid,其实两者类似,只需要搞懂流程这些就不是事,给读者推荐这几个网址
  • 后续还会整理 《程序员常用网站简介》
    -一个网站为了实现友好,就得用到弹出层,下面贴几个弹出层的效果

这里写图片描述
这里写图片描述
这里写图片描述
这些弹层可以自己调节样式,也可以自己定义,下面简单说怎么使用这个插件

<link href="<%=request.getContextPath()%>/resources/common/Css/dialog.css" rel="stylesheet"/>
<link href="<%=request.getContextPath()%>/resources/common/Css/dialog-theme.css" rel="stylesheet" type="text/css">
  • 使用的时候需要用到人家的样式,就必须要按照别人的风格来编写
<div class="open btn" id="btnVerify">
                <span><img src="<%=request.getContextPath()%>/resources/common/images/upload-white.png"></span><i>审核</i>
            </div>
上一篇
坚持原创技术分享,您的支持将鼓励我继续创作!