javascript常用知识汇总

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

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

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

1
2
3

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

参考文章：
1.小技巧|H5禁止手机虚拟键盘弹出：https://segmentfault.com/a/1190000011371022
2.HTML5页面，点击input禁止弹出手机默认键盘的几种解决办法:https://zhubangbang.com/html5-disable-the-phone-default-keyboard.html
3.input禁止输入的方法:https://blog.csdn.net/diwuyanting/article/details/78589766

2.瀑布流布局的实现

如果要实现瀑布流布局的话，可以使用masonry这个插件，如果想深入理解原理的话，还是需要查看张鑫的空间文章的。
参考文章：
1.折腾:瀑布流布局（基于多栏列表流体布局实现）：https://www.zhangxinxu.com/wordpress/2012/03/%E5%A4%9A%E6%A0%8F%E5%88%97%E8%A1%A8%E5%8E%9F%E7%90%86%E4%B8%8B%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80-waterfall-layout/
2.瀑布流的三种实现：https://www.jianshu.com/p/a7c6b9f28578
3.Masonry：https://masonry.desandro.com/#getting-started

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 像素/英寸;

参考文章：
1.关于获取各种浏览器可见窗口大小的一点点研究：https://www.cnblogs.com/Henllyee/archive/2008/04/20/1162517.html
2.用Javascript获取页面元素的位置：http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

4.防止全局变量污染

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

1
2
3


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

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

大专栏 javascript常用知识汇总d class="code">

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

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

// 匿名函数
(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;
});

参考文章：
1.防止js全局变量污染方法总结-待续：https://blog.csdn.net/xllily_11/article/details/52816699

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

有时候，在查看别人写的库的时候，会发现一个奇怪的现象，在文件的开头是分号和叹号开头（牛逼的人写代码，都是小白理解不了的），这里以layui库为例：
技术图片
加分号的作用主要是为了在与其他文件合并压缩的时候，防止文件之前没有；分隔而导致错误。而加叹号的作用主要是为了构建一个立即执行函数，“而将运算符加载函数定义的前面，则是将函数看做一个整体，然后再调用这个函数，并对返回的结构进行逻辑运算。”，“解析器将会以函数表达式的方式去调用定义函数。也就是说，任何能将函数变成一个函数表达式的作法，都可以使解析器正确的调用定义函数。而 ! 就是其中一个，而 + - || 都有这样的功能。”，类似于(function(){})(),只不过写法上更加的简洁。
参考文章：
1.js库前加一个感叹号（！）是什么意思？？：https://blog.51cto.com/6965535/1876217
2.为什么有的jQuery插件以”;”分号开头：https://segmentfault.com/q/1010000000142134
3.js文件中函数前加分号和感叹号是什么意思？有什么用：http://www.siyuweb.com/javascript/1194.html
4.js函数前加分号和感叹号是什么意思？有什么用？：https://blog.csdn.net/hellochenlu/article/details/52593472