本文主要是介绍移动端js事件、zeptojs、swiper、bootstrap、正则表达式、前端性能优化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
移动端场景下的js事件，制作移动端特效常用的js库，介绍移动端常用开发框架Bootstrap
一、移动端js事件
移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：
1、touchstart: //手指放到屏幕上时触发
2、touchmove: //手指在屏幕上滑动式触发
3、touchend: //手指离开屏幕时触发
4、touchcancel: //系统取消touch事件的时候触发，比较少用
移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库
二、zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库
zepto官网：Zepto.js: the aerogel-weight jQuery-compatible JavaScript library
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含很多模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，如果还需要其他的模块，可以自定义构建。
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/
三、swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端
2.x版本中文网址：Swiper2|Swiper中文网
3.x版本中文网地址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
swiper使用方法：
<script type="text/javascript" src="js/swiper.min.js"></script><!--如果页面引用了jquery或者zepto，就引用 swiper.jquery.min.js,它的容量比swiper.min.js<script src="path/to/swiper.jquery.min.js"></script>
-->......
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">slider1</div><div class="swiper-slide">slider2</div><div class="swiper-slide">slider3</div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div><script>
var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',prevButton: '.swiper-button-prev',nextButton: '.swiper-button-next',initialSlide :1,paginationClickable: true,loop: true,autoplay:3000,autoplayDisableOnInteraction:false
});
</script>
swiper使用参数：
- initialSlide：初始索引值，从0开始
- direction：滑动方向 horizontal | vertical
- speed：滑动速度，单位ms
- autoplay：设置自动播放及播放时间
- autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
- pagination：分页圆点
- paginationClickable：分页圆点是否点击
- prevButton：上一页箭头
- nextButton：下一页箭头
- loop：是否首尾衔接
四、bootstrap
简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发。
bootstrap中文网址：Bootstrap中文网
bootstrap 容器
- container-fluid 流体
- container：1170、970、750、100%
<div class="container-fluid">流体容器</div>
<div class="container">响应式固定容器</div>
bootstrap响应式查询区间：
- 大于等于768
- 大于等于992
- 大于等于1200
bootstrap 栅格系统：bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
- col-lg- 大于1200排成一行，小于1200分别占一行
- col-md- 大于992排成一行，小于992分别占一行
- col-sm- 大于768排成一行，小于768分别占一行
- col-xs- 始终排列成一行
<style type="text/css">div[class*='col-']{background-color:cyan;border:1px solid #ddd;height:50px;}
</style>......
<div class="container"><div class="row"><div class="col-lg-3">col-lg-3</div><div class="col-lg-3">col-lg-3</div><div class="col-lg-5">col-lg-5</div><div class="col-lg-1">col-lg-1</div></div><br><br><div class="row"><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div></div><br><br><div class="row"><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div></div><br><br><div class="row"><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div></div>
</div>
列偏移
- col-lg-offset-
- col-md-offset-
- col-sm-offset-
- col-xs-offset-
bootstrap 按钮：btn 声明按钮，btn-default 默认按钮样式，btn-primay、btn-success、btn-info、btn-warning、btn-danger、btn-link、btn-lg、btn-md、btn-xs、btn-block 宽度是父级宽100%的按钮、active、disabled、btn-group 定义按钮组
<!-- 一般按钮组 -->
<div class="btn-group"><input type="button" name="" value="按钮一" class="btn btn-primary"><input type="button" name="" value="按钮二" class="btn btn-warning"><input type="button" name="" value="按钮三" class="btn btn-danger">
</div><!-- 通栏按钮组 如果用input标签做按钮，需要将它用 btn-group的容器包起来 -->
<div class="btn-group btn-group-justified"><div class="btn-group"><input type="button" name="" value="按钮一" class="btn btn-primary"></div><div class="btn-group"><input type="button" name="" value="按钮二" class="btn btn-warning"></div><div class="btn-group"><input type="button" name="" value="按钮三" class="btn btn-danger"></div>
</div><!-- 通栏按钮组，如果用a标签做按钮，就不用上面的结构，直接写 -->
<div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">按钮一</a><a href="#" class="btn btn-default">按钮二</a><a href="#" class="btn btn-default">按钮三</a>
</div>
bootstrap 表单
- form 声明一个表单域
- form-inline 内联表单域
- form-horizontal 水平排列表单域
- form-group 表单组、包括表单文字和表单控件
- form-control 文本输入框、下拉列表控件样式
- checkbox checkbox-inline 多选框样式
- radio radio-inline 单选框样式
- input-group 表单控件组
- input-group-addon 表单控件组物件样式
- input-group-btn 表单控件组物件为按钮的样式
- form-group-lg 大尺寸表单
- form-group-sm 小尺寸表单
<!-- 表单 -->
<form role="form"><div class="form-group form-group-lg"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button>
</form><!-- 表单控件组 -->
<div class="input-group"><input type="text" class="form-control"><span class="input-group-addon">@</span>
</div><!-- 表单控件组 -->
<div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>
</div>
bootstrap 图片：img-responsive 声明响应式图片
bootstrap 字体图标：通过字体代替图标，font文件夹需要和css文件夹在同一目录
bootstrap 导航条
- navbar 声明导航条
- navbar-default 声明默认的导航条样式
- navbar-inverse 声明反白的导航条样式
- navbar-static-top 去掉导航条的圆角
- navbar-fixed-top 固定到顶部的导航条
- navbar-fixed-bottom 固定到底部的导航条
- navbar-header 申明logo的容器
- navbar-brand 针对logo等固定内容的样式
- nav navbar-nav 定义导航条中的菜单
- navbar-form 定义导航条中的表单
- navbar-btn 定义导航条中的按钮
- navbar-text 定义导航条中的文本
- navbar-left 菜单靠左
- navbar-right 菜单靠右
<!-- 可伸缩菜单 data-target="#.." 需要加# -->
<div class="navbar navbar-inverse navbar-static-top "><div class="container"><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">LOGO</a></div><div class="collapse navbar-collapse" id="mymenu"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#">公司新闻</a></li><li><a href="#">行业动态</a></li></ul><form class="navbar-form navbar-right"><div class="form-group"><div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span></div> </div></form></div></div>
</div>
路径导航
<ol class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Library</a></li><li class="active">Data</li>
</ol>
巨幕
<div class="jumbotron"><div class="container">...</div>
</div>
bootstrap 模态框
- modal 声明一个模态框
- modal-dialog 定义模态框尺寸
- modal-lg 定义大尺寸模态框
- modal-sm 定义小尺寸模态框
- modal-header
- modal-body
- modal-footer
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大弹出框按钮</button><div class="modal fade" id="mymodal"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header">大尺寸弹出框</div><div class="modal-body">模态框主体</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>
</div>
bootstrap 下拉菜单
1、dropdown-toggle
2、dropdown-menu
<div class="row"> <div class="dropdown"><div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></div><ul class="dropdown-menu"><li><a href="#">菜单一</a></li><li><a href="#">菜单二</a></li><li><a href="#">菜单三</a></li></ul></div>
</div>
bootstrap 隐藏类
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg
五、正则表达式
正则表达式：能让计算机读懂的字符串匹配规则
正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
规则中的字符
- 普通字符匹配：如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
- 转义字符匹配：
- \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
量词：对左边的匹配字符定义个数
- ? 出现零次或一次（最多出现一次）
- + 出现一次或多次（至少出现一次）
- * 出现零次或多次（任意次）
- {n} 出现n次
- {n,m} 出现n到m次
- {n,} 至少出现n次
任意一个或者范围
- [abc123] : 匹配‘abc123’中的任意一个字符
- [a-z0-9] : 匹配a到z或者0到9中的任意一个字符
限制开头结尾
- ^ 以紧挨的元素开头
- $ 以紧挨的元素结尾
修饰参数：
- g：global，全文搜索，默认搜索到第一个结果接停止
- i：ingore case，忽略大小写，默认大小写敏感
常用函数
- test用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
- 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}$/;六、前端性能优化
从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要
前端性能优化分为如下几个方面：
代码部署：
- 代码的压缩与合并
- 图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。
- 使用内容分发网络 CDN
- 为文件设置Last-Modified、Expires和Etag
- 使用GZIP压缩传送
- 权衡DNS查找次数(使用不同域名会增加DNS查找)
- 避免不必要的重定向(加"/")
编码
- html：
- 使用结构清晰，简单，语义化标签
- 避免空的src和href
- 不要在HTML中缩放图片
- css：
- 精简css选择器
- 把CSS放到顶部
- 避免@import方式引入样式
- css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：图片在线转换Base64,图片编码base64
- 使用css动画来取代javascript动画
- 使用字体图标
- 使用css sprite(雪碧图)
- 使用svg图形
- 避免使用CSS表达式
- 避免使用css滤镜
body{background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}
javascript：
- 减少引用库的个数
- 使用requirejs或seajs异步加载js
- JS放到页面底部引入
- 避免全局查找
- 使用原生方法
- 用switch语句代替复杂的if else语句
- 减少语句数，比如说多个变量声明可以写成一句
- 使用字面量表达式来初始化数组或者对象
- 使用innerHTML取代复杂的元素注入
- 使用事件代理(事件委托)
- 避免多次访问dom选择集
- 高频触发事件设置使用函数节流
- 使用Web Storage缓存数据
学习导航：http://www.xqnav.top
这篇关于移动端js事件、zeptojs、swiper、bootstrap、正则表达式、前端性能优化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
