坑爹的BOM

场景:开发小程序使用wx.request请求数据时提示Cannot read property of ‘xxxx’ undefined……..

原因:request返回的数据会默认会经过JSON.parse函数转换为Object,如果返回内容带有BOM就会影响转换

解决办法:

1.服务器端返回数据去除BOM(一般的IDE都有这样的功能)

2.编写兼容代码(在小程序内wx.request设置dateType:’text’,然后将返回的res.data进行去除字符res.data.trim()处理之后调用JSON.parse转换)

上拉加载更多

 
  • 第一个
  • 第二个
$(function(){
    var counter = 2;//开始加载
    var num = 6;//每页数量
    //容器外层
    $('#content_drop').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'index.php?p='+ counter,
                dataType: 'json',
                success: function(data){
                	if(data.status  !=0){
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    } else {
                    	var result = '';
                        counter++;
                        for(var i = 0; i < num; i++){
                        	//处理内容
                        }
                        $('#content_list').append(result);
                        me.resetload();
                    }
                },
                error: function(xhr, type){
                    console.log('Ajax error!');
                    me.resetload();
                }
            });
        }
    });
});

参考:https://github.com/ximan/dropload

JS闭包

闭包定义
闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量,而这些变量是不会随上一级函数的执行完成而销毁。
前提条件
计算机中的内存变量如果有被引用着的话,则系统是不会将之回收的。只要我们能够一直持有这个引用,则就可以令局部变量避免被回收——这是闭包概念成立的前提
闭包用途
可以读取到函数内部的变量
可以让函数内部变量保持在内存中
避免全局变量的污染
私有成员的存在
注意事项
闭包会让函数中的变量都被保存到内存中,内存消耗较大,不能滥用闭包,否则会导致性能和内存泄漏问题(退出函数之前可以将不用的局部变量全部删除)
闭包能改变父函内部变量的值,一定要小心使用
示例

for(var i = 0; i < 10; i++) {
	setTimeout(function() {
     console.log(i);  
 }, 100);
}
输出10次10
for(var i = 0; i < 10; i++) {
 	(function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 100);
    })(i);
}
输出0-9


 
参考:http://www.2cto.com/kf/201410/342609.html

定位div到窗口固定位置

代码来自网络~

