正则表达式
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.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; } }); });
前端自动化
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图片仅适用于小图片，大图片就别用它了；