最近換了家公司
發現新公司裡的同事在做後台AJAX配合Json、時，經常將需要動態產生的css樣式寫在JS中，讓代碼的解讀變得異常困難
於是和組長談論了下 寫了個小JQ外掛程式
在HTML頁面中 寫入模板 後台JS動態根據模板內容嵌套資料即可：
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><style>html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}.main{width:1004px;height:1000px;background-color:#999;margin:0 auto;padding-top:20px}.main .sample{width:500px;height:300px;border-radius:5px;padding:20px;border:1px soild #999;background-color:#fff;margin:20px;margin-top:0px}</style><body><div class="main"><ul id="test"> //需要放入模板樣式的標籤</ul><ul id="tem_001"> //模板ID 這裡注意 <li class="sample"> <p>姓名：==ID==</p><br/> //這裡注意 對應資料庫裡的列名一定要用 '==列名==' 類似於asp裡的<%=session("")%> <p>性別：==sex==</p><br/> <p>愛好：==habit==</p> </li></ul></div></body><script type="text/javascript" src="sass/javascripts/JQ.js"></script><script type="text/javascript">var data={habit:"足球",ID:"00150",sex:"男"};var data_1={habit:"籃球",ID:"00130",sex:"女"}; //data、data_1為假定從資料庫中返回的JSON資料$.fn.extend({cb_getsample:function(data_str,tem_id){var _temid=$("#"+tem_id);var _data_str=data_str;var obj=this;var str=_temid.html().split("==");var list_array=[];var list_value=[];var return_val="";_temid.css({"display":"none"});var tool={get_list:function(){for(i in _data_str){list_array.push(i);}},get_value:function(){var _len_1=str.length;var _len_2=list_array.length;for(var i=0;i<=_len_1;i++){for(var k=0;k<=_len_2;k++){if(str[i]==list_array[k]){tool.return_value(list_array[k]);str[i]=return_val;}};};},return_value:function(string){return_val="";for(var j in _data_str){if(j==string){return_val=_data_str[j];return;}}}};tool.get_list();tool.get_value();$(obj).append(str.join(" "));}});function start(){$('#test').cb_getsample(data,"tem_001"); //調用外掛程式 data為JSON資料、 tem_001為模板ID名稱 $('#test').cb_getsample(data_1,"tem_001");$('#test').cb_getsample(data,"tem_001");};$(document).ready(function(e) {start();});</script></html>
這裡只是簡單寫了個架構
具體的應用可能會根據實際項目有所不同。。。。 有疑問的話 歡迎大家留言或郵件 一起討論
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
