很喜欢写一些小方法或伪代码模型存起来,以后就可以直接拿来用了,虽然还是菜鸟一只,但爷爷都是从孙子过来的嘛,下面贴上本周用到的几个小例子
##1.在动态渲染元素的时候,需要逻辑判断
在循环渲染dom元素时,循环遍历中需要逻辑操作,如果不使用模板:
1 var addList = function(){ 2 var lists= [],list=""; 3 $.each(data,function(i,item){ 4 if(条件1){ 5 list+="<li>"+$(item).val()+"</li>"; 6 } 7 if(条件2){ 8 list+="<li>"+$(item).val()+"</li>"; 9 } 10 lists.push(list); 11 }); 12 $("#id").html(lists.join("")); 13 }
这是在看一同事代码时,发现她用push和join方法,渲染元素,觉得不多很显然即使正在渲染元素的循环中,可以方便的进行逻辑操作,用list+=即使渲染元素较多,也使得代码很规整;
##2.从一个json取相应属性创建另一个json对象
1 var createJsonObj=function(data){ 2 var jsonObj = []; 3 $.each(data,function(i,item){ 4 var innerObj = { 5 key:"", 6 value:"" 7 }; 8 innerObj.key = item.id; 9 innerObj.value = item.name; 10 jsonObj.push(innerObj); 11 }); 12 return jsonObj; 13 }
以上是创建一个[{“key”:"XXX","value":"XXX"},{“key”:"XXX","value":"XXX"}]的json对象的简单小例子,大家可以试试考虑更好的封装,将传入新对象的key值实现自定义。
##3.js获取日期的一些小操作
这个网上也有很多例子,本周主要遇到下面两个操作
1 var jsDate = { 2 //获取当前2014-06-12 16:55格式日期 3 getTime:function(date){ 4 var year ="",month="",day="",hour="",minute="",time="",oldday=""; 5 if(date){ 6 oldday=new Date(date.getTime()-3600*1000*24*7); 7 year= oldday.getFullYear(); 8 month= oldday.getMonth()+1; 9 day = oldday.getDate(); 10 hour = oldday.getHours(); 11 minute = oldday.getMinutes(); 12 }else{ 13 var now= new Date(); 14 year = now.getFullYear(); 15 month = now.getMonth()+1; 16 day = now.getDate(); 17 hour = now.getHours(); 18 minute = now.getMinutes(); 19 } 20 if(month<10){ 21 month='0'+month; 22 } 23 if(day<10){ 24 day='0'+day; 25 } 26 if(hour<10){ 27 hour = '0' + hour; 28 } 29 if(minute<10){ 30 minute='0'+minute 31 } 32 time = (year+"-"+month+"-"+day+" "+hour+":"+minute); 33 return time; 34 }, 35 36 // 计算相差n天日期 37 subTime:function(date,n){ 38 date = new Date(date) 39 date = date.valueOf() 40 date = date - n * 24 * 60 * 60 * 1000 41 date = new Date(date) 42 date = jsDate.getTime(date); 43 return date; 44 } 45 }
上例主要是理清一些js时间的补零问题,以及取各个时间的获取演示
##4.逻辑判断多的时候,采用如下方式,规整代码
1 var bo1 = false,bo2 = false,bo3=false; 2 if(条件1){ 3 bo1 = false; 4 逻辑操作1 5 } 6 if(条件2){ 7 bo2 = false; 8 逻辑操作2 9 } 10 if(条件3){ 11 bo3 = false; 12 逻辑操作3 13 } 14 if(bo1&&bo2){ 15 逻辑操作4 16 } 17 ...
可能这种看起来更烦了,但可能个人习惯,偏爱这种
此贴是6月份发于个人笔记里的,现在已有很多改进,还未整理...