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

水深无声 2022-09-24 03:28 206阅读 0赞

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

- 封装了这个方法的好处在哪里，看到里面的遍历方法了，这个方法会遍历页面中所有符合条件的空间进行非空验证，你可能会说他是如何筛选这个条件的呢，看到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;
        }
    });

*  页面显示也是前端的菜，显示中最常见的就是分页显示了，我们的数据可能是成千上万的数据，你想一次都展示吗，当然不，我们就炫耀用到分页，下面我简单介绍几种分页插件吧
 *  ![这里写图片描述][20160723160538892]  
    jqPagination 是一个简单易用的轻量级 jQuery 分页插件，其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项，通过简单的配置即可生成分页控件。此外，它的外观样式是可自定义的，扩展性很强
 *  ![这里写图片描述][20160723160711003]  
    这个是我用的最多的，读者可以结合我的另外一篇文章看看  
    [http://blog.csdn.net/u013132051/article/details/51753312][http_blog.csdn.net_u013132051_article_details_51753312]
 *  下面接不介绍了，分页只要懂就行，下面看看其他的分页的效果吧
 *  ![这里写图片描述][20160723160849737]  
    ![这里写图片描述][20160723160953050]
 *  \+++++++++++++++++++++++++++++++++++++++++++
 *  下面我在讲讲显示的框架，我用的最多的是jQuery 、bootstrap  
    里面显示数据的用的datagrid最多，最近用的是mmgrid,其实两者类似，只需要搞懂流程这些就不是事，给读者推荐这几个网址  
    
    
     *  mmGrid：[http://miemiedev.github.io/mmGrid/examples/index.html][http_miemiedev.github.io_mmGrid_examples_index.html]
     *  datagrid:[http://www.php1.cn/Article/index/id/6040][http_www.php1.cn_Article_index_id_6040]
     *  jQuery EasyUI:[http://www.runoob.com/jeasyui/jqueryeasyui-intro.html][http_www.runoob.com_jeasyui_jqueryeasyui-intro.html]
     *  bootstrap:[http://www.runoob.com/bootstrap/bootstrap-tutorial.html][http_www.runoob.com_bootstrap_bootstrap-tutorial.html]
 *  **后续还会整理 《程序员常用网站简介》**  
    \-一个网站为了实现友好，就得用到弹出层，下面贴几个弹出层的效果

![这里写图片描述][20160723161633781]  
![这里写图片描述][20160723161805882]  
![这里写图片描述][20160723161850190]  
这些弹层可以自己调节样式，也可以自己定义，下面简单说怎么使用这个插件  
\- 下载jar包(网址：[http://sc.chinaz.com/tag\_jiaoben/DanChuCeng.html][http_sc.chinaz.com_tag_jiaoben_DanChuCeng.html])  
\- ![这里写图片描述][20160723162042209]  
\- 解压文件然后将里面的js、css引入自己的项目中

*  使用的时候需要用到人家的样式，就必须要按照别人的风格来编写

<div class="open btn" id="btnVerify">
                    <span><img src="<%=request.getContextPath()%>/resources/common/images/upload-white.png"></span><i>审核</i>
                </div>

*  就这样就可以使用了
 *  **说到这里前端就总结了这么多，下面还会总结后台的一些注意方法，在多说一句，程序员最需要的就是心态，每天进步一点点，一年后你就不一样了**
 *  [http://blog.csdn.net/u013132051/article/details/51743627][http_blog.csdn.net_u013132051_article_details_51743627]

[20160723160538892]: /images/20220720/2817bfd6236c4b2ebd26bbe7f5bac9d9.png
[20160723160711003]: /images/20220720/c318beabc0e94eb690cfa23641fa4f49.png
[http_blog.csdn.net_u013132051_article_details_51753312]: http://blog.csdn.net/u013132051/article/details/51753312
[20160723160849737]: /images/20220720/4aace2f16467477aa2d68ba56af2f2be.png
[20160723160953050]: /images/20220720/e0c7399da09446e1b5c21f065fd6f943.png
[http_miemiedev.github.io_mmGrid_examples_index.html]: http://miemiedev.github.io/mmGrid/examples/index.html
[http_www.php1.cn_Article_index_id_6040]: http://www.php1.cn/Article/index/id/6040
[http_www.runoob.com_jeasyui_jqueryeasyui-intro.html]: http://www.runoob.com/jeasyui/jqueryeasyui-intro.html
[http_www.runoob.com_bootstrap_bootstrap-tutorial.html]: http://www.runoob.com/bootstrap/bootstrap-tutorial.html
[20160723161633781]: /images/20220720/1cda523e3eb34463b8b0b45ecd890b00.png
[20160723161805882]: /images/20220720/c83f8bf08d38455c8b0945e07c5c254a.png
[20160723161850190]: /images/20220720/5afac1b7d4ef49edb160a968ac6a55c9.png
[http_sc.chinaz.com_tag_jiaoben_DanChuCeng.html]: http://sc.chinaz.com/tag_jiaoben/DanChuCeng.html
[20160723162042209]: /images/20220720/4d60b8e179cd40139481420b28f2a510.png
[http_blog.csdn.net_u013132051_article_details_51743627]: http://blog.csdn.net/u013132051/article/details/51743627