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>