移动端python开发_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/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含很多模塊，默認下載版本包含的模塊有Core, Ajax, Event, Form, IE模塊，如果還需要其他的模塊，可以自定義構建。
zepto自定義構建地址：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放棄支持低版本瀏覽器，適合應用在移動端。
swiper使用方法：
......
......
slider1slider2slider3var 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
});
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 容器
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 小尺寸表單
Email address
Password
File input
Example block-level help text here.
Check me out
Submit
@
Go!
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 定義按鈕組
按鈕一
按鈕二
按鈕三
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 菜單靠右
LOGO
Go!
路徑導航
巨幕
...
bootstrap 模態框
1、modal 聲明一個模態框
2、modal-dialog 定義模態框尺寸
3、modal-lg 定義大尺寸模態框
4、modal-sm 定義小尺寸模態框
5、modal-header
6、modal-body
7、modal-footer
大彈出框按鈕
大尺寸彈出框
模態框主體
Close
Save changes
bootstrap 下拉菜單
1、dropdown-toggle
2、dropdown-menu
下拉菜單
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語法：
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作為后端數據服務和前端開發的中間層。
前端自動化
前端開發的流程越來越復雜，其中有代碼的合并和壓縮、圖片的壓縮；對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、使用字體圖標,圖標庫網站：http://fontawesome.io/icons/，在線制作網站：www.iconfont.cn
7、使用css sprite
8、使用svg圖形
9、避免使用CSS表達式
a {star : expression(οnfοcus=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方法來代替字符串的“+”連接(先將要連接的字符串放進數組)
總結
以上是生活随笔為你收集整理的移动端python开发_python前端之移动端库、框架及自动化和优化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python简单的爬虫教程中召唤小海龟_
- 下一篇： vector 对某个下标排序_Pytho