objective : Learning mobile terminal js event ; Making mobile special effects commonly used js library ; Introduce the common development framework of mobile terminal Bootstrap; Introducing dynamic style language less,sass,stylus Basic use of .

Mobile terminal js event

Mobile terminal operation mode and PC The end is different , The mobile terminal is mainly operated by fingers , So there are special ones touch event ,touch Events include the following events :

1,touchstart: // Triggered when the finger is placed on the screen
2,touchmove: // Finger sliding trigger on screen
3,touchend: // Triggered when the finger leaves the screen
4,touchcancel: // System cancellation touch Event , Less use


There are three kinds of operation in mobile terminal , click , slide , drag , These three operations are usually performed in combination with the above events , All above 4 Events are rarely used alone , Generally, encapsulation is used to implement these three operations , You can use the js library .

zeptojs

Zepto Is a lightweight for modern advanced browsers JavaScript library , It is associated with jquery It's similar api.
If you can use it jquery, Then you can use it zepto.Zepto Some of the optional features of are specific to mobile browsers ; Its initial goal was to provide a streamlined analog on the mobile end jquery Of js library .

zepto Official website :http://zeptojs.com/ <http://zeptojs.com/>
zepto chinese api:http://www.css88.com/doc/zeptojs_api/
<http://www.css88.com/doc/zeptojs_api/>
zepto It contains many modules , The modules included in the default download version are Core, Ajax, Event, Form, IE modular , If you need other modules , You can customize the build .
zepto Custom build address :http://github.e-sites.nl/zeptobuilder/
<http://github.e-sites.nl/zeptobuilder/>

touch The module encapsulates common events for mobile terminals , This module can be used to develop specific effects of mobile terminal , These events are :

* tap element tap Trigger when , This event is similar click, But than click fast .
* longTap When an element is pressed over 750ms trigger .
* swipe, swipeLeft, swipeRight, swipeUp, swipeDown Triggered when an element is crossed .( The given direction can be selected )
 

swiper

swiper.js Is a mature and stable application PC Sliding effect plug-ins for mobile and mobile terminals , Generally used for touch screen focus map , Touch screen scrolling effect .
swiper Divided into 2.x Version and 3.x edition ,2.x Version supports lower version browsers (IE7),3.x Abandoning support for older browsers , Suitable for mobile applications .

2.x Version Chinese website :http://2.swiper.com.cn/ <http://2.swiper.com.cn/>
3.x Chinese version address :http://www.swiper.com.cn/ <http://www.swiper.com.cn/>

swiper usage method :
<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 Using parameters :

1,initialSlide: Initial index value , from 0 start
2,direction: Sliding direction horizontal | vertical
3,speed: Sliding speed , Company ms
4,autoplay: Set auto play and playback time
5,autoplayDisableOnInteraction: User actions swipe Whether it still plays automatically after , The default is true, No more auto play
6,pagination: Pagination dot
7,paginationClickable: Is the paging dot click
8,prevButton: Previous arrow
9,nextButton: Next page arrow
10,loop: Is it connected from the beginning to the end
11,onSlideChangeEnd: Callback function , Execute at end of slide

swiper Production examples :

1,swiper Example of making focus map of mobile terminal
2,swiper Make full page scrolling

bootstrap

simple , visual , Powerful front end development framework , Give Way web Faster development , simple . come from Twitter, It is one of the most popular front-end frameworks .
Bootrstrap Is based on HTML,CSS,JavaScript Of , Making it easier to write code . Mobile priority , Responsive layout development .

bootstrap Chinese website :http://www.bootcss.com/ <http://www.bootcss.com/>

bootstrap container

* container-fluid fluid
* container
 

* 1170
* 970
* 750
* 100%
bootstrap grid system

bootstrap Divide the page horizontally into 12 Bisection , according to 12 Bisection defines a style class that can be used for bisection of different widths , These style classes form a set of responses , Mobile device priority streaming grid system :

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







bootstrap Responsive query interval :

1, Greater than or equal to 768
2, Greater than or equal to 992
3, Greater than or equal to 1200





bootstrap form

1,form Declare a form field
2,form-inline Inline form fields
3,form-horizontal Horizontal list single field
4,form-group Form group , Includes form text and form controls
5,form-control Text input box , Drop down list control style
6,checkbox checkbox-inline Multiple marquee style
7,radio radio-inline Radio box style
8,input-group Form control group
9,input-group-addon Form control group object style 10,input-group-btn The form control group object is a button style
10,form-group-lg Large form
11,form-group-sm Small form
<!-- form --> <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> <!-- Form control group --> <div class="input-group">
<input type="text" class="form-control"> <span
class="input-group-addon">@</span> </div> <!-- Form control 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>


