javascript常用知识汇总

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

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

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

123
$("#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的一个变量,即全局变量。

123
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"       };
123456789

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

12345678910111213141516171819
// 匿名函数(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

axios使用笔记

Vue Cli3.0多页配置

原文地址:https://www.cnblogs.com/lijianming180/p/12026618.html

时间: 2024-10-12 12:31:54

javascript常用知识汇总的相关文章

JavaScript正则表达式知识汇总

Js 正则表达式知识汇总 正则表达式: 1.什么是RegExp?RegExp是正则表达式的缩写.RegExp 对象用于规定在文本中检索的内容. 2.定义RegExp:var +变量名=new RegExp(); 3.RegExp 对象有 3 个方法: 1)test()检索字符串中的指定值,返回值是true或false. var p1=new Reg("e"); document.write(Reg.test("welcome to China!")); 2)exec

javascript常用知识点集

目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 四.经典实例应用 一.jquery源码中常见的知识点 1.string,number类型转换的快捷方法 // @param s为字符串,n为数字 function fn(obj){ //转换为String类型 var s = obj +""; //转换为number类型 var n = +obj; } 分享一个面试例子: //加会将其后面自动转换成字符串 "64&

Javascript常用正则表达式汇总

一.匹配数字和字符串 整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$ 只能输入数字:"^[0-9]*$". 只能输入n位的数 字:"^\d{n}$". 只能输入至少n位的数字:"^\d{n,}$". 只能输入m~n位的数字:."^\d{m,n}$" 只 能输入零和非零开头的数字:"^(0|[1-9][0-9]*)$". 只能输入有两位小数的正实数:"^[0-9]+(.[0-9]

Oracle常用知识汇总

NLS_LANG格式:NLS_LANG = language_territory.charset有三个组成部分(语言.地域和字符集),每个成分控制了NLS子集的特性.其中:language 指定服务器消息的语言.territory 指定服务器的日期和数字格式.charset 指定字符集例如:AMERICAN_AMERICA.US7SCIIAMERICAN _ AMERICA. ZHS16GBK只显示了语言信息,是因为数据库安装时默认使用OS的地域和字符集.安装Oracle的时候不是有个显示字符集

Android开发笔记之《JNI常用知识汇总》

参考资料: Android Studio1.4.x JNI开发基础 - 简单实例:http://www.cnblogs.com/zhuyp1015/p/4979339.html Android Studio1.4.x JNI开发基础-基本环境配置:http://www.cnblogs.com/zhuyp1015/p/4976116.html使用NDK移植开源项目,JNI的使用技巧:http://blog.csdn.net/pathfinder163/article/details/7244823

javaScript 基础知识汇总(八)

1.Map Set WeakMap 和WeakSet Map 是一个键值对的集合,主要的方法包括: new Map() 创建Map map.set(key,value)  根据键(key)存储值(value). map.get(key) 根据键返回值,如果map中该值不存在,返回undefined map.has(key) 如果键值存在,返回true,否则返回false map.delete(key) 移除该键的值 map.clear()   清空map map.size   返回当前元素个数

JavaScript 基础知识汇总目录

一.标签.代码结构.现代模式.变量.数据类型.类型转换 GO 二.运算符.值的比较.交互.条件运算符.逻辑运算符 GO 三.循环 while 和 for .switch语句.函数.函数表达式和箭头函数 GO 四.对象(创建.属性的添加和删除.对象中括号的使用,属性计算,属性值简写,检查,for .. in 循环,引用复制,比较引用,常量对象,对象复制合并)GO 五.垃圾回收.Symbol类型.对象方法和this.构造函数和操作符 new GO 六.基本类型和对象的区别,作为对象的基本类型,数字类

Javascript常用代码汇总

//js中获取image的src值的语句: var path = $('#suolue').attr('src'); var path = document.getElementById("suolue").src; var path = $("#suolue")[0].src; //js获取a标签的文本内容 <a id="oldreportpath" class="info" style="margin: 0

JavaScript正則表達式知识汇总

Js 正則表達式知识汇总 正則表達式: 1.什么是RegExp?RegExp是正則表達式的缩写.RegExp 对象用于规定在文本中检索的内容. 2.定义RegExp:var +变量名=new RegExp(); 3.RegExp 对象有 3 个方法: 1)test()检索字符串中的指定值,返回值是true或false. var p1=new Reg("e"); document.write(Reg.test("welcome to China!")); 2)exec