46JS零碎知识1

Ajax 是一种在无需重新加载整个网页的情况下，就能更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 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)阻止默认事件
```javascript:run
ele.addEventListener("touchend",function (event) {
    ele.style.display="none";
    event.preventDefault();
});
//以下zepto的tap事件点透解决
ele.on("touchend", function (e) {
    $("#alertBox").hide();
    e.preventDefault();
});
```
(2)定时器延迟
```javascript:run
ele.addEventListener("touchend",function (event) {
    setTimeout(function () {
        ele.style.display="none";
    },400);
});
//以下zepto的tap事件点透解决
ele.on("touchend", function () {
    setTimeout(function () {
        $("#alertBox").hide();
    }, 350);
});
```
五、订阅-发布模式：
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：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；
十一、服务器时间和当地时间互相转换
```javascript
function addZero(number) {
    return (number.toString())[1] ? number : '0' + number;
}
function toLocaleDateTime(serverTime){
    //getTimezoneOffset() 方法可返回格林威治时间和本地时间之间的时差，以分钟为单位，东经为负。
    var timeZoneMilliSeconds=new Date().getTimezoneOffset()*60*1000;//北京在东八区，时差为：-(60 X 8)= -480（分钟）
    var serverMilliSeconds=new Date(serverTime).getTime();
    var localeMilliSeconds=serverMilliSeconds-timeZoneMilliSeconds;
    var localeDateTime=new Date(localeMilliSeconds);
    var localeYear=localeDateTime.getFullYear();
    var localeMonth=addZero(localeDateTime.getMonth());
    var localeDate=addZero(localeDateTime.getDate());
    var localeHours=addZero(localeDateTime.getHours());
    var localeMinutes=addZero(localeDateTime.getMinutes());
    var localeSeconds=addZero(localeDateTime.getSeconds());
    return localeYear+"年"+(localeMonth+1)+"月"+localeDate+"日 "+localeHours+"时"+localeMinutes+"分"+localeSeconds+"秒"
}
function toServerDateTime(localeDateTime){
    var timeZoneMilliSeconds=new Date().getTimezoneOffset()*60*1000;
    var localeMilliSeconds=new Date(localeDateTime).getTime();
    var serverMilliSeconds=localeMilliSeconds+timeZoneMilliSeconds;
    var serverDateTime=new Date(serverMilliSeconds);
    var serverYear=serverDateTime.getFullYear();
    var serverMonth=addZero(serverDateTime.getMonth());
    var serverDate=addZero(serverDateTime.getDate());
    var serverHours=addZero(serverDateTime.getHours());
    var serverMinutes=addZero(serverDateTime.getMinutes());
    var serverSeconds=addZero(serverDateTime.getSeconds());
    return serverYear+"-"+serverMonth+"-"+serverDate+" "+serverHours+":"+serverMinutes+":"+serverSeconds
}
```
十二、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、堆内存：存放引用类型（在栈内存中存一个基本类型值保存对象在堆内存中的地址，用于引用这个对象。）
十九、数据下载之前端部分
```javascript
then(function (data) {
    var blob = data.data;
    var a = document.createElement('a');
    /*document.body.appendChild(a);*/
    a.download = 'pcaps';//用于指定文件名
    a.href = URL.createObjectURL(blob);//创建一个新的对象URL
    a.click();
    /* $(a).remove();*/
});
```
二十、for循环的三种写法
```javascript
for (语句 1; 语句 2; 语句 3){
    //被执行的代码块
    //语句1：在循环前执行
    //语句2：循环的条件
    //语句3：在循环后执行，缺失不会报错
}
for(var i=0;i<10;i++){
    console.log(i);
    //如果我们用for循环要输出0到9，我们可以这么写
}
for(var i=10;i-=2;){//循环条件（为真时）、循环方式（递减），合二为一
    console.log(i);
    //在语句2中，如果返回true循环会继续执行。在js中0,null,undefined,false,'',””作为条件判断时，其结果为false，也就说当i--到0的时候就是false，循环就终止了。
}
for (var i = 0, rule; rule = rules[i++];) {
    //var i = 0, rule; 这是声明变量，是语句1,在循环前执行;
    // rule = rules[i++];这是循环的条件，是语句2;当成为undefined时就会终止循环。
}
```
二十一：根据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种写法
```javascript
(function (){console.log()})();
(function (){console.log()}());
!function (){console.log()}();
~function (){console.log()}();
void function (){console.log()}();
var fn=function (){console.log()}();
```
二十七、在函数体内，要对参数进行利用，为了避免参数缺失或不合要求而导致程序运行出错，需要先用变量接收参数并进行处理，如果变量名和参数名相同，变量不必用var来声明，即
```javascript:run
function fn(param){
  param=param || ''
  //或
  var myParam=param || ''
}
```
二十八、js模块化
1、commonJS是js模块化方案
2、后台通过node.js实现该方案
3、前端通过AMD(require.js)、CMD(sea.js)实现该方案

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10966936.html