前端之正则表达式，前端自动化和性能优化

来源：cnblogs　　作者：YifChan　　时间：2019/6/17 8:48:42　　对本文有异议

正则表达式

1、什么是正则表达式：
能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符

var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾

7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感

8、常用函数
1、test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

2、replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符

正则默认规则
匹配成功就结束，不会继续匹配，区分大小写

var sTr01 = 'abcdefedcbaCef';
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;
var sTr02 = sTr01.replace(re01,'*');
var sTr03 = sTr01.replace(re02,'*');
var sTr04 = sTr01.replace(re03,'*');
alert(sTr02); // 弹出 ab*defedcbaCef
alert(sTr03); // 弹出 ab*defed*baCef
alert(sTr04); // 弹出 ab*defed*ba*ef

常用正则规则

//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证：
var rePhone = /^1[3458]\d{9}$/;

正则表达式使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var re01 = new RegExp('a', 'i');
        var re02 = /a/;
        var re03 = /\d/;
        var re04 = /\d+/;
        var re05 = /^\d+$/;
        var re06 = /^ab$/i;
        
        var sTr01 = 'abcdefg';
        var sTr02 = 'cdefgh';
        var sTr03 = '1234abcd';
        var sTr04 = '12345678';
        var sTr05 = 'Ab';
        
        //alert( re02.test(sTr01));
        //alert(re02.test(sTr02));
        //alert(re03.test(sTr03)); // 弹出true
        //alert(re04.test(sTr03));
        //alert(re05.test(sTr03));
        //alert(re05.test(sTr04));
        alert(re06.test(sTr05));
    </script>
</head>
<body>
 
</body>
</html>

正则表达式使用示例

注册表单验证实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-注册</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/register02.js"></script>
</head>
<body>
<div class="register_con">
    <div class="l_con fl">
        <a class="reg_logo"><img src="images/logo02.png"></a>
        <div class="reg_slogan">足不出户 · 新鲜每一天</div>
        <div class="reg_banner"></div>
    </div>
 
    <div class="r_con fr">
        <div class="reg_title clearfix">
            <h1>用户注册</h1>
            <a href="#">登录</a>
        </div>
        <div class="reg_form clearfix">
            <form>
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" name="user_name" id="user_name">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>密码:</label>
                        <input type="password" name="pwd" id="pwd">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>确认密码:</label>
                        <input type="password" name="cpwd" id="cpwd">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>邮箱:</label>
                        <input type="text" name="email" id="email">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li class="agreement">
                        <input type="checkbox" name="allow" id="allow" checked="checked">
                        <label>同意”天天生鲜用户使用协议“</label>
                        <span class="error_tip2">提示信息</span>
                    </li>
                    <li class="reg_sub">
                        <input type="submit" value="注 册" name="">
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>
 
<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>
 
</body>
</html>

