技术分享、js实例

约定不等于承诺〃 2022-03-20 11:30 265阅读 0赞

1、判断对象是否是数组

[https://www.cnblogs.com/heshan1992/p/6927690.html][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\])  可以看到类型

![20190212172348129.png][]

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][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);

[https_www.cnblogs.com_heshan1992_p_6927690.html]: https://www.cnblogs.com/heshan1992/p/6927690.html
[20190212172348129.png]: /images/20220320/3ad4a36203f3462095364a11b60609da.png
[http_bbs.jfh.com_topic_20742_utm_source_tuicool_utm_medium_referral_utm_source_tuicool_utm_medium_referral]: http://bbs.jfh.com/topic/20742?utm_source=tuicool&utm_medium=referral?utm_source=tuicool&utm_medium=referral