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

正则表达式

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>Documenttitle>
    <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>
正则表达式使用示例

 

注册表单验证实例

register.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 Reservedp>
    <p>电话:010-****888 京ICP备*******8号p>
div>

body>
html>
register.html

register.js

$(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;
        }
    });
});
register.js

 

 

前端自动化

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>Documenttitle>
    <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>
base64图片使用示例

 

注意,base64图片仅适用于小图片,大图片就别用它了;

 

转载于:https://www.cnblogs.com/yifchan/p/html-1-14.html

你可能感兴趣的:(前端,javascript,后端,ViewUI)