首页 > 珠峰培训 > 开课通知

模板引擎

作者:日期:2017-11-24 14:04:01 点击:47

 1.ES6模板字符串

ES6中：${JS代码}

//ES6中需要两个过程 :

    //1.定义模板     var htmlStr=`<p>${1+2}</p>`;     //2.手动将模板放到指定元素中     $(".box").html(htmlStr);
 

2.EJS模板

//EJS 四步曲

    //1.在HTML结构中定义容器  例如：<div id="box"></div>     //2.通过AJAX动态获取data数据     data=[{a:"A",b:"B",c:'C'},{a:"aa",b:"bb",c:'cc'},{a:"aaa",b:"bbb",c:'ccc'}];     //3.造模板 搭建HTML结构构导入数据     //4.通过ejs.render 将html结构，模板数据，data数据渲染出来     //ejs.render(模板的html结构,{模板数据:真实数据(一般都是通过AJAX获取出来的数据)})     //4-1 获取HTML模板     var boxHTML=$("#boxTemplate").html(); 		//4-2 ejs.render() 		var result=ejs.render(boxHTML,{boxData:data}); 		console.log(result); 		$("#box").html(result);

>

3.造模板-->

    给script标签加上type="text/template"表示的是html模板       加个id="boxTemplate"是为了方便后面第四部获取这个html模板用的     boxData：是你自己定义的数据的名字 他是模板数据       我们还需要把他跟AJAX获取出来的数据相关联     <script type="text/template" id="boxTemplate">         <ul>             <%$.each(boxData,function(index,item){%>                 <!--处理li-->                 <li>                     <span><%=item.a%></span>                     <span><%=item.b%></span>                     <span><%=item.c%></span>                 </li>             <%})%>         </ul>     </script>
 

viewporet

 

移动端适配

 

准备工作1：

 
  1. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  2. width=device-width:宽度等于当前设备的宽度
  3. initial-scale=1：初始缩放比例
  4. minimum-scale=1：允许用户的缩放的最小比例(默认值是1)
  5. maximum-scale=1: 允许用户的缩放的最大比例(默认值是1)
  6. user-scalable=no：是否允许用户缩放（默认值是no，一般都是不希望用户去缩小放大界面）
 

准备工作2：加在一些兼容文件

在IE9以下是不支持h5，也不支持CSS3中@media，所以我们需要加载一些js文件来保证我们的效果的兼容问题 

 

 

准备工作3（选择性加上）：设置浏览器的渲染模式是最高的

现在很多人的电脑IE浏览器的浏览器模式是IE9，IE10，IE11，都是高版本浏览模式，但是有些IE9 文档模式却是IE8，浏览器是按照文档模式去渲染的，所以会出现不兼容问题，那么我们就手动打开控制台修改一下文档模式，但是很多人不会控制台，我们就考虑这一部分人，为了他们我们可以强制IE的渲染方式为最高，保证我们的文档模式是最新的 

还有个 

chrome=1 他是谷歌内嵌的一个浏览器框架（GCF：Goole Chrome Frame） 
如果电脑上装了这个框架，不管你用的什么版本的IE都会用webkit内核和V8引擎来排版运算，要是没装就和上一个没有chrome=1的那个一样加载

 

