技术分享、js实例

1、判断对象是否是数组

     https://www.cnblogs.com/heshan1992/p/6927690.html

     一般会想到用typeof、instanceof，但这两种方法都有各自的bug

      例如：Function、String、Number、Undefined都可以正确返回，只有null和Array返回object

       console.log(typeof([]))  console.log(typeof(null))   console.log(typeof("gggg"))

所以这种方法不行，在来看instanceof

console.log(arr instanceof Array) //true

还有一种方法是 每个对象还有constructor的属性：

console.log([1,2,3])  可以看到类型

var arr = [1,2,2]

console.log(arr.constructor===Array)//true

这两种方法看是没问题，但是也有bug，当你夸iframe创建实例的时候，由于每个iframe都有一套自己的执行环境，跨frame实例化的对象彼此是不共享原型链的，就会出现问题

var iframe = document.createElement('iframe'); //创建iframe
document.body.appendChild(iframe); //添加到body中
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // 声明数组[1,2,3]
alert(arr instanceof Array); // false
alert(arr.constructor === Array); // false 

正确方法：检测数组方法

bject.prototype取得对象类型、toString转为字符串、call将this转向检测的当前对象

function isArrayFn (o) {
return Object.prototype.toString.call(o) === '[object Array]';
}
var arr = [1,2,3,1];
alert(isArrayFn(arr));// true 

二、浏览器兼容问题

http://bbs.jfh.com/topic/20742?utm_source=tuicool&utm_medium=referral?utm_source=tuicool&utm_medium=referral

1、内外边距差异较大

     解决： css添加   *{margin:0;padding:0;}

2、块级元素使用float后再使用margin，会把后面的顶到下一行

     描述：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现             的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

     解决：为块级元素添加display：inline变为行内元素

3、设置最小高度

     描述：IE8前浏览器不管标签是否为空都会预留一个默认高度，如果设置的高度小于这个默认高度，则会取默认高度

      解决：给这个标签设置overflow：hidden，或者设置line-height小于你要的高度

4、行内元素添加display：block变为块级元素后，使用横向float和间距magin，则会出现第二种问题

      描述：行内元素（除input）想要设置宽高，则得先设置display：block变为块级。

      解决：在display：block后设置diaplay：inline  和display：table ；加display：table为了可以设置高度

5、图片默认有间距

     描述：几个img放在一起，虽然是行内元素，但也会有默认间距

     解决：使用float

6、标签最低高度设置min-height不兼容

      描述：有时候有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被        撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

      解决：当要设置一个最小高度为200px的标签时，{min-height:200px;height:auto !important;height:200px;overflow:visable}

4、监听滚动条完成事件

$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
 });  
}

用法：

$(".scrollsvg").scrollEnd(function(){
	  console.log("这是滚动完成时的操作")
}, 500);