JS零碎知识<1>

原创 前端工程师_钱成 随笔 js知识 422阅读 2018-05-02 15:06:01 举报

Ajax:无需重新加载整个网页,就能更新部分网页的技术。
一、js中--proto--和prototype的区别和关系
1.原型对象Foo.prototype保存着构造函数Foo实例共享的方法,有一个指针constructor指回构造函数Foo。
2.Foo的实例有属性(--proto--),指向构造函数的原型对象,这样实例就可以访问原型对象的所有方法。
3、foo.--proto--===Foo.prototype
二、编程方式
(1)面向过程编程:根据业务逻辑直接写代码。
(2)函数式编程:把运算过程封装成函数。
(3)面向对象编程:对函数进行分类和封装。
三、闭包:内部函数作为全局函数的返回值被全局变量引用,导致全局函数的的作用域没法被释放,这种机制就是闭包。它的作用是,能让全局变量获取到局部变量的值,从而减少全局变量的个数。它的副作用是,会导致内存泄漏,没法释放。解决办法:用自执行函数代替闭包。
四、移动端点透
1、原因:
(1)300毫秒延迟:浏览器要观察用户是否进行第2次点击,进而判断用户是想单击页面,还是想双击放大页面。
(2)手指触摸屏幕,系统立即生成touch事件,300ms后生成click事件。如果touch执行的结果是该元素从文档树上消失,300ms后系统要触发click的时候,发现该元素的位置是a或input元素,那么把click事件作用在这个元素上面了。
2、解决方案:
(1)阻止默认事件

(2)定时器延迟

五、订阅-发布模式:
1、给DOM对象增加一个自定义事件属性:obj.selfEvent=[];
2、定义一个订阅(绑定)函数、多个自定义函数、一个发布函数
3、多次执行订阅(绑定)函数,把多个自定义函数放进(1)中的数组里
4、执行发布函数,找到自定义事件属性,遍历执行数组里的自定义函数
总之,在各个适当的位置,执行“订阅(绑定)函数”,把(自定义)函数放进DOM对象的属性数组,等待合适的时机用“发布函数”遍历执行。
六、JS中type="button"和type="submit"的区别
(1)type=submit 是发送表单,form.submit()作为其onclick后的默认事件,表单提交时,所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交,除了Submit对象
(2)type=button 就单纯是按钮功能;其没有默认事件。
七、DOMContentLoaded 和 window.onload 的区别
1、当页面(包含样式文件、图片文件、子框架页面(iframe))完全加载完毕后会触发 window.onload 事件,
2、当HTML文档加载并解析完毕(即DOM文档对象模型建成时)之后会马上触发DOMContentLoaded 事件。
八、如果不使用 async、defer,脚本将在页面完成解析时执行
1、async是 HTML5 中的新属性,仅适用于外部脚本(只有在使用 src 属性时)。
2、async,脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
3、defer IE支持defer属性,规定对脚本执行延迟到页面加载完为止。
4、调用$(fn),等于调用$().ready(fn),等于调用$(document).ready(fn)
5、不带 defer 或 async 属性,script标签阻止文档渲染,脚本会立即下载并执行。比如head里的js取不到body里的值。
九、Js三大事件
1、鼠标事件
(1)click:单击
(2)dblclick:双击
(3)mousedown:鼠标按下
(4)mouseup:鼠标抬起
(5)mouseover:鼠标悬浮
(6)mouseout:鼠标离开
(7)mousemove:鼠标移动
(8)mouseenter:鼠标进入
(9)mouseleave:鼠标离开
2、键盘事件
(1)keydown:按键按下
(2)keyup:按键抬起
(3)keypress:按键按下抬起
3、HTML事件
(1)load:文档加载完成
(2)select:被选中的时候
(3)change:内容被改变
(4)focus:得到光标
(5)resize:窗口尺寸变化
(6)scroll:滚动条移动
十、JS鼠标事件对象。鼠标、键盘和HTML都可以触发事件,由鼠标触发的事件,会自动向执行的函数传递一个对象,即鼠标事件对象。
来源:https://www.cnblogs.com/nield-bky/p/6081830.html
1、type:事件的类型,如onlick中的click;
2、srcElement/target:事件源,就是发生事件的元素;
3、button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键)
4、clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是 0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上document.body.scrollLeft和 document.body.scrollTop
5、offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置;
6、x,y/pageX,pageY:检索相对于父要素鼠标水平坐标的整数;
7、altKey,ctrlKey,shiftKey等:返回一个布尔值;
8、keyCode:返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代 )
9、fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素;
10、cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();)
11、returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();)
12、attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定 DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;
13、screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;
十一、服务器时间和当地时间互相转换