关于IE版本条件注意语句

 
  1. 1、只有IE才能识别
  2. <!--[if IE]>
  3. <link type="text/css" rel="stylesheet" href="my.css" />
  4. <![endif]-->
  5. 因为只有IE5以上的版本才开始支持IE条件注释，所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。
  6.  
  7. 2、只有特定版本才能识别
  8. <!--[if IE 8]>
  9. <link type="text/css" rel="stylesheet" href="my.css" />
  10. <![endif]-->
  11. 识别特定的IE版本，高了或者低了都不可以。上例只有IE8才能识别。
  12.  
  13. 3、只有不是特定版本的才能识别
  14. <!--[if !IE 7]>
  15. <link type="text/css" rel="stylesheet" href="my.css" />
  16. <![endif]-->
  17. 上例中特定IE7版本不能识别，其他版本都能识别，当然要在IE5以上。
  18.  
  19. 4、只有高于特定版本才能识别
  20. <!--[if gt IE 7]>
  21. <link type="text/css" rel="stylesheet" href="my.css" />
  22. <![endif]-->
  23. 上例中只有高于IE7的版本才能识别。IE7无法识别。
  24.  
  25. 5、等于或者高于特定版本才能识别
  26. <!--[if gte IE 7]>
  27. <link type="text/css" rel="stylesheet" href="my.css" />
  28. <![endif]-->
  29. 上例中IE7和更高的版本都能识别。
  30.  
  31. 6、只有低于特定版本的才能识别
  32. <!--[if lt IE 7]>
  33. <link type="text/css" rel="stylesheet" href="my.css" />
  34. <![endif]-->
  35. 上例中只有低于IE7的版本才能识别，IE7无法识别。
  36.  
  37. 7、等于或者低于特定版本的才能识别
  38. <!--[if lte IE 7]>
  39. <link type="text/css" rel="stylesheet" href="my.css" />
  40. <![endif]-->
  41. 上例中IE7和更低的版本可以识别。
  42.  
  43. 关键词解释
  44. 上面那些代码好像很难记的样子，其实只要稍微解释一下关键字就很容易记住了。
  45. lt ：就是Less than的简写，也就是小于的意思。
  46. lte ：就是Less than or equal to的简写，也就是小于或等于的意思。
  47. gt ：就是Greater than的简写，也就是大于的意思。
  48. gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
  49. !：就是不等于的意思，跟javascript里的不等于判断符相同。
  50.  
  51.  
  52. 特别提示：
  53. １、有人会试图使用<!--[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。
  54. ２、我们通常用IE条件注释根据浏览器不同载入不同css，从而解决样式兼容性问题的。其实它可以做的更多。它可以保护任何代码块——HTML代码块、JavaScript代码块、服务器端代码……看看下面的代码。
  55. <!--[if IE]>
  56. <script type="text/javascript">
  57.  alert("你使用的是IE浏览器！");
  58. </script>
  59. <![endif]-->
 

响应式布局

 

1.百分比+@media

width：浏览器的宽度 
height：浏览器的高度 
device-width:设备的屏幕宽 
device-height:设备的屏幕高 
orientation：检测屏幕是出于横向还是纵向 
aspect-ratio：检测浏览器可视宽度和高度的比例（9/16） 
device-aspect-ratio:检测设备屏幕宽度和高度的比例 
color：检测颜色位数（min-color:32检测颜色是不是32位的） 
color-index:检测设备颜色索引表中的颜色值都是正数 
grid：检测输出的设备是网格还是位图设备 
resolution:监测屏幕或者打印机的分辨率 
min-resolution：300dpi 
max-resolution：118dpcm

一般之前的布局都是百分比布局：或者流式布局 
@media都是配合其他的方式去用

 
  1. @media (max-width: 900px) and (min-width:500px ){
  2.                 .box{
  3.                     display:block;
  4.                     width: 100%;
  5.                 }
  6.             }
 

2.DPR

 
  1. iphnoe3分辨率是320*480，iPhone4分辨率是640*960
  2. 这两款手机实际上都是宽为320px，这就导致了屏幕大小没变。实际像素却多了一倍，
  3. 这时，一个css像素就等于两个物理像素，这就是像素密度比
  4. window.devicePixelRatio来检测素密度比
  5. 为什么设计师给你的设计稿一般都是640*960  750*1334
 
  1. @media only screen and (device-pixel-ratio:1 ) {
  2.         /*device-pixel-ratio:来检测素密度比*/
  3.     }
 

3.REM布局

一个CSS单位 
px是固定单位：我们设置300px*200px的尺寸，不管设备怎么变，都会按照原有尺寸大小渲染，不受其它的影响 
rem是相对单位：相对于当前页面根元素(html)的字体大小来设置的

REM响应式布局：

  • 首先我们严格按照设计稿的尺寸来写样式，只不过在写样式的时候，把所有的PX变为REM (假设设计稿是640的尺寸)
  • 当我们把页面放在320的手机上，之前写的样式需要整体缩小一倍，此时没必要一个个的样式进行更改，我们只需要把HTML的字体大小在原来的基础上缩小一倍即可（HTML字体缩小，之前以REM为单位的值也都会跟着缩小）
  • 为了方便转换计算，我们一般把HTML的初始字体大小设置为100（浏览器最小字体时10/12px，我们缩减太小后，浏览器识别不了）
 
  1. var dW = 640; //设计稿的宽
  2. var win==document.documentElement.clientWidth || document.body.clientWidth;
  3. document.documentElement.style.fontSize=win *100/dw+ "px";
 

移动端框架的掌握

bootstrap

zepto http://www.wenshuai.cn/Manual/Zepto/

swiper

iscroll

MUI.....

 

移动端事件的处理

实现单击事件 
http://cdn.code.baidu.com/

珠峰培训:移动端事件

 
  1.  
  2. 移动端:click(单击)、load、scroll、blur、focus、change、input(代替keyup keydown)...
  3.       TOUCH事件模型(处理单手指操作)、GESTURE事件模型(处理多手指操作)
  4.       TOUCH:touchstart、touchmove、touchend、touchcancle
  5.       GESTURE:gesturestart、gesturechange、gestureend
  6.  
  7. 1、click:在移动端click属于单击事件,不是点击事件；在移动端的项目中我么经常会区分单击做什么和双击做什么，所以移动端的浏览器在识别click的时候，只有确定是单击后才会把它执行；
  8.    在移动端使用click会存在300ms的延迟:浏览器在第一次点击结束后，还需要等到300ms看是否触发了第二次点击，如果触发了第二次点击就不属于click了，没有触发第二次点击才属于click；
  9.  
  10. 2、点击、单击、双击、长按、滑动、左滑、右滑、上滑、下滑...
  11.    单击和双击(300MS)
  12.    点击和长按(750MS)
  13.    点击和滑动(X/Y轴偏移的距离是否在30PX以内,超过30PX就是滑动)
  14.    左右滑动和上下滑动(X轴偏移的距离 > Y轴偏移的距离 = 左右滑 相反就是上下滑)
  15.    左滑和右滑(偏移的距离 > 0 = 右滑 相反就是左滑)
  16.  
  17. 3、移动端事件库
  18.   ->FastClick.js:解决CLICK事件300MS的延迟
  19.   ->TOUCH.JS:百度云手势事件库 https://github.com/Clouda-team/touch.code.baidu.com
  20.   ->HAMMER.JS

touch模拟单击事件

 
  1. ->使用TOUCH事件模型实现点击操作(单击&&双击)
  2.         on(oBox, 'touchstart', function (ev) {
  3.             //->ev:TouchEvent =>type、target、preventDefault(returnValue)、stopPropagation(cancelBubble)、changedTouches、touches
  4.             //->changedTouches和touches都是手指信息的集合(TouchList)，touches获取到值的必备条件只有手指还在屏幕上才可以获取，所以在touchend事件中如果想获取离开的瞬间坐标只能使用changedTouches获取
  5.             var point = ev.touches[0];
  6.             this['strX'] = point.clientX;
  7.             this['strY'] = point.clientY;
  8.             this['isMove'] = false;
  9.         });
  10.         on(oBox, 'touchmove', function (ev) {
  11.             var point = ev.touches[0];
  12.             var newX = point.clientX,
  13.                     newY = point.clientY;
  14.             //->判断是否发生滑动,我们需要判断偏移的值是否在30PX以内
  15.             if (Math.abs(newX - this['strX']) > 30 || Math.abs(newY - this['strY']) > 30) {
  16.                 this['isMove'] = true;
  17.             }
  18.         });
  19.         on(oBox, 'touchend', function (ev) {
  20.             if (this['isMove'] === false) {
  21.                 //->点击
  22.                 this.style.webkitTransitionDuration = '1s';
  23.                 this.style.webkitTransform = 'rotate(360deg)';
  24.  
  25.                 var delayTimer = window.setTimeout(function () {
  26.                     this.style.webkitTransitionDuration = '0s';
  27.                     this.style.webkitTransform = 'rotate(0deg)';
  28.                 }.bind(this), 1000);
  29.             } else {
  30.                 //->滑动
  31.                 this.style.background = 'red';
  32.             }
  33.         });
 

案例

PC端案例：rem+bootstrap单页排版的应用

移动端案例QQ音乐播放器：rem+zepto+音频播放+歌词处理

H5场景应用交互简历：rem布局+H5音频处理+CSS3+animate.css+swiper+zepto

新浪新闻首页：rem布局+swiper+zepto+iscroll+less+EJS

其他框架的使用：MUI案例->酒店的预定app

上一篇: 数组基础精讲

下一篇: JS中的 变量提升、作用域、闭包 核心原理解读

珠峰故事查看更多

热门标签

HTML5 响应式布局 webApp 移动端 jQuery Node javascript HTML5+ CSS3 React HTML+CSS React Native Angular

热门点击查看更多

关于我们
珠峰培训官方网站
关于珠峰
联系我们
友情链接
HTML5培训
JavaScript培训
高级Node培训
React教程中文网
Node教程中文网
常见问答
客服答疑
学员故事

地址：北京昌平区科星西路106号院国风美唐综合楼6号楼505珠峰培训

课程内容版权均归 北京珠峰世纪技术培训有限公司 所有

北京珠峰培训店内纠纷和解员：周啸天 电话：18310612838 | 霍营市场监督管理所投诉举报电话：010-60787760 | 营业执照

电话：400-180-6960 | 京ICP备09041920号 | 京公网安备110108400531号