$(function () {
    var error_name = false;
    var error_password = false;
    var error_check_password = false;
    var error_email = false;
    var error_check = false;
    $('#user_name').blur(function () {
        check_user_name();
    });
    $('#user_name').focus(function () {
        $(this).next().hide();
    });
    $('#pwd').blur(function () {
        check_pwd();
    });
    $('#pwd').focus(function () {
        $(this).next().hide();
    });
    $('#cpwd').blur(function () {
        check_cpwd();
    });
    $('#cpwd').focus(function () {
        $(this).next().hide();
    });
    $('#email').blur(function () {
        check_email();
    });
    $('#email').focus(function () {
        $(this).next().hide();
    });
    $('#allow').click(function () {
        if ($(this).is(':checked')) {
            error_check = false;
            $(this).siblings('span').hide();
        } else {
            error_check = true;
            $(this).siblings('span').html('请勾选同意');
            $(this).siblings('span').show();
        }
    });
    function check_user_name() {
        //数字字母或下划线
        var reg = /^\w{6,15}$/;
        var val = $('#user_name').val();
        if (val == '') {
            $('#user_name').next().html('用户名不能为空！')
            $('#user_name').next().show();
            error_name = true;
            return;
        }
        if (reg.test(val)) {
            $('#user_name').next().hide();
            error_name = false;
        } else {
            $('#user_name').next().html('用户名是5到15个英文或数字，还可包含“_”')
            $('#user_name').next().show();
            error_name = true;
        }
    }
    function check_pwd() {
        var reg = /^[\w@!#$%&^*]{6,15}$/;
        var val = $('#pwd').val();
        if (val == '') {
            $('#pwd').next().html('密码不能为空！')
            $('#pwd').next().show();
            error_password = true;
            return;
        }
        if (reg.test(val)) {
            $('#pwd').next().hide();
            error_password = false;
        } else {
            $('#pwd').next().html('密码是6到15位字母、数字，还可包含@!#$%^&*字符')
            $('#pwd').next().show();
            error_password = true;
        }
    }
    function check_cpwd() {
        var pass = $('#pwd').val();
        var cpass = $('#cpwd').val();
        if (pass != cpass) {
            $('#cpwd').next().html('两次输入的密码不一致')
            $('#cpwd').next().show();
            error_check_password = true;
        } else {
            $('#cpwd').next().hide();
            error_check_password = false;
        }
    }
    function check_email() {
        var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
        var val = $('#email').val();
        if (val == '') {
            $('#email').next().html('邮箱不能为空！')
            $('#email').next().show();
            error_email = true;
            return;
        }
        if (re.test(val)) {
            $('#email').next().hide();
            error_email = false;
        } else {
            $('#email').next().html('你输入的邮箱格式不正确')
            $('#email').next().show();
            error_email = true;
        }
    }
    $('.reg_form').submit(function () {
        check_user_name();
        check_pwd();
        check_cpwd();
        check_email();
        if (error_name == false && error_password == false && error_check_password == false && error_email == false && error_check == false) {
            return true;
        } else {
            return false;
        }
    });
});

前端自动化

Node.js

Node.js可以理解为是一门后端脚本语言，使用了和JavaScript相同的语法，会使用JavaScript的程序员能很快上手node.js、nodjs在处理高并发方面性能卓越，目前许多公司都在使用nodejs作为后端数据服务和前端开发的中间层。

node.js的中文网站：https://nodejs.org/zh-cn/

前端自动化

前端开发的流程越来越复杂，其中有代码的合并和压缩、图片的压缩；对less、sass的预处理；文件操作等，这些工作是重复乏味的，为了优化开发流程，提高工作效率，前端自动化工具就出现了，自动化工具可以通过配置，自动完成这些工作。

grunt、gulp

grunt和gulp是使用node.js编写的，前端首选的自动化工具，gulp在书写配置上比grunt更简洁，运行的性能更高，gulp逐渐成为主流。

gulp的使用

gulp使用步骤：安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 gulp网站：http://gulpjs.com/

常用gulp插件：
压缩js代码（gulp-uglify）
less的编译（gulp-less）
css的压缩（gulp-minify-css）
自动添加css3前缀（gulp-autoprefixer）
文件改名字 (gulp-rename)

前端性能优化

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。

前端性能优化分为如下几个方面：

一、代码部署

1、代码的压缩与合并
2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。
3、使用内容分发网络 CDN
4、为文件设置Last-Modified、Expires和Etag
5、使用GZIP压缩传送
6、权衡DNS查找次数(使用不同域名会增加DNS查找)
7、避免不必要的重定向(加"/")

二、编码

html：
1、使用结构清晰，简单，语义化标签
2、避免空的src和href
3、不要在HTML中缩放图片

css：
1、精简css选择器
2、把CSS放到顶部
3、避免@import方式引入样式
4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html
5、使用css动画来取代javascript动画
6、使用字体图标
7、使用css sprite(雪碧图)
8、使用svg图形
9、避免使用CSS表达式

body{
    background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}

10、避免使用css滤镜

javascript：
1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入(但其实一般是全部放在顶部，然后独立出去从外部引用)
4、避免全局查找
5、使用原生方法
6、用switch语句代替复杂的if else语句
7、减少语句数，比如说多个变量声明可以写成一句
8、使用字面量表达式来初始化数组或者对象
9、使用innerHTML取代复杂的元素注入
10、使用事件代理(事件委托)
11、避免多次访问dom选择集
12、高频触发事件设置使用函数节流
13、使用Web Storage缓存数据

base64图片使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width:200px;
            height:200px;
            background:url("data:image/gif;base64,R0lGODlhIAAgAPcAAP//////zP//mf//Zv//M///AP/M///MzP/Mmf/MZv/MM//MAP+Z//+ZzP+Zmf+ZZv+ZM/+ZAP9m//9mzP9mmf9mZv9mM/9mAP8z//8zzP8zmf8zZv8zM/8zAP8A//8AzP8Amf8AZv8AM/8AAMz//8z/zMz/mcz/Zsz/M8z/AMzM/8zMzMzMmczMZszMM8zMAMyZ/8yZzMyZmcyZZsyZM8yZAMxm/8xmzMxmmcxmZsxmM8xmAMwz/8wzzMwzmcwzZswzM8wzAMwA/8wAzMwAmcwAZswAM8wAAJn//5n/zJn/mZn/Zpn/M5n/AJnM/5nMzJnMmZnMZpnMM5nMAJmZ/5mZzJmZmZmZZpmZM5mZAJlm/5lmzJlmmZlmZplmM5lmAJkz/5kzzJkzmZkzZpkzM5kzAJkA/5kAzJkAmZkAZpkAM5kAAGb//2b/zGb/mWb/Zmb/M2b/AGbM/2bMzGbMmWbMZmbMM2bMAGaZ/2aZzGaZmWaZZmaZM2aZAGZm/2ZmzGZmmWZmZmZmM2ZmAGYz/2YzzGYzmWYzZmYzM2YzAGYA/2YAzGYAmWYAZmYAM2YAADP//zP/zDP/mTP/ZjP/MzP/ADPM/zPMzDPMmTPMZjPMMzPMADOZ/zOZzDOZmTOZZjOZMzOZADNm/zNmzDNmmTNmZjNmMzNmADMz/zMzzDMzmTMzZjMzMzMzADMA/zMAzDMAmTMAZjMAMzMAAAD//wD/zAD/mQD/ZgD/MwD/AADM/wDMzADMmQDMZgDMMwDMAACZ/wCZzACZmQCZZgCZMwCZAABm/wBmzABmmQBmZgBmMwBmAAAz/wAzzAAzmQAzZgAzMwAzAAAA/wAAzAAAmQAAZgAAM+4AAN0AALsAAKoAAIgAAHcAAFUAAEQAACIAABEAAADuAADdAAC7AACqAACIAAB3AABVAABEAAAiAAARAAAA7gAA3QAAuwAAqgAAiAAAdwAAVQAARAAAIgAAEe7u7t3d3bu7u6qqqoiIiHd3d1VVVURERCIiIhEREQAAACH5BAEAAAUALAAAAAAgACAAAAiGAAsIHEiwoMGDCBMqXMiwocOHECNK7DOlz0CKFiUKpDil45QCHjtmfMgxpMWSHkcuDMkSJEuPDFG+nClSIU2PAG52TChT50uVBH0K3Wmw51CTB4/6PIhRqcmKC43SBBrTJ1WSM69GnKmRacquCGGC9ap17MexCMuaRZuWbVK3ReHKnUtXYEAAOw==");
        }
 
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>