bootstrap Button

1,btn Declaration button
2,btn-default Default button style
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 Width is the parent width 100% Button for
13,active
14,disabled
15,btn-group Define button groups
<!-- General button group --> <div class="btn-group"> <input type="button" name=""
value=" Button one " class="btn btn-primary"> <input type="button" name="" value=" Button 2 "
class="btn btn-warning"> <input type="button" name="" value=" Button 3 " class="btn
btn-danger"> </div> <!-- General bar button group If you use input Label as button , It needs to be used btn-group Wrap it in a container --> <div
class="btn-group btn-group-justified"> <div class="btn-group"> <input
type="button" name="" value=" Button one " class="btn btn-primary"> </div> <div
class="btn-group"> <input type="button" name="" value=" Button 2 " class="btn
btn-warning"> </div> <div class="btn-group"> <input type="button" name=""
value=" Button 3 " class="btn btn-danger"> </div> </div> <!--
General bar button group , If you use a Label as button , You don't need the structure above , direct writing --> <div class="btn-group btn-group-justified"> <a
href="#" class="btn btn-primary"> Button one </a> <a href="#" class="btn
btn-default"> Button 2 </a> <a href="#" class="btn btn-default"> Button 3 </a> </div>




bootstrap picture

img-responsive Claim responsive picture



bootstrap Hidden class

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

bootstrap Font Icon

Replace icons with fonts ,font Folder needs and css The folder is in the same directory



bootstrap drop-down menu

1,dropdown-toggle
2,dropdown-menu

bootstrap tab

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

bootstrap Navigation bar

1,navbar Declaration navigation bar
2,navbar-default Declare the default navigation bar style
3,navbar-inverse Style of navigation bar for declaration of inverse
4,navbar-static-top Remove the rounded corners of the navigation bar
5,navbar-fixed-top Navigation bar fixed to top
6,navbar-fixed-bottom Fixed bottom navigation bar
7,navbar-header Statement logo Container for
8,navbar-brand in the light of logo Such as the style of fixed content
11,nav navbar-nav Define the menu in the navigation bar
12,navbar-form Define the form in the navigation bar
13,navbar-btn Define the buttons in the navigation bar
14,navbar-text Define the text in the navigation bar
9,navbar-left The menu is on the left
10,navbar-right The menu is on the right
<!-- Scalable menu data-target="#.." It needs to be added # --> <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="#"> home page </a></li> <li><a
href="#"> Company news </a></li> <li><a href="#"> Industry trends </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>
Path navigation
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a
href="#">Library</a></li> <li class="active">Data</li> </ol>
Giant screen
<div class="jumbotron"> <div class="container"> ... </div> </div>
bootstrap Modal box

1,modal Declare a modal box
2,modal-dialog Define modal box size
3,modal-lg Define large modal box
4,modal-sm Define small size modal box
5,modal-header
6,modal-body
7,modal-footer
<button class="btn btn-primary" data-toggle="modal"
data-target="#mymodal"> Big pop-up button </button> <div class="modal fade" id="mymodal">
<div class="modal-dialog modal-lg"> <div class="modal-content"> <div
class="modal-header"> Large pop up box </div> <div class="modal-body"> Modal box 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 drop-down menu

1,dropdown-toggle
2,dropdown-menu
<div class="row"> <div class="dropdown"> <div class="btn btn-primary
dropdown-toggle" data-toggle="dropdown"> drop-down menu <span class="caret"></span>
</div> <ul class="dropdown-menu"> <li><a href="#"> Menu one </a></li> <li><a
href="#"> Menu 2 </a></li> <li><a href="#"> Menu 3 </a></li> </ul> </div> </div>
bootstrap Hidden class

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

bootstrap Examples of responsive theme websites

 

Course introduction

1, Dynamic style language less,sass,stylus Basic use of ;2, The situation and basic use of front-end automation tools ;3, Several points for attention in front end performance optimization .

less,sass,stylus


They are three similar style dynamic languages , belong to css Preprocessing language , They are similar css The grammar of , by css It gives the characteristics of dynamic language , Such as variable , inherit , operation , Function, etc . This is for the sake of css Compilation and maintenance of .

