javascript常用知识汇总

javascript这个语言庞大而复杂，我用了三年多了，还是皮毛都不会。从刚开始的jquery，到后来的es6，每天都在学习，每天都在忘记。

1.禁止手机虚拟键盘弹出

在开发适配手机的页面时，出现了这么一个现象，我用了input标签，点击弹出一个选择框，就是那种picker组件，在手机上点击就会出现虚拟键盘，这个必须去掉。第一种是为input加入readonly属性，第二种用js代码的document.activeElement.blur()

1
2
3

$("#datePicker").focus(function(){
    document.activeElement.blur();
});

2.瀑布流布局的实现

如果要实现瀑布流布局的话，可以使用masonry这个插件，如果想深入理解原理的话，还是需要查看张鑫的空间文章的。

3.获取页面高度

网页可见区域宽：document.body.clientWidth;
网页可见区域高：document.body.clientHeight;
网页可见区域宽：document.body.offsetWidth(包括边线和滚动条的宽);
网页可见区域高：document.body.offsetHeight(包括边线的宽);
网页正文全文宽：document.body.scrollWidth;
网页正文全文高：document.body.scrollHeight;
网页被卷去的高(ff)：document.body.scrollTop;
网页被卷去的高(ie)：document.documentElement.scrollTop;
网页被卷去的左：document.body.scrollLeft;
网页正文部分上：window.screenTop;
网页正文部分左：window.screenLeft;
屏幕分辨率的高：window.screen.height;
屏幕分辨率的宽：window.screen.width;
屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
你的屏幕设置是：window.screen.colorDepth 位彩色;
你的屏幕设置 ：window.screen.deviceXDPI 像素/英寸;

4.防止全局变量污染

在普通的js文件中定义一个变量,在sb.js中定义了一个变量sb,如果直接通过script标签引入这个sb.js文件，则sb这个变量会直接成为window的一个变量，即全局变量。

1
2
3

// sb.js
var sb="kkk";
console.log(window);

过多的全局变量不仅仅会拖慢程序运行，而且不利于多人合作式的开发模式，不同的人分别在自己的文件中定义全局变量，容易造成全局变量冲突，互相覆盖，这个时候就应该通过使用“定义全局变量命名空间”和“利用匿名函数将脚本包裹起来”两种方法避免全局变量的污染。
(1).定义全局变量空间，就是新建一个全局对象，然后将所有的属性和函数都作为这个对象的键值对存储在这个变量中：

1
2
3
4
5
6
7
8
9

var MY={};
        my.name={
            big_name:"zhangsan",
            small_name:"lisi"
        };
        my.work={
            school_work:"study",
            family_work:"we are"
       };

(2).利用匿名函数将脚本包裹起来，就是将js文件用一个立即执行的函数包裹起来，jquery也可以使用$(document).ready()函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 匿名函数
(function(){
    var exp={};
    var name="aa";
    exp.method=function(){
        return name;
    };
    window.ex=exp;
})();

// jquery,ready函数,和立即执行的匿名函数效果是一样的。
$(document).ready(function(){
var exp={};
    var name="aa";
    exp.method=function(){
        return name;
    };
    window.ex=exp;
});

5.js库开头加分号和叹号

有时候，在查看别人写的库的时候，会发现一个奇怪的现象，在文件的开头是分号和叹号开头（牛逼的人写代码，都是小白理解不了的），这里以layui库为例：

加分号的作用主要是为了在与其他文件合并压缩的时候，防止文件之前没有；分隔而导致错误。而加叹号的作用主要是为了构建一个立即执行函数，“而将运算符加载函数定义的前面，则是将函数看做一个整体，然后再调用这个函数，并对返回的结构进行逻辑运算。”，“解析器将会以函数表达式的方式去调用定义函数。也就是说，任何能将函数变成一个函数表达式的作法，都可以使解析器正确的调用定义函数。而 ! 就是其中一个，而 + - || 都有这样的功能。”，类似于(function(){})(),只不过写法上更加的简洁。

6.javascript判断对象是否为空

这里所说的判断对象是否为空，不是说判断对象是否为null或者事undefined,而是说，一个对象的属性是否为空，也就是一个: “{}”,参考文章中给的很明确了，总结的也很全面，一种事通过 for in,一种是通过JSON.stringify(),还有一种是使用ES6 新增的方法 Object.keys()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 第一种
for (var i in obj) { // 如果不为空，则会执行到这一步，返回true
    return true
}
return false // 如果为空,返回false

//第二种
if (JSON.stringify(data) === '{}') {
    return false // 如果为空,返回false
}
return true // 如果不为空，则会执行到这一步，返回true

//第三种
if (Object.keys(object).length === 0) {
    return false // 如果为空,返回false
}
return true // 如果不为空，则会执行到这一步，返回true

//第三种简写
return Object.keys(obj).length === 0

7.JavaScript跳过.map()上的元素

在map函数中直接返回reture false即可。

8.判断对象是否为数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// type
var ary = [1,23,4];
console.log(typeof ary); //输出结果是Object

console.log(ary instanceof Array)//true;

console.log(ary.__proto__.constructor==Array);//true
console.log(ary.constructor==Array)//true 这两段代码是一样的

//通用
function isArray(o){
    return Object.prototype.toString.call(o)=='[object Array]';
}
console.log(isArray(ary));

//新增
if(!Array.isArray){
    Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==='[object Array]'
    }

}

9.判断对象是否为dom节点

1
2
3
4
5
6
7
8
9
10
11
12

// 定义函数
function isDom(dom){
    let isDom= typeof HTMLElement === 'object'? function(dom) {
        return dom instanceof HTMLElement;
    }: function(dom) {
        return dom && typeof dom === 'object' && dom.nodeType === 1 && typeof 	dom.nodeName === 'string';
    };
    return isDom(dom);
}

// 使用
isDom("ss");

10.克隆Dom节点