拼接时代
静态的页面换成动态的数据，拼接方法其实是必须的
直接上例子看：
1 this.images=[//json格式的数据 必须双引号 必须键值对形式 2 {small:'../images/s11.jpg',big:'../images/s11.jpg'}, 3 {small:'../images/s12.jpg',big:'../images/s12.jpg'}, 4 {small:'../images/s13.jpg',big:'../images/s13.jpg'} 5 ] 6 7 bindDOMImageOld:function(){//数据拼接的基本方式（基本都是数组形式的） 8 var str='' 9 for(var i= 0,len=this.images.length;i<len;i++) { 10 str+='<li>' 11 str+='<img class="etalage_thumb_image" src="'+ this.images[i].small+'" class="img-responsive" />' 12 str+='<img class="etalage_source_image" src="'+ this.images[i].small+'" class="img-responsive" />' 13 str+='</li>' 14 } 15 $('#etalage').html(str)
1 bindDom:function(dom){ 2 3 var str = '' 4 str+='<h1 id="pname">'+this.name+'</h1>' 5 str+='<div id="pdes">'+this.description+'</div>' 6 str+='<div >已售：<strong id="psales">'+this.sales+'</strong></div>' 7 str+=' <div>原价：<strong id="pprice">'+this.price+'</strong>元</div>' 8 str+='<div>优惠价：<strong id="pyouhui">'+this.youhuijia+'</strong>元</div>' 9 str+='<div>折扣：<strong id="pzhekou">'+this.zhekou+'</strong>折</div>' 10 dom.innerHTML = str; 11 },
拼接时代基本就是这样，这是最常见的一种方式；
动态创建时代
动态的创建标签也是一种很常见，在业务逻辑中也是必须的，比如登陆..
1 function noLogin(){//这种原生方法，略显臃肿 2 3 var loginlink = document.createElement("a"); 4 loginlink.setAttribute("id", "login");//设置属性 5 loginlink.setAttribute("name", "login");//设置属性 6 loginlink.setAttribute("class", "link");//设置class 7 loginlink.style.color="green";//设置样式 8 loginlink.href = ''; //赋值超链接网址 9 loginlink.innerHTML = '登录'; //超链接显示的文字内容 10 11 12 13 var rlink = document.createElement("a"); 14 rlink.setAttribute("id", "register");//设置属性 15 rlink.setAttribute("name", "register");//设置属性 16 rlink.setAttribute("class", "link");//设置class 17 rlink.href = ''; //赋值超链接网址 18 rlink.innerHTML = '注册'; //超链接显示的文字内容 19 20 21 // 添加到div中 22 var span = document.getElementById("span"); 23 span.appendChild(loginlink);//添加到div元素中 24 span.appendChild(rlink);//添加到div元素中 25 };
1 // 第二种方式 innerHTML 2 function noLogin2(){ 4 var span = document.getElementById("span"); 5 span.innerHTML = "<a href='' id='login' name='login' class='link'>登录</a><a href='' id='register' class='link'>注册</a>"; 6 7 };
jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("#btn1").click(function(){ 9 $("p").append(" <b>Appended text</b>."); 10 }); 11 12 $("#btn2").click(function(){ 13 $("ol").append("<li>Appended item</li>"); 14 }); 15 }); 16 </script> 17 </head> 18 19 <body> 20 <p>This is a paragraph.</p> 21 <p>This is another paragraph.</p> 22 <ol> 23 <li>List item 1</li> 24 <li>List item 2</li> 25 <li>List item 3</li> 26 </ol> 27 <button id="btn1">追加文本</button> 28 <button id="btn2">追加列表项</button> 29 </body> 30 </html>
jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("#btn1").click(function(){ 8 $("p").prepend("<b>Prepended text</b>. "); 9 }); 10 $("#btn2").click(function(){ 11 $("ol").prepend("<li>Prepended item</li>"); 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 18 <p>This is a paragraph.</p> 19 <p>This is another paragraph.</p> 20 <ol> 21 <li>List item 1</li> 22 <li>List item 2</li> 23 <li>List item 3</li> 24 </ol> 25 26 <button id="btn1">添加文本</button> 27 <button id="btn2">添加列表项</button> 28 29 </body> 30 </html>
1 <script> 2 function appendText() 3 { 4 var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 5 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 6 var txt3=document.createElement("p"); 7 txt3.innerHTML="Text."; // 通过 DOM 来创建文本 8 $("body").append(txt1,txt2,txt3); // 追加新元素 9 } 10 </script>
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 function afterText() 7 { 8 var txt1="<b>I </b>"; // 以 HTML 创建元素 9 var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建元素 10 var txt3=document.createElement("big"); // 通过 DOM 创建元素 11 txt3.innerHTML="jQuery!"; 12 $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素 13 } 14 </script> 15 </head> 16 <body> 17 18 <img src="/i/eg_w3school.gif" alt="W3School Logo" /> 19 <br><br> 20 <button onclick="afterText()">在图片后面添加文本</button> 21 22 </body> 23 </html>
数据绑定时代
//arttemplate语法：返回拼接好并绑定好的数据
模板的方式只是多一种数据绑定的方式，使数据绑定更加简便；
1:逗逗加加方式
1 bindDOMImageOld:function(){ 2 var str='' 3 for(var i= 0,len=this.images.length;i<len;i++) { 4 str+='<li>' 5 str+='<img class="etalage_thumb_image" src="'+ this.images[i].small+'" class="img-responsive" />' 6 str+='<img class="etalage_source_image" src="'+ this.images[i].small+'" class="img-responsive" />' 7 str+='</li>' 8 } 9 $('#etalage').html(str) 10 //这就是在拼接中添加数据绑定的方式 11 //采用的便是逗逗加加的方式
2：formateString方式
1 //简单的数据绑定formateString 2 formateString:function(str, data){ 3 return str.replace(/@((w+))/g, function(match, key){ 4 return typeof data[key] === "undefined" ? '' : data[key]}); 5 },
//可以和上面的方式比较
1 bindDOMImage:function(){ 2 /*无需豆豆加加*/ 3 var str='' 4 var html='' 5 html+='<li>' 6 html+='<img class="etalage_thumb_image" src="@(small)" class="img-responsive" />' 7 html+='<img class="etalage_source_image" src="@(big)" class="img-responsive" />' 8 html+='</li>' 9 10 for(var i= 0,len=this.images.length;i<len;i++) { 11 str+= $$.formateString(html,this.images[i]) 12 } 13 $('#etalage').html(str)
3：artTemplate方式
辅助绑定数据的一种方式；
1 //arttemplate语法 2 //封装成一个函数 3 bindTemplate:function (tempalteId,data){ 4 var html = template(tempalteId, data); 5 return html; 6 }
栗子：
1 <script src='template.js'></script> 2 <script src='index.js'></script> 3 4 5 <div id='mydiv'></div> 6 7 <!--模板王者演示-->//专门把拼接的数据 放到script 中 8 <script id="arttemplate" type="text/html"> 9 <h2>{{name}}</h2> 10 <ul> 11 {{each films}} 12 <li> 13 <strong>电影名称：</strong>{{$value.title}}<br> 14 <strong style='color:red'>导演</strong>{{$value.lead}} 15 <strong style='color:green'>主演:</strong>{{$value.role}} 16 </li> 17 {{/each}} 18 </ul> 19 </script> 20 21 <script> 22 23 //定义数据 24 //var =[{},{},{}] 25 /*1 必须是键值对 26 2 必须双引号：key value都必须是双引号*/ 27 28 var data ={ 29 name:'电影列表', 30 films: 31 [ 32 { 33 title: '复仇者联盟2', 34 lead: '乔斯·韦登', 35 role: '小罗伯特·唐尼' 36 }, 37 { 38 title: '速度与激情7', 39 lead: '范·迪塞尔', 40 role: '范·迪塞尔' 41 }, 42 { 43 title: '左耳', 44 lead: '苏有朋', 45 role: '苏有朋' 46 }, 47 { 48 title: '万物生长', 49 lead: '范冰冰', 50 role: '范冰冰 韩庚' 51 }, 52 { 53 title: '盗墓笔记', 54 lead: '苏有朋', 55 role: '美人鱼' 56 } 57 ] 58 } 59 var html = $$.bindTemplate('arttemplate',data) 60 $$.$id('mydiv').innerHTML = html 61 </script>
1 /** 2 * 作者：传智播客教育集团 3 * 开发日期：2015/12/25 4 * 描述：通用框架 5 * 版权所有 违者必究 6 */ 7 8 //定义一个对象 - 名字是$ 9 var $$ = function() {}; 10 //第二种写法 11 $$.prototype = { 12 $id:function(id){ 13 return document.getElementById(id) 14 }, 15 //去除左边空格 16 ltrim:function(){ 17 return str.replace(/(^s*)/g,''); 18 }, 19 //去除右边空格 20 rtrim:function(){ 21 return str.replace(/(s*$)/g,''); 22 }, 23 //去除空格 24 trim:function(){ 25 return str.replace(/(^s*)|(s*$)/g, ''); 26 }, 27 28 //tab 29 tab:function(id) { 30 //如何获取某个父元素下面的子元素 31 var box = document.getElementById(id); 32 var spans = box.getElementsByTagName('span'); 33 var lis = box.getElementsByTagName('li'); 34 35 36 //两步走 37 //第一步: 先把上半部分实现 38 //群体绑定事件 -- 对所有的span绑定事件 39 //群体绑定事件 40 for(var i=0;i<spans.length;i++) { 41 //相亲法则 -- 给男一号一个代号 -- 怎么给 -- 自定义属性 42 spans[i].index=i; 43 spans[i].onmouseover = function() { 44 //排他思想 -- 将所有的span置为默认状态 --- 然后再将当前鼠标移上的span置为class -- select 45 for(var i=0;i<spans.length;i++) { 46 spans[i].className=''; 47 lis[i].className=''; 48 } 49 this.className='select'; 50 lis[this.index].className='select'; 51 } 52 } 53 54 }, 55 //简单的数据绑定formateString 56 formateString:function(str, data){ 57 return str.replace(/@((w+))/g, function(match, key){ 58 return typeof data[key] === "undefined" ? '' : data[key]}); 59 }, 60 //arttemplate语法 61 //封装成一个函数 62 bindTemplate:function (tempalteId,data){ 63 var html = template(tempalteId, data); 64 return html; 65 }, 66 artTemplate:function (str,data){ 67 var render = template.compile(str); 68 return render(data) 69 } 70 } 71 //在框架中实例化，这样外面使用的使用就不用实例化了 72 $$ = new $$();
下面的这种方式是在拼接的时候用的：
仍然需要封装一下artTemplate：
1 artTemplate:function (str,data){ 2 var render = template.compile(str); 3 return render(data) 4 }
使用模板技术改造的案例：
1 bindDOMImage:function(){ 2 var html='' 3 console.log(this.images) 4 html+='{{each images as value i}}'//value保存的是每一次遍历images的值 5 html+='<li>' 6 html+='<img class="etalage_thumb_image" src="{{value.small}}" class="img-responsive" />' 7 html+='<img class="etalage_source_image" src="{{value.big}}" class="img-responsive" />' 8 html+='</li>' 9 html+='{{/each}}' 10 11 $('#etalage').html($$.artTemplate(html,this))
先到这里吧，以后再补充；