十二、Web Components特征
Web Components将一系列特性加入HTML和DOM规范,使得开发者可以自由创建在web应用或文档可重用的元素或部件,其由四部分组成:
HTML模板(HTML Templates):HTML内的DOM模板,在<template>元素内声明。
HTML导入(HTML Imports):定义在文档中导入其他HTML文档的方式;
自定义元素(Custom Elements):定义新HTML元素的一系列API;
影子DOM(Shadow DOM):组合对DOM和样式的封装;
十三、DOM元素的增删改查
1、增加:appendChild、insertBefore、setAttribute
2、删除:removeChild
3、改变:replaceChild
4、查找:getElementById、getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll
十四、javascript的onbeforeunload()和onunload()事件的相同与不同。
1、相同点:两者都是在对页面的关闭或刷新事件作个操作。
2、不同点:onbeforeunload()事件,在页面卸载之前触发,可防止误按F5,在这个事件里用localstorage存储数据,在onload事件里读取数据;onunbload()事件,在页面卸载之后触发;前者可以禁止后者发生。
十五、原生键盘事件
(1)onkeydown 按下一个按键时发生。
(2)onkeyup 释放一个按键时发生。
(3)onkeypress 按下并释放一个按键时发生。
(4)onfocus 获得焦点时发生。
十六、定时器的绑定与清除
var surplusTimeText = $("#surplusTimeText");
clearInterval(surplusTimeText.timer);
surplusTimeText.timer = setInterval(function () {}, 1000);
十七、获取对象的属性值
var obj = { name:'张三', 1:10000 };
console.log(obj['name']);
console.log(obj[1]);
十八、JavaScript中的变量分为基本类型和引用类型。
1、基本类型:基本类型,保存在栈内存中的简单数据段。有Undefined、Null、Boolean、Number 和String。这些类型在内存中分别占有固定大小的空间,他们的值保存在栈空间,通过按值来访问。基本类型在当前执行环境结束时销毁。
2、引用类型:引用类型,保存在堆内存中的对象。由Date、Array、Math、RegExp。值大小不固定,栈内存中存放地址(引用、指针、映射)指向堆内存中的对象。是按引用访问的。栈内存中存放的只是该对象的访问地址,在堆内存中为这个值分配空间。由于这种值的大小不固定,因此不能把它们保存到栈内存中。但内存地址大小的固定的,因此可以将内存地址保存在栈内存中。 这样,当查询引用类型的变量时, 先从栈中读取内存地址,然后再通过地址找到堆中的值。
引用类型不会随执行环境结束而销毁,只有当所有引用它的变量不存在时这个对象才被垃圾回收机制回收。
3、栈内存:存放基本类型。
4、堆内存:存放引用类型(在栈内存中存一个基本类型值保存对象在堆内存中的地址,用于引用这个对象。)
十九、数据下载之前端部分

二十、for循环的三种写法

二十一:根据typeof的结果,js有6中数据类型。除string外,其它数据取值,都不需要加引号,加引号后就变成了字符串。
1、null数据类型只有一个取值null,null是人为赋值给变量的,用于初始化或清空内存;
2、undefined数据类型只有一个取值undefined,undefined是默认赋值给(未被赋值的)变量的,让未被赋值的变量以这个值发挥作用。
3、boolean数据类型只有两个取值true和false,所以true和false可以出现在编程语句中
4、number数据类型有无数个取值,所以可以有无数个数字出现在编程语句中
5、string数据类型有无数个取值,所以可以有无数个字符串出现在编程语句中
6、object数据类型有无数个取值,所以可以有无数个对象出现在编程语句中
二十一、控制台常见显示的含义
1、控制台用“红”字报错为no defined,该变量没有出现过
2、控制台显示undefined,该变量出现了,但没被赋值。
3、控制台显示null,变量被赋值为null
4、控制台显示(空白),变量被赋值为(连空白都不占的)空字符串
二十二、以下结果皆为true
1、Boolean(undefined)===false
2、Boolean(null)===false
3、Boolean(0)===false
4、Boolean(NaN)===false
5、Boolean('')===false
二十三、HTML5 Blob 实现文件下载功能
1、创建a元素 var a = document.createElement('a');
2、创建当前文件的内存URL a.href = URL.createObjectURL(responseData.data);其中responseData为后台总返回值;
3、下载当前文件 a.download = responseData.headers('filename');
4、自动点击 a.click();
5、移除元素 $(a).remove();
二十四、script标签的defer属性和sync属性
1、defer:推迟即异步
2、sync:同步
二十五、与元素和鼠标相关的数据
来源https://www.cnblogs.com/ifworld/p/7605954.html
https://www.cnblogs.com/youziclub/p/4811069.html
1、元素自身(宽、高)
(1)style.height:元素仅内容的宽度;
(2)clientHeight:元素含内边距的宽度;
(3)offsetHeight:元素含边框的宽度;
(4)scrollHeight:元素含内边距和溢出的宽度;
2、元素以外(上、左)
(1)clientTop:元素上边框的高度;
(2)style.top:元素上边框上部距父级定位元素上边框下部之间的距离,如"50px",可读、可写;
(3)offsetTop:元素上边框上部距父级定位元素上边框下部之间的距离,如50,可读、不可写;
(4)scrollTop:窗口顶部被隐藏的高度;
3、鼠标事件(clientX、pageX、screenX、offsetX)
(1)clientX:鼠标相对于浏览器窗口(如果浏览器窗口最大化,则clientX==screenX);
(2)pageX:鼠标相对于网页(如果网页没有滚动条,则pageX==clientX);
(3)screenX:鼠标相对于显示屏;
(4)offsetX:鼠标相对于事件源边框;
4、jQuery中的height()、innerheight()、outerheight()的区别总结
(1)height():其高度范围是所匹配元素的高度height;
(2)innerheight():其高度范围是所匹配元素的高度height+padding;
(3)outerheight():其高度范围是所匹配元素的高度height+padding+border;
(4)outerheight(true)其高度范围是所匹配元素的高度height+padding+border+margin;
二十六、自执行函数的6种写法

二十七、在函数体内,要对参数进行利用,为了避免参数缺失或不合要求而导致程序运行出错,需要先用变量接收参数并进行处理,如果变量名和参数名相同,变量不必用var来声明,即

二十八、js模块化
1、commonJS是js模块化方案
2、后台通过node.js实现该方案
3、前端通过AMD(require.js)、CMD(sea.js)实现该方案

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复