The files they use are :.less,
.scss,*.styl, These documents can no longer be used directly on the web page , Finally, it needs to be compiled into css File , The method of compiling is software compiling , Or use nodejs program .

less,sass Compiling software :
http://koala-app.com/index-zh.html <http://koala-app.com/index-zh.html>

less Chinese website :http://lesscss.cn/ <http://lesscss.cn/>

less grammar :

1, notes
// Comments that will not be compiled /* Comments that will be compiled */
2, variable
@w:200px; .box{ width:@w; height:@w; background-color:red; }
3, blend
.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, Matching pattern
.p(r){ postion:relative; } .p(a){ postion:absolute; } .p(f){ postion:fixed; }
.box{ .p(f); }
5, operation
@w:300px; .box{ width:@w+20; }
4, nesting
.list{ li{ ... } a{ ... &:hover{ ... } } span{ ... } }
5, Import
// Import common.less, Import a.css file @import "common"; @import (less) "a.css";
 

Front end automation

Node.js


Node.js Can be understood as a back-end scripting language , And are used JavaScript The same grammar , Can use JavaScript Can get started very quickly node.js,nodjs Excellent performance in handling high concurrency , At present, many companies are using it nodejs As the middle layer of back-end data service and front-end development .

node.js Chinese website of :https://nodejs.org/zh-cn/ <https://nodejs.org/zh-cn/>

Front end automation


The process of front-end development is more and more complex , There are code merging and compression , Image compression ; Yes less,sass Pretreatment of ; File operation, etc , The work is repetitive and tedious , In order to optimize the development process , improve work efficiency , The front-end automation tools came into being , Automation tools can be configured through , Do it automatically .

grunt,gulp

grunt and gulp It's using node.js Written , Front end preferred automation tool ,gulp Compared with writing configuration grunt More concise , Higher performance in operation ,gulp Gradually becoming the mainstream .

gulp Use of

gulp How to use it : install nodejs -> Global installation gulp -> Project installation gulp as well as gulp plug-in unit -> to configure gulpfile.js -> Run task
gulp website :http://gulpjs.com/ <http://gulpjs.com/>

Commonly used gulp plug-in unit :
compress js code (gulp-uglify)
less Compilation of (gulp-less)
css Compression of (gulp-minify-css)
Auto add css3 prefix (gulp-autoprefixer)
File name change (gulp-rename)

Front end performance optimization


From the user access resources to the complete display of resources in front of users , Through technical means and optimization strategy , Shorten the processing time of each step, so as to improve the access and rendering speed of the whole resource . The performance of the website directly affects the number of users , All front end performance optimization is important .

Front end performance optimization is divided into the following aspects :

One , Code deployment :

1, Code compression and merging
2, picture ,js,css The use of static resources and master site different domain name address storage , So that the transmission of resources will not take unnecessary cookie information .
3, Using content distribution networks CDN
4, Set for file Last-Modified,Expires and Etag
5, use GZIP Compressed transmission
6, balance DNS Search times ( Using different domain names will increase DNS lookup )
7, Avoid unnecessary redirection ( plus "/")

Two , code

html:

1, The structure is clear , simple , Semantic tags
2, Avoid empty ones src and href
3, Don't be in HTML Zoom picture in

css:

1, Streamlining css selector 2, hold CSS Put it on the top
3, avoid @import Mode import style
4,css Use in base64 Picture data replaces picture file , Reduce the number of requests , Online transfer base64 website :http://tool.css-js.com/base64.html
<http://tool.css-js.com/base64.html>
5, use css Animation to replace javascript animation
6, Use font icons , Icon library site :http://fontawesome.io/icons/, Online production website :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, use css sprite
8, use svg graphical
9, Avoid use CSS expression
a {star : expression(onfocus=this.blur)}
10, Avoid Filters

javascript:

1, Reduce the number of reference libraries
2, use requirejs or seajs Asynchronous loading js
3,JS Bring in at the bottom of the page
4, Avoid global lookup
5, Reduce attribute lookup
6, Use Native Methods
7, use switch Statement instead of complex if else sentence
8, Reduce the number of statements , For example, multiple variable declarations can be written in one sentence
9, Use literal expressions to initialize arrays or objects
10, use DocumentFragments or innerHTML Replacing complex element injection
11, Using event broker ( Event delegation )
12, Avoid multiple visits dom Selection set
13, High frequency trigger event setting uses function throttling , as :onmousemove,onmouseover
14, use Web Storage Cache data
15, use Array Of join Method instead of a string “+” connect ( First put the string to be connected into the array )