我的前端笔记

1、JavaScript 的对象的地址引用

JavaScript 的对象是可变的，它们是通过引用来传递的。如果将一个对象赋值给另一个对象，那么两个对象其实是指向同一个引用的，如下：

var o1= {'a':1};
var o2 = o1;

console.log(o2 === o1); //其实都是指向同一个对象，这里会打印 true

//改变o2的属性的值话，o1也会改变
o2.a = 2
console.log(o1.a); //这里会打印 2


//重新定义o1和o2
var o1= {'a':1};
var o2 = {'a':1};
console.log(o2 === o1); //现在它们不再是同一个对象了，这里会打印 false

数组同样适用上述情况，将a数组直接赋值给b数组的话，其实它俩指向的是同一个存储地址。注意。如果这时你循环处理b数组时，在循环中删除或者增加了a数组的元素，那么循环的次数就会发生变化，可能会引发你不想看到的结果哦。

2、js获取浏览器窗口宽高的兼容性写法

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log('宽度：'+w+',高度：'+h);

3、js生成随机数和百分比转换

js生成随机数，原理：Math.random()生成 [0,1) 之间的随机数，Math.random()*(max-min+1)会生成0与max-min差值之间的数，所以再加上min就是 [min,max] 之间的随机数了，max-min差值要加一生成的数才会包括max。

//生成从min到max的随机整数
function randomIntNum(min,max){ return parseInt(Math.random()*(max-min+1)+min,10); }

//生成从min到max的随机数
function randomNum(min,max){ return Math.random()*(max-min+1)+min; }

小数转换成百分比并保留n位小数，默认为保留两位小数，toFixed()有时会产生精度丢失的情况，先乘10000再除以100就可以解决这个问题了。

//转换成百分比并保留n位小数
Number.prototype.toPercent = function(n){
	if(typeof(n)!='number' && typeof(n)!='undefined'){ n=parseInt(n) || 2 }
	if(typeof(n)=='undefined' || n<0 || n>100){ n = 2; }
	return (Math.round(this * 10000)/100).toFixed(n) + '%';
}

4、jquery中dom.toggle()、dom.show()和dom.hide()的补充

jquery中dom.show()和dom.hide()是显示和隐藏元素用得，这两个函数可以带参数：速度和回调

dom.hide(speed,callback);

dom.show(speed,callback);

//例如
dom.hide(1000,function()
{
    完成隐藏操作后做一些事情
});

通过设置speed,可以让隐藏和显示产生动画效果，这样就不用在css里设置延迟动画了。

另外，有另一个函数可以在元素隐藏时显示它，元素显示时隐藏它，用法和以上两个函数一样：

dom.toggle(speed,callback); //自动显示和隐藏元素

5、ajax请求的缓存

执行ajax请求时，有时为了防止得到得结果是缓存结果，可以在请求url后面加上用随机数生成的唯一ID来获取服务器上的数据，例如：

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        alert(xhr.responseText);
    }
}
xhr.open("GET","http://xxx/demo_get.php?t=" + Math.random(),true);
xhr.send();

6、单行文本省略

div{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

7、多行元素的文本省略

div{
    display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:5;
	overflow:hidden
}