/*任意位置浮动固定层*/
/*调用:
1 无参数调用:默认浮动在右下角
$("#id").floatdiv();

2 内置固定位置浮动
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//右下角
$("#id").floatdiv("rightbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");

另外新添加了四个新的固定位置方法

middletop(居中置顶)、middlebottom(居中置低)、leftmiddle、rightmiddle

3 自定义位置浮动
$("#id").floatdiv({left:"10px",top:"10px"});
以上参数,设置浮动层在left 10个像素,top 10个像素的位置
*/
jQuery.fn.floatdiv=function(location){
		//判断浏览器版本
	var isIE6=false;
	var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;
	if(Sys.ie && Sys.ie=="6.0"){
		isIE6=true;
	}
	var windowWidth,windowHeight;//窗口的高和宽
	//取得窗口的高和宽
	if (self.innerHeight) {
		windowWidth=self.innerWidth;
		windowHeight=self.innerHeight;
	}else if (document.documentElement&&document.documentElement.clientHeight) {
		windowWidth=document.documentElement.clientWidth;
		windowHeight=document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth=document.body.clientWidth;
		windowHeight=document.body.clientHeight;
	}
	return this.each(function(){
		var loc;//层的绝对定位位置
		var wrap=$("
"); var top=-1; if(location==undefined || location.constructor == String){ switch(location){ case("rightbottom")://右下角 loc={right:"0px",bottom:"0px"}; break; case("leftbottom")://左下角 loc={left:"0px",bottom:"0px"}; break; case("lefttop")://左上角 loc={left:"0px",top:"0px"}; top=0; break; case("righttop")://右上角 loc={right:"0px",top:"0px"}; top=0; break; case("middletop")://居中置顶 loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"}; top=0; break; case("middlebottom")://居中置低 loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"}; break; case("leftmiddle")://左边居中 loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"}; top=windowHeight/2-$(this).height()/2; break; case("rightmiddle")://右边居中 loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"}; top=windowHeight/2-$(this).height()/2; break; case("middle")://居中 var l=0;//居左 var t=0;//居上 l=windowWidth/2-$(this).width()/2; t=windowHeight/2-$(this).height()/2; top=t; loc={left:l+"px",top:t+"px"}; break; default://默认为右下角 location="rightbottom"; loc={right:"0px",bottom:"0px"}; break; } }else{ loc=location; var str=loc.top; str=str.replace("px",""); top=str; } /*fied ie6 css hack*/ if(isIE6){ if (top>=0) { wrap=$("
"); }else{ wrap=$("
"); } } $("body").append(wrap); wrap.css(loc).css({position:"fixed", z_index:"999"}); if (isIE6) { wrap.css("position","absolute"); //没有加这个的话,ie6使用表达式时就会发现跳动现象 $("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)"); } //将要固定的层添加到固定层里 $(this).appendTo(wrap); }); };

js过滤空格

很实用的js函数


 


谷歌浏览器扩展程序开发

先说为何要学这个,我们公司部署项目的时候有一个选择按钮,每次都得选中才能提交!于是就。。。

直接上代码!
配置文件:manifest.json

{  
    "name": "选中页面复选框",  
    "version": "1.0.0",  
    "manifest_version": 2,  
    "description": "选中页面当中的复选框", 
    "permissions" : ["tabs","http://*/"],
    "icons": {  
        "48": "icon.png"  
    }, 
    "content_scripts":[{
		"matches":["http://*/*"],
		"js":["jquery.min.js", "content_script.js"]
	}],
    "browser_action": {  
      "default_icon": "icon.png",  
      "default_popup": "popup.html"  
    }
}  

name就是程序名称
version是版本
manifest_version是2(如果是1会提示版本低)
description是扩展描述
permissions是权限,后面是匹配的网址。
icons是图标
content_scripts是加载的js
browser_action这是显示在浏览器插件栏的icon以及点击icon弹出的页面

content_script.js代码如下

$(":input[type='checkbox']").attr('checked', true);

 
额。。就这么简单!
引入的jquery就不说了~很喜欢jquery,因为它提倡写的少!做的多!
最后带上例子和说明文档!
备注:免费使用哦~另外,你会js的话,想怎么玩就怎么玩咯!!

example

Uploadify异步上传

1.官网:http://www.uploadify.com/

2.可能是uploadify的bug

如果不设置button_image_url会发送一次url请求!



$(function() {
    $("#file_upload").uploadify({
        'buttonImage' : '/uploadify/browse-btn.png',
        'swf'         : '/uploadify/uploadify.swf',
        'uploader'    : '/uploadify/uploadify.php'
        'button_image_url':'/public/uploadify/browse-btn.png',//这个一定要设置!
    });
});

 

Packer JavaScript en PHP

官网:http://joliclic.free.fr/php/javascript-packer/en/

例子:code

pack();
file_put_contents($out,$append_content); */
//加密多个文件
$js_arr = array("./index.js", './index1.js');
$out = './encode.js';
$content = "";
foreach($js_arr as $v) {
	$append_content = file_get_contents($v)."\r\n";
	$packer = new JavaScriptPacker($append_content);
	$append_content = $packer->pack();
	$content .= $append_content;
}
file_put_contents($out,$content);
?>

 

百度地图点聚合

需要引入
 <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> 
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
 然后写 var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});//点聚合  

百度地图标点

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript">
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
map.centerAndZoom(point, 14);                 // 初始化地图,设置中心点坐标和地图级别  
//控件
map.addControl(new BMap.NavigationControl());//平移缩放
map.addControl(new BMap.ScaleControl());//比例尺
map.addControl(new BMap.OverviewMapControl());//缩略图
map.addControl(new BMap.MapTypeControl());//地图类型
//地图标点(普通标点)
function addMarker(point){
	  var marker = new BMap.Marker(point);
	  map.addOverlay(marker);
}
var bs   = map.getBounds();    //可是区域
var sw = bs.getSouthWest();   //可视区域左下角
var ne = bs.getNorthEast();   //可视区域右上角
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
var polygon = new BMap.Polygon([
                                new BMap.Point(sw.lng,sw.lat),//左下角
                                new BMap.Point(ne.lng,sw.lat),//左上角
                                new BMap.Point(ne.lng,ne.lat),//右上角
                                new BMap.Point(sw.lng,ne.lat)//右下角
                              ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
                              map.addOverlay(polygon);
for (var i = 0; i < 100; i ++) {  	
    var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.9), ne.lat - latSpan * (Math.random() * 0.9)); 	 
    addMarker(point);      
}
</script>