javascript笔记——工作笔记

1、防止普通用户缓存静态文件，每次修改之后给静态文件的应用后面加上参数后缀[项目文件较多时最好使用前端构建工具]

比如：

<script src="$!webPath/resources/js/orderPayInfo.js?ver=2" type="text/javascript"></script>

但是这种做法也有弊端，即浏览器给这种缓存方式的缓存容量太少了，只有12Mb，且不分Host。所以更极致的做法是以文件名为Key，文件内容为value，缓存在localStorage里，命中则从缓存中取，不命中则去服务器取，虽然缓存容量也只有5Mb，但是每个Host是独享这5Mb的。

2、微信支付和快捷支付那一块，需要轮询服务器订单的状态，当状态发生改变时需要做相应的跳转动作，　此时的请求需要加时间戳，因为相同的请求操作会被缓存下来，也就是会缓存本地的已有的数据，如果不加时间戳程序会使用本地缓存的数据

url:contextPath+'/pingan/pay/quick/orderPayTotalStatus.htm?'+(new Date()).getTime(),

3、小的逻辑块可能重复使用，此时最好都封装进小的函数中，方便以后使用

4、iframe的弊端太多，谨慎使用

5、localStorage 和 sessionStorage 使用  本地存储和本地会话存储很有用

6、留意同步请求和异步请求，当需要拿到请求的数据使用时，需要写成同步请求：比如

function checkOpenAccNo(){		 
    	var len = true;
	    jQuery.ajax({
	        type: "POST",
	        async:false,
	        url: contextPath+"/pingan/pay/quick/listopencards.htm",
	        dataType: "text", 
	        success:function(data){ 
	            data = jQuery.parseJSON(data);
	            var cards=data.data.accNos;	
                if(!cards.length){
                	len = false;   
                }	                         
	        },
	        error:function(e){
	            
	        } 
	    });
    	
    	return len
	}

6、git/recource tree 命令

$ git stash

$ git log

$ git stash pop

以上这几个命令经常一起用。　

7、获取当前域名

window.location.host

document.domain

例如：

document.domain
"www.baidu.com"
window.location.host
"www.baidu.com"

8、获取当前页面地址

document.referrer  //如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。

window.location.href

例如：

window.location.href
"https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E6%90%…UuFGh4gfDqIX10zvw&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=9&rsv_sug7=100"
document.referrer
""

9、取消当前文档的选中

document.onselectstart = function () { return false; }

8、站长统计

var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1259954722'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1259954722%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));

9、seo 中的网站验证

<meta name="baidu-site-verification" content="IUSTUHWIjp" />

10、type=“file”的click事件

两种实现方式　　

<div class="add-img">
            +            
 </div>
 <input type="file" name="myfile">

$('.add-img').click(function(){                    
       $(this).next('input[name="myfile"]').trigger('click');               
})

$('.add-img').click(function(){
       var that =this;
           setTimeout(function(){
                $(that).find('input[name="myfile"]').trigger('click');
            },0)
                    
})

<div class="add-img">
     +           
</div>
<input type="file" name="myfile">
//从这种解决方式可以看到 文档结构中input type="file" 拿到点击对象的外面就不会出现一直触发回调的情况了   【你写在后面应该是不会出现这个情况的，父子关系，trigger一直触发这个回调】

11、当后台返回一个查询结果的view界面就不能使用正常的ajax请求得到的数据然后再展示数据

 

12、js代码

//搜索订单信息	  
	  jQuery('#search-order').click(function(){
		  var orderId = jQuery(this).parent().find('input').val();
		  jQuery(this).attr('href',contextPath+'/buyer/order.htm?order_id='+orderId);		  
	  })

//后台返回的数据有重复的  去重

//我的足迹去重
	var result = [];
	 #foreach($listCase in $footPointList)
			var goodsCase = jQuery.parseJSON('$listCase.fp_goods_content');			
			for(var i=0;i<goodsCase.length;i++){
				result.push(goodsCase[i])
			}			
	 #end	
	function uniqu(){
		 var itemList = [];
		 var ssjson = {};
		 for(var j=0;j<result.length;j++){	
			 var item = result[j];
			 if(!ssjson[item.goods_id]){
				 itemList.push(result[j])
				 ssjson[item.goods_id] = 1;
			 }			 
		 }
		 return itemList
	 }	
	var res = uniqu();			
	jQuery.each(res,function(i,item){
		var imgUrl = item.goods_img_path;
		var goodsUrl = '$!webPath/goods_'+item.goods_id+'.htm';
		var goodsName = item.goods_name;
		var goodsPrice =item.goods_price;
		var html ='<ul class="rbox_ul">' +
			           '<li class="rbox_ul_img">' +
		            	'<a href="'+goodsUrl+'" target="_blank">'+
		            		'<span class="img_cspan">'+
		              			'<p><img src="'+imgUrl+'" width="190" height="190"></p>'+
		              		'</span>'+
		              	'</a>'+
		            '</li>'+
		            '<li class="rbox_ul_name">'+
		            	'<a href="'+goodsUrl+'" target="_blank">'+goodsName+'</a>'+
		            '</li>'+			            
		            //'<li class="rbox_ul_evaluate">(已有0人评价)</li>'+
		            '<li class="rbox_ul_price">￥'+goodsPrice+'</li>'+
		         '</ul>';				         
		         jQuery('#fp').append(html)
	})

13、//使用百度静态资源库注意写上回退机制，保不准哪天别人的资源库宕机了，代码如下

<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
(function(){
    window.jQuery || document.write('<script src="$!webPath/resources/js/jquery-1.6.2.js"></script>');
})();
</script>