python前端之移動端庫、框架及自動化和優化

時間  2019-11-13
標籤 python 前端 移動 框架 自動化 優化 欄目 Python 简体版
原文   原文鏈接

目的：學習移動端場景下的js事件；製做移動端特效經常使用的js庫；介紹移動端經常使用開發框架Bootstrap；介紹動態樣式語言less、sass、stylus的基本使用。javascript

移動端js事件

移動端的操做方式和PC端是不一樣的，移動端主要用手指操做，因此有特殊的touch事件，touch事件包括以下幾個事件：css

一、touchstart: //手指放到屏幕上時觸發
二、touchmove: //手指在屏幕上滑動式觸發
三、touchend: //手指離開屏幕時觸發
四、touchcancel: //系統取消touch事件的時候觸發，比較少用html

移動端通常有三種操做，點擊、滑動、拖動，這三種操做通常是組合使用上面的幾個事件來完成的，全部上面的4個事件通常不多單獨使用，通常是封裝使用來實現這三種操做，可使用封裝成熟的js庫。前端

zeptojs

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有着相似的api。 若是你會用jquery，那麼你也會用zepto。Zepto的一些可選功能是專門針對移動端瀏覽器的；它的最初目標是在移動端提供一個精簡的相似jquery的js庫。java

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/node

touch模塊封裝了針對移動端經常使用的事件，可以使用此模塊進行移動端特定效果開發，這些事件有：jquery

  • 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放棄支持低版本瀏覽器，適合應用在移動端。css3

2.x版本中文網址：http://2.swiper.com.cn/
3.x版本中文網地址：http://www.swiper.com.cn/git

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使用參數：

一、initialSlide：初始索引值，從0開始
二、direction：滑動方向 horizontal | vertical
三、speed：滑動速度，單位ms
四、autoplay：設置自動播放及播放時間
五、autoplayDisableOnInteraction：用戶操做swipe後是否還自動播放，默認是true，再也不自動播放
六、pagination：分頁圓點
七、paginationClickable：分頁圓點是否點擊
八、prevButton：上一頁箭頭
九、nextButton：下一頁箭頭
十、loop：是否首尾銜接
十一、onSlideChangeEnd：回調函數，滑動結束時執行程序員

swiper製做實例：

一、swiper製做移動端焦點圖實例
二、swiper製做整頁滾動效果

bootstrap

簡單、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。 來自Twitter，是目前很受歡迎的前端框架之一。 Bootrstrap是基於HTML、CSS、JavaScript的，讓書寫代碼更容易。 移動優先，響應式佈局開發。

bootstrap中文網址：http://www.bootcss.com/

bootstrap 容器

  • container-fluid 流體
  • container

     

    • 1170
    • 970
    • 750
    • 100%

bootstrap 柵格系統

bootstrap將頁面橫向分爲12等分，按照12等分定義了適應不一樣寬度等分的樣式類，這些樣式類組成了一套響應式、移動設備優先的流式柵格系統：

一、col-lg-
二、col-md-
三、col-sm-
四、col-xs-

bootstrap響應式查詢區間：

一、大於等於768
二、大於等於992
三、大於等於1200

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 按鈕

一、btn 聲明按鈕
二、btn-default 默認按鈕樣式
三、btn-primay
四、btn-success
五、btn-info
六、btn-warning
七、btn-danger
八、btn-link
九、btn-lg
十、btn-md
十一、btn-xs
十二、btn-block 寬度是父級寬100%的按鈕
1三、active
1四、disabled
1五、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 圖片

img-responsive 聲明響應式圖片

bootstrap 隱藏類

一、hidden-xs
二、hidden-sm
三、hidden-md
四、hidden-lg

bootstrap 字體圖標

經過字體代替圖標，font文件夾須要和css文件夾在同一目錄

bootstrap 下拉菜單

一、dropdown-toggle
二、dropdown-menu

bootstrap 選項卡

一、nav
二、nav-tabs
三、nav-pills
四、tab-content

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 定義導航條中的表單
1三、navbar-btn 定義導航條中的按鈕
1四、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 下拉菜單

一、dropdown-toggle
二、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 隱藏類

一、hidden-xs
二、hidden-sm
三、hidden-md
四、hidden-lg

bootstrap 響應式專題網站實例

 

課程介紹

一、動態樣式語言less、sass、stylus的基本使用；二、前端自動化工具的狀況及基本使用；三、前端性能優化的多個注意點。

less、sass、stylus

它們是三種相似的樣式動態語言，屬於css預處理語言，它們有相似css的語法，爲css賦予了動態語言的特性、如變量、繼承、運算、函數等。這麼作是爲了css的編寫和維護。

它們使用的文件分別是：.less、.scss、*.styl,這些文件是不能再網頁上直接使用的，最終要編譯成css文件來使用，編譯的方法有軟件編譯，或者用nodejs程序。

less、sass編譯軟件：
http://koala-app.com/index-zh.html

less中文網址：http://lesscss.cn/

less語法：

一、註釋

// 不會被編譯的註釋
    /* 會被編譯的註釋 */

二、變量

@w:200px;
.box{
    width:@w;
    height:@w;
    background-color:red;
}

三、混合

.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;
}

四、匹配模式

.p(r){
    postion:relative;
}
.p(a){
    postion:absolute;
}
.p(f){
    postion:fixed;
}
.box{
    .p(f);
}

五、運算

@w:300px;
.box{
    width:@w+20;
}

四、嵌套

.list{    
    li{
        ...
    }
    a{
        ...
        &:hover{
            ...
        }
    }
    span{
        ...
    }
}

五、導入

// 導入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/

前端自動化

前端開發的流程愈來愈複雜，其中有代碼的合併和壓縮、圖片的壓縮；對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、代碼部署：

一、代碼的壓縮與合併
二、圖片、js、css等靜態資源使用和主站不一樣域名地址存儲，從而使得在傳輸資源時不會帶上沒必要要的cookie信息。
三、使用內容分發網絡 CDN
四、爲文件設置Last-Modified、Expires和Etag
五、使用GZIP壓縮傳送
六、權衡DNS查找次數(使用不一樣域名會增長DNS查找)
七、避免沒必要要的重定向(加"/")

2、編碼

html：

一、使用結構清晰，簡單，語義化標籤
二、避免空的src和href
三、不要在HTML中縮放圖片

css：

一、精簡css選擇器 二、把CSS放到頂部
三、避免@import方式引入樣式
四、css中使用base64圖片數據取代圖片文件，減小請求數，在線轉base64網站：http://tool.css-js.com/base64.html
五、使用css動畫來取代javascript動畫
六、使用字體圖標,圖標庫網站：http://fontawesome.io/icons/，在線製做網站：www.iconfont.cn
七、使用css sprite
八、使用svg圖形
九、避免使用CSS表達式

a {star : expression(onfocus=this.blur)}

十、避免使用濾鏡

javascript：

一、減小引用庫的個數 二、使用requirejs或seajs異步加載js 三、JS放到頁面底部引入 四、避免全局查找 五、減小屬性查找 六、使用原生方法 七、用switch語句代替複雜的if else語句 八、減小語句數，好比說多個變量聲明能夠寫成一句 九、使用字面量表達式來初始化數組或者對象 十、使用DocumentFragments或innerHTML取代複雜的元素注入 十一、使用事件代理(事件委託) 十二、避免屢次訪問dom選擇集 1三、高頻觸發事件設置使用函數節流，如：onmousemove、onmouseover 1四、使用Web Storage緩存數據 1五、使用Array的join方法來代替字符串的「+」鏈接(先將要鏈接的字符串放進數組)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程