JS零碎知识<1>

Ajax:即“Asynchronous Javascript And XML”,是无需重新加载整个网页,就能更新部分网页的技术。typeof的返回值首字母都是小写,比较时需要加引号。instanceof 后的类型首字母都是大写。obj.aaa,后面有等号时是赋值,无等号时是获取。
AngularJS 诞生于2009年,是一款优秀的前端JS框架。为Google所收购。
ReactJS 诞生于2013年,是一款优秀的前端JS框架。源于 Facebook 的内部项目。
VueJS 诞生于2014年,是一款优秀的前端JS框架。作者尤雨溪。
Vue.js:轻量高效的前端组件化方案
作者尤雨溪https://www.csdn.net/article/1970-01-01/2825439
一、js中__proto__和prototype的区别和关系
1.原型对象Foo.prototype保存着构造函数Foo实例共享的方法,有一个指针constructor指回构造函数Foo。
2.Foo的实例有属性(__proto__),指向构造函数的原型对象,这样实例就可以访问原型对象的所有方法。
二、编程方式
(1)面向过程编程:根据业务逻辑直接写代码。
(2)函数式编程:把运算过程封装成函数。
(3)面向对象编程:对函数进行分类和封装。
三、闭包:函数里面的函数被函数外面的变量引用,导致函数的作用域没法被释放,这种机制就叫闭包。

四、点透出现的原因:
(1)300毫秒延迟:浏览器要观察用户是否进行第2次点击,进而判断用户是想单击页面,还是想双击放大页面。
(2)手指触摸屏幕,系统立即生成touch事件,300ms后生成click事件。如果touch执行的结果是该元素从文档树上消失,300ms后系统要触发click的时候,发现该元素的位置是a或input元素,那么把click事件作用在这个元素上面了。

五、解决点透的方案:
1.阻止默认事件

2.定时器延迟

六、订阅-发布模式:
1、给DOM对象增加一个自定义事件属性:obj.selfEvent=[];
2、定义一个订阅(绑定)函数、多个自定义函数、一个发布函数
3、多次执行订阅(绑定)函数,把多个自定义函数放进(1)中的数组里
4、执行发布函数,找到自定义事件属性,遍历执行数组里的自定义函数
总之,在各个适当的位置,执行“订阅(绑定)函数”,把(自定义)函数放进DOM对象的属性数组,等待合适的时机用“发布函数”遍历执行。

附六:深克隆方法封装
来源:http://www.jb51.net/article/79707.htm

附七: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事件)会自动向执行的函数传递一个event对象。
来源: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:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;

一些说明:
1、event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;
2、event对象只在事件发生的过程中才有效。
firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。
在IE/Opera中是window.event,在Firefox中是event;而事件的对象,在IE中是 window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。
3、下面两句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event为null, IE下event为null
4、IE中事件的起泡
IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如, div 标签包含了 a ,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行标签 a 的onclick事件处理函数,再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后,不希望执行上层的 div 的onclick的事件处理函数了,那么就把cancelBubble设置为true即可。
js event.keyCode对应的键码:

附十三:服务器时间和当地时间互相转换

附十三、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循环的三种写法

附二十一、事件参数
<div onclick="myFunction(event,'event')"></div>
<div ng-click="myFunction($event, myInput.value)"></div>
abc.onclick=function(event){//这里的event是事件参数,一般情况下这里是没有参数的}

二十四:aaaa==undefined或typeof aaaa=="undefined"
js根据typeof的结果,有6中数据类型(结果本身全是字符串类型,且首字母也为小写)
1、null数据类型只有一个取值null,null是人为赋值给变量的,用于初始化或清空内存;
2、undefined数据类型只有一个取值undefined,undefined是默认赋值给(未被赋值的)变量的,让未被赋值的变量以这个值发挥作用。
3、boolean数据类型只有两个取值true和false,所以true和false可以出现在编程语句中
4、number数据类型有无数个取值,所以可以有无数个数字出现在编程语句中
5、string数据类型有无数个取值,所以可以有无数个字符串出现在编程语句中
6、object数据类型有无数个取值,所以可以有无数个对象出现在编程语句中
另,除string外,其它数据取值,都不需要加引号,加引号后就变成了字符串。
1、console.log(aa);控制台用红字报错为no defined,没被定义即没有出现过
2、var aa; console.log(aa); 控制台显示为undefined,没被阐明(说清楚)即出现了但没被赋值
3、var aa=null; console.log(aa); 控制台显示为null,被赋值为null
4、var aa=''; console.log(aa); 控制台显示为(空白),被赋值为(连空白都不占的)空字符串,有别于var aa='&nbsp;&nbsp;&nbsp;'

二十五、其他类型值转换成布尔值
其他类型值 转换成的布尔值
undefined false
null false
布尔值 不用转换
数字 0,NaN转化成false,其他数字类型转换成true
字符串 只有空字符串''转换成false,其他都转换成true
对象 全部转换为true

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

赶紧努力消灭 0 回复