### template engine
1.ES6 template string
ES6: ${JS code}
// In ES6 there are two processes:
Var htmlStr= '<p>The ${1 + 2}</p>`; //2. Manually place the template in the specified element $(".box").html(htmlStr);Copy the code2. The EJS templates
/ / EJS four steps
//1. Define a container in an HTML structure such as <div id="box"></div> //2."A",b:"B",c:'C'},{a:"aa",b:"bb",c:'cc'},{a:"aaa",b:"bbb",c:'ccc'}]; //4. Use ejs.render to create HTML structure, template data, Var boxHTML=$() {//ejs.render({ejs. data: real data)})"#boxTemplate").html();
//4-2 ejs.render()
var result=ejs.render(boxHTML,{boxData:data});
console.log(result);
$("#box").html(result);Copy the code>
3. Make templates –>
Add the script tagtype="text/template"HTML template with id="boxTemplate"BoxData is the name of the data you define for yourself. It is the template data and we also need to associate it with the data generated by AJAXtype="text/template" id="boxTemplate">
<ul>
<%$.each(boxData,function(index,item){%> <! Li - processing - > < li > < span > < % = item. The a % > < / span > < span > < % = item. The b % > < / span > < span > < % = item. The c % > < / span > < / li > < %}) % > < / ul > < / script >Copy the codeviewporet
Mobile adaptation
Preparation 1:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> width=device-width: the width is equal to the width of the current device initial-scale=1: the initial scale minimum-scale=1: the minimum scale allowed by the user (default is 1) maximum-scale=1: User-scalable =no: Whether to allow users to scale (default: 1)Copy the codePreparation 2: Add some compatible files
In IE9 below is not support h5, also does not support CSS3 @media, so we need to load some JS files to ensure our effect compatibility issues
Prep 3 (optional plus) : Set the browser’s render mode to be the highest
Now many computer Internet explorer browser mode is Internet explorer 9, IE 10, IE11, are high version browse mode, but some Internet explorer 9 document model is IE8, the browser is according to the document model to render, so will appear incompatible problems, then we will open a console manually revise the document model, but a lot of people can’t console, For those people we can force IE to render as high as possible and keep our document modes up to date
There is a
If you have this Frame installed on your computer, whatever version of Internet Explorer you are using will use the WebKit kernel and V8 engine for layout calculations. If not, it will load the same as the last one without Chrome =1
Note about the IE version condition statement
1, only IE can recognize <! - [if IE]>
<link type="text/css" rel="stylesheet" href="my.css"/ > <! [endif]--> Because only VERSIONS of Internet Explorer 5 and above started to support IE conditional annotations, all "Internet Explorer only" means "Internet Explorer 5 and above" can be recognized. 2. Only certain versions recognize <! - [if IE 8]>
<link type="text/css" rel="stylesheet" href="my.css"/ > <! [endif]--> Identify a particular VERSION of IE, either higher or lower. The above example can be recognized only by Internet Explorer 8. 3. Only non-specific versions can recognize <! - [if! IE 7]> <linktype="text/css" rel="stylesheet" href="my.css"/ > <! [endif]--> In the example above, the specific VERSION of IE7 is not recognized, but other versions are recognized, of course, above IE5. 4. <! - [if gt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css"/ > <! [endif]--> In the preceding example, only the version later than IE7 can be identified. Internet Explorer 7 cannot recognize it. 5. <! - [if gte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css"/ > <! [endif]--> In the example above, both IE7 and higher versions are recognized. 6, only below a certain version can recognize <! - [if lt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css"/ > <! [endif]--> In the preceding example, only the version earlier than Internet Explorer 7 can be identified. 7. <! - [if lte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css"/ > <! [endif]--> In the example above, IE7 and lower versions are recognized. The above code may seem hard to remember, but it's easy to remember with a little explanation of the keywords. Lt: It's short for Less than. Lte: Short for Less than or equal to, which means Less than or equal to. Gt: Greater than is short for Greater than. Gte: Greater than or equal to. ! Not equal: is not equal to the same as javascript is not equal to the judge. Special note: 1, someone will try to use <! - [if! IE]> to define conditions in non-IE browsers, but note that conditional comments can only be executed in IE browsers. This code is ignored as a comment in non-IE browsers. 2, we usually use IE conditional comment to load different CSS according to the browser, so as to solve the style compatibility problem. It can do a lot more. It can protect any code block -- HTML code block, JavaScript code block, server-side code... Look at the code below. <! - [if IE]>
<script type="text/javascript">
alert("You're using Internet Explorer!"); </script> <! [endif]-->Copy the codeResponsive layout
1. Percentage +@media
Device-width: device screen width device-height: device screen high orientation: check whether the screen is in landscape or vertical aspect-ratio: Device-aspect-ratio: detects the ratio of the screen width to the height of the device (min-color:32 to check whether the color is 32 bits) color-index: The color values in the color index table of the detection device are all positive. Whether the output device is grid or bitmap device resolution: the resolution of the monitor screen or printer min-resolution: 300dpi max-resolution: 118dpcm
The previous layout was always a percentage layout: or streaming @media was used in conjunction with other methods
@media (max-width: 900px) and (min-width:500px ){ .box{ display:block; width: 100%; }}Copy the code2.DPR
The iphnoe3 has a 320 x 480 resolution and the iPhone4 has a 640 x 960 resolution. Both phones are actually 320px wide, which results in the same screen size. In this case, one CSS pixel is equal to two physical pixels. This is the pixel density ratio windod. devicePixelRatio to detect the pixel density ratioCopy the code@media only screen and (device-pixel-ratio:1) {/*device-pixel-ratio: 2 */}Copy the code3. REM layout
One CSS unit px is a fixed unit: we set the size 300px by 200px and render the same size, regardless of the device changes, and rem is a relative unit: relative to the font size of the current page root element (HTML)
REM responsive layout:
- First of all, we will write the style exactly as the size of the draft, but when we write the style, we will change all the PX to REM (assuming the draft is 640).
- When we put the page on the mobile phone of 320, the style we wrote before needs to be doubled as a whole, there is no need to change the style one by one at this time, we just need to double the size of the HTML font (the HTML font is reduced, and the previous value in REM will also be reduced).
- To facilitate conversion calculations, we usually set the HTML’s initial font size to 100 (10/12px for the browser’s minimum font size, but if we reduce it too small, the browser won’t recognize it).
var dW = 640; / / the design draft of var win wide = = document. The documentElement. ClientWidth | | document. Body. ClientWidth; document.documentElement.style.fontSize=win *100/dw+"px";Copy the codeMobile terminal framework mastery
bootstrap
zepto
http://www.wenshuai.cn/Manual/Zepto/swiper
iscroll
MUI…..
Handling of mobile events
Implement the click event cdn.code.baidu.com/
Everest Training: Mobile events
Mobile :click, load, scroll, blur, focus, change, input(instead of keyup keydown)...
TOUCH event model (handling one-finger operations), GESTURE Event model (handling multi-finger operations)
TOUCH: TouchStart, TouchMove, TouchEnd, touchCancle
GESTURE:gesturestart, gesturechange, gestureend
1. Click: on the mobile terminal, click is a click event, not a click event; In mobile projects, we often distinguish between what a click does and what a double click does, so mobile browsers recognize a click and do not execute it until they are sure it is a click.
There is a 300ms delay when using click on the mobile terminal: the browser needs to wait 300ms after the end of the first click to see whether the second click is triggered. If the second click is triggered, it does not belong to Click, but only if the second click is not triggered.
2, Click, click, double click, long press, slide, left, right, up, slide...
Click and Double-click (300MS)
Click and hold (750MS)
Click and slide (whether the X/Y offset is within 30PX or more than 30PX is slide)
Slide left/right and up/down (X-axis offset distance > Y-axis offset distance = slide left/right opposite is up/down)
Left slide and right slide (offset distance > 0 = right slide opposite is left slide)
3. Mobile event library
-> fastclick.js: handles the CLICK event delay of 300MS
- > TOUCH. JS: baidu cloud gesture event store https://github.com/Clouda-team/touch.code.baidu.com
->HAMMER.JSCopy the codeTouch simulates the click event
-> Use the TOUCH event model to implement click actions (click && double click) on(oBox,'touchstart'.function (ev) {
//->ev:TouchEvent =>type, target, the preventDefault (returnView (), stopPropagation(cancelBubble), changedTouches, ->changedTouches, [0] [' touches']; [' touches'] [' touches']; [' touches'] [' touches']; this['strX'] = point.clientX;
this['strY'] = point.clientY;
this['isMove'] = false;
});
on(oBox, 'touchmove'.function(ev) { var point = ev.touches[0]; var newX = point.clientX, newY = point.clientY; //-> To determine whether sliding occurs, we need to determine whether the offset value is within 30PXif (Math.abs(newX - this['strX']) > 30 || Math.abs(newY - this['strY']) > 30) {
this['isMove'] = true; }}); on(oBox,'touchend'.function (ev) {
if (this['isMove'= = =false) {/ / - > click this. Style. WebkitTransitionDuration ='1s';
this.style.webkitTransform = 'rotate(360deg)';
var delayTimer = window.setTimeout(function () {
this.style.webkitTransitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
}.bind(this), 1000);
} else{//-> slide this.style.background ='red'; }});Copy the codecase
PC case: REM + Bootstrap single page typesetting application
Mobile case QQ music player: REM + Zepto + audio playback + lyrics processing
H5 application interactive resume: REM layout +H5 audio processing +CSS3+animate. CSS +swiper+ Zepto
Rem layout +swiper+ Zepto +iscroll+less+EJS
Use of other frameworks: MUI case -> Hotel reservation app