JS零碎知识

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,一个是click,touch先执行,touch执行完成后,如果A从文档树上面消失了,那么300ms后,系统要触发click的时候,发现在用户点击的位置是B(a或input)元素,所以就直接把click事件作用在B元素上面了。
四(3)怎样解决点透:当一个用户在点击屏幕的时候,系统会触发touch事件和click事件,touch事件优先处理,在touch事件里面,调用e.preventDefault()以阻止触发系统默认的click事件,或者使用定时器让A在400ms后消失以使click事件失效。
五、解决点透的代码
1.

2.

附六:深克隆方法封装
来源: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里的值。
附十二:jQuery反选

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

附十三、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是事件参数,一般情况下这里是没有参数的}

附二十二、函数里的this

附二十三、冒泡与默认事件
1、阻止冒泡
1.event.stopPropagation();
2.e.cancelBubble=true;
2、阻止事件默认事件
1.event.preventDefault();
2.e.returnValue = false;//ie方法

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

赶紧努力消灭 0 回复