python前端之移动端库、框架及自动化和优化 - 好文

目的：学习移动端场景下的js事件；制作移动端特效常用的js库；介绍移动端常用开发框架Bootstrap；介绍动态样式语言less、sass、stylus的基本使用。

移动端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官网：http://zeptojs.com/ <http://zeptojs.com/>
zepto中文api：http://www.css88.com/doc/zeptojs_api/
<http://www.css88.com/doc/zeptojs_api/>
zepto包含很多模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，如果还需要其他的模块，可以自定义构建。
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/
<http://github.e-sites.nl/zeptobuilder/>

touch模块封装了针对移动端常用的事件，可使用此模块进行移动端特定效果开发，这些事件有：

* tap 元素tap的时候触发，此事件类似click，但是比click快。
* longTap 当一个元素被按住超过750ms触发。
* swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过时触发。(可选择给定的方向)

swiper

swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。
swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。

2.x版本中文网址：http://2.swiper.com.cn/ <http://2.swiper.com.cn/>
3.x版本中文网地址：http://www.swiper.com.cn/ <http://www.swiper.com.cn/>

swiper使用方法：
<script type="text/javascript" src="js/swiper.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使用参数：

1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
11、onSlideChangeEnd：回调函数，滑动结束时执行

swiper制作实例：

1、swiper制作移动端焦点图实例
2、swiper制作整页滚动效果

bootstrap

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。来自Twitter，是目前很受欢迎的前端框架之一。
Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。移动优先，响应式布局开发。

bootstrap中文网址：http://www.bootcss.com/ <http://www.bootcss.com/>

bootstrap 容器

* container-fluid 流体
* container

* 1170
* 970
* 750
* 100%
bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

1、col-lg-
2、col-md-
3、col-sm-
4、col-xs-

bootstrap响应式查询区间：

1、大于等于768
2、大于等于992
3、大于等于1200

bootstrap 表单

1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
10、form-group-lg 大尺寸表单
11、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 按钮

1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、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>  <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>  <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 图片

img-responsive 声明响应式图片

bootstrap 隐藏类

1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg

bootstrap 字体图标

通过字体代替图标，font文件夹需要和css文件夹在同一目录

bootstrap 下拉菜单

1、dropdown-toggle
2、dropdown-menu

bootstrap 选项卡

1、nav
2、nav-tabs
3、nav-pills
4、tab-content

bootstrap 导航条

1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
9、navbar-left 菜单靠左
10、navbar-right 菜单靠右
 <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 模态框

1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、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

bootstrap 响应式专题网站实例

课程介绍

1、动态样式语言less、sass、stylus的基本使用；2、前端自动化工具的情况及基本使用；3、前端性能优化的多个注意点。

less、sass、stylus

它们是三种类似的样式动态语言，属于css预处理语言，它们有类似css的语法，为css赋予了动态语言的特性、如变量、继承、运算、函数等。这么做是为了css的编写和维护。

它们使用的文件分别是：.less、
.scss、*.styl,这些文件是不能再网页上直接使用的，最终要编译成css文件来使用，编译的方法有软件编译，或者用nodejs程序。

less、sass编译软件：
http://koala-app.com/index-zh.html <http://koala-app.com/index-zh.html>

less中文网址：http://lesscss.cn/ <http://lesscss.cn/>

less语法：

1、注释
// 不会被编译的注释 /* 会被编译的注释 */
2、变量
@w:200px; .box{ width:@w; height:@w; background-color:red; }
3、混合
.border{ border:1px solid #ddd; } .box(@w:100px,@h:50px,@bw:1px){ width:@w;
height:@h; border:@bw solid #ddd; } .box{ .border; background-color:red; }
4、匹配模式
.p(r){ postion:relative; } .p(a){ postion:absolute; } .p(f){ postion:fixed; }
.box{ .p(f); }
5、运算
@w:300px; .box{ width:@w+20; }
4、嵌套
.list{ li{ ... } a{ ... &:hover{ ... } } span{ ... } }
5、导入
// 导入common.less,导入a.css文件 @import "common"; @import (less) "a.css";

前端自动化

Node.js

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

node.js的中文网站：https://nodejs.org/zh-cn/ <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/ <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
<http://tool.css-js.com/base64.html>
5、使用css动画来取代javascript动画
6、使用字体图标,图标库网站：http://fontawesome.io/icons/，在线制作网站：www.iconfont.cn
<http://fontawesome.io/icons/%EF%BC%8C%E5%9C%A8%E7%BA%BF%E5%88%B6%E4%BD%9C%E7%BD%91%E7%AB%99%EF%BC%9Awww.iconfont.cn>
7、使用css sprite
8、使用svg图形
9、避免使用CSS表达式
a {star : expression(onfocus=this.blur)}
10、避免使用滤镜

javascript：

1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入
4、避免全局查找
5、减少属性查找
6、使用原生方法
7、用switch语句代替复杂的if else语句
8、减少语句数，比如说多个变量声明可以写成一句
9、使用字面量表达式来初始化数组或者对象
10、使用DocumentFragments或innerHTML取代复杂的元素注入
11、使用事件代理(事件委托)
12、避免多次访问dom选择集
13、高频触发事件设置使用函数节流，如：onmousemove、onmouseover
14、使用Web Storage缓存数据
15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)

热门工具换一换