javascript高级程序设计总结二

一、面向对象的程序设计

1. 属性类型

// 1.数据属性 object.defineproperty(属相所在的对象，属性名，（4种）)let person = {};Object.defineProperty(person, "name", {configurable: true,  //表示能否通过delete删除属性从而重新定义属性，能否修改属性enumerable: true,  //表示能否通过for-in循环返回属性writable: true,  // 表示是否能修改属性的值value: "xujiang" // 属性的值})/* 在调用Object.defineProperty()方法创建一个新属性时，如不指定前三个属性字段，默认值都为false, 如果是修改已定义的属性时，则没有此限制 */// 2.访问器属性get/setlet person = {name: "xujaijgn", year: 11};Object.defineProperty(person, "_name", {get: function(){return this.name},// 定义Set时，则设置一个属性的值时会导致其他属性发生变化set: function(newValue){this.name = newValue;this.year = 12;}})// 定义多个属性
Object.defineProperties(book, {_year: {writable: false,value: 2001},year: {get: function(){return _year},set: function(newValue){this._year = newValue;}}
})

2.创建对象

    原型理解：1.isPrototypeOf()-------确认对象之间有没有原型关系2.Object.getPrototypeOf()-------获取实例对象的原型3.我们不能通过实例重写原型中的值，只能访问，并且如果实例和原型有相同的属性名，则会覆盖原型中的属性。4.hasOwnProperty()-----检测一个属性是否在实例中5.原型与in操作符：“name" in person:对象能访问到给定属性时返回true6.Object.key(obj)---返回一个可以包含所有可枚举的属性7.Object.getOwnPropertyNames() ---返回所有的实例属性，包括不可枚举的8.实例中的指针只指向原型，而不是构造函数。 var person1=new Person() 那person1中的指针只指向Person.prototype 即 person1._proto_=Person.prototype

组合（构造函数模式和原型模式）：用构造函数定义实例属性，用原型定义方法和共享属性。

3.继承

1.原型链的问题1.包含引用类型值的原型属性会被所有实例共享，在通过原型实现继承时，原型实际上会变成另一个类型的实例，原先的实例属性变成了现在的原型属性。2.在创建子类型的实例时，无法向父类构造函数传递参数function Parent(name){this.name=name;
}
function  Child(){
}
Child.prototype=new Parent('zhangsan');
var p=new Chlid();//构造出来子类的实例没有办法向父类传参。
p.name;//可以继承父类的属性和方法2.借用构造函数（在子类型构造函数的内部调用父类构造函数）//此时实例不会共享属性function Parent(name){this.colors = [1,3,4];this.name = name;}function Child(name){Parent.call(this, name);//但是实例化的子类能向父类传参。this.age = 12;}// 存在的问题： 1.函数无法复用 2.父类的原型对于子类是不可见的，子类不能继承原型上的属性和方法3.组合继承（使用原型链继承原型属性和方法，使用借用构造继承实例属性） ---最常用的继承模式缺点：无论如何都会调用两次父类构造函数// 父类function Parent(name){this.name = "xujaing";this.age = 12;};Parent.prototype.say = function() { console.log(this.age) };// 子类继承父类function Child(name){Parent.call(this, name);//1this.age = 13;}Child.prototype = new Parent();//2Child.prototype.constructor = Child;Child.prototype.say = function() { alert(this.age) };4.原型式继承实现1.function object(o){function F(){};F.prototype = o;return new F()}实现2.通过Object.create(prototype, properties) // 第一个参数为创建新对象原型的对象，第二个参数为对新对象定义额外属性的对象（和defineProperties方法的第二个参数格式相同）A=Object.create(person, {//A._proto_=Personname: {value: "xujiang"}})
5.寄生组合式继承（通过借用构造函数继承属性，通过原型链混成的方式继承方法）---最理想的继承范式function inheritPrototype(sub,sup){let prototype = Object.create(sup.prototype);//prototype._proto_=sup.prototypeprototype.constructor = sub;sub.prototype = prototype;}function Sup(){}Sup.prototype.say = function(){}function Sub(arg){// 关键Sup.call(this,arg);//var sub=new sup()}// 关键inheritPrototype(Sub, Sup);

二、函数表达式

闭包与变量

闭包：可以访问定义它们的外部函数的参数和变量（除了this和arguments）。
闭包的优点：封装私有变量，形成块级作用域。
缺点：内存泄漏占用内存。

function a(){let el = $("#el");let id = el.id;el.click(function(){alert(id)})// 清空dom,释放内存el = null;
}

三、BOM对象

Location对象：
// location即是window对象的属性也是document对象的属性
1. hash // "#contents" 返回url的hash,如果不包含返回空
2. host // "www.wrox.com:80" 返回服务器名称和和端口号
3. hostname // "www.wrox.com" 返回不带端口号的服务器名称
4. href // 返回当前加载页面的完整url
5. pathname // "/a/" 返回url中的目录或文件名
6. port // "8080" 返回url中指定的端口号
7. protocol // "http" 返回页面使用的协议
8. search // "?q=java" 返回url中查询字符串，以问号开头navigator对象：
navigator.language // "zh-CN" 浏览器的主语言
navigator.appName  // "Netscape" 完整的浏览器名称
navigator.appVersion // 浏览器的版本
// 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36
navigator.cookieEnabled // true 表示cookie是否启用
navigator.javaEnabled() // 表示浏览器是否启用java
navigator.onLine // true 表示浏览器是否连接到了因特网
navigator.platform // "Win32" 浏览器所在的系统平台
navigator.userAgent // 浏览器用户代理字符串
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
navigator.plugins // 检测浏览器中安装的插件的数组
history对象：
1. history.go(0 | [123] | -1 | str) // 如果是Str,则会跳转到历史记录中包含该字符串的第一个位置
2. history.back() //后退一页
3. history.forward() //前进一页
4. history.length // 保存着历史纪录的数量

四、DOM对象

1.将对象转化成数组 Array.prototype.slice.apply(arguments,[0]);
2.将字符串转化成数组：str.split(’ ')//split转化成字符串数组

1.appendChild() //用于向childNodes末尾添加一个节点，返回新增的节点，如果节点已存在，那么就是从原来的位置移动到新位置
2.insertBefore() //将节点插入指定位置，接收两个参数，要插入的节点和作为参照的节点，返回插入的节点
3.replaceChild() //替换指定节点，接收2个参数，要插入的节点和要替换的节点，返回被移除的节点
4.removeChild() //移除节点，返回被移除的节点
5.cloneNode([true]) //参数为true,执行深复制，复制节点及整个子节点，为false时复制节点本身。cloneNode不会复制节点的javascript属性，但IE在此存在一个bug,所以建议在复制之前最好先移除事件处理程序

document类型：
1. document的节点类型nodeType的值为9；
2. document.documentElement // 取得对<html>的引用
3. document.body // 取得对body的引用
4. document.title // 取得文章标题
5. document.title = "xxx" //设置文章标题
6. document.URL //取得完整的url
7. document.domain //取得域名
8. document.referrer //取得来源页面的url

element类型：
1.nodeType值为：1
2.nodeName的值为元素标签名
3.tagName // 元素标签名，返回大写值，比较时一般采用 element.tagName.toLowerCase()
4.取得元素属性 getAttribute() / setAttribute() / removeAttribute()
// 注：自定义属性通过点语法访问时会返回undefined
5.attributes // 获取元素的属性集合，访问方法： element.attributes[i].nodeName / element.attributes[i].nodeValue
6.创建元素 // document.createElement("div" | "<div class=\"box\">aaa</div>")
7.创建文本子节点 // document.createTextNode("Hello world")

五、元素大小

1.偏移量

offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body
offsetHeight：元素在垂直方向上占用的空间大小。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。（不包括外边框margin）
offsetWidth：元素在水平方向上占用的空间大小。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度号右边框宽度。
offsetLeft：元素的左外边框至父元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至父元素的上内边框之间的像素距离。

2.客户区的大小

clientWidth：元素内容区宽度加上左右内边距宽度。可以通过document.body。clientWidth来获取浏览器视口的大小。
clientHeight：元素内容区高度加上上下内边距高度

3.滑动大小

scrollHeight：元素内容的实际总高度
scrollWidth：元素内容实际总宽度
scrollLeft：被隐藏的内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动的位置
scrollTop：被隐藏的内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置

六、事件

1.事件对象event

1. 属性或方法type // 被触发的事件类型target // 事件的目标 触发事件的元素licurrentTarget // 事件处理程序当前正在处理事件的那个元素 邦定事件的元素ul注： 在事件处理程序内部，对象this始终等于currentTarget的值，而target只包含事件的实际目标*** 一个函数处理多个事件可以使用switch(event.type)的方式event.preventDefault() // 阻止事件的默认行为event.stopPropagation() // 阻止事件冒泡

2.事件类型

1.鼠标和滚轮事件1.客户区坐标位置clientX/clientY  //表示事件发生时鼠标指针在视口中的水平和垂直位置2.页面坐标位置 pageX/pageY  //表示事件在页面中发生的位置3.屏幕坐标位置 //获取事件发生时在屏幕中的位置2.修改键(如果用户在触发事件时按下了shift/ctrl/alt/Meta,则返回true)event.shiftkey | event.altKey | event.metaKey | event.ctrlKey3.鼠标按钮(event.button)
// 对于mousedown和mouseup,其event中存在一个button属性，值为0表示主鼠标按钮，1表示中间鼠标按钮，2表示次鼠标按钮4.鼠标滚轮事件（mousewheel）1.兼容方案：let getWheelDelta = function(event){let wheelDelta = event.wheelDelta ? event.wheelDelta : (-event.detail * 40);return wheelDelta}*** 注：document在普通浏览器中通过mousewheel监听鼠标滚轮事件，在火狐中使用DOMMouseScroll监听5.键盘与文本事件
6.变动事件1.DOMSubtreeModified | DOMNodeInserted | DOMNodeRemoved*例子el.addEvent("DOMSubtreeModified", fn1)7.HTML5事件1.contextmenu事件（自定义上下文菜单）2.DOMContentLoaded事件（在形成完整dom树之后就触发，不理会图像，js文件，css文件等资源是否下载完成）3.hashchange事件（在URL的参数列表发生变化【即#号后面的所有字符串】时触发）注：必须要把hashchange添加给window对象，event对象包含两个属性oldURL和newURL,分别保存着参数列表变化前后的完整URL  vue的路由就是这个机制 通过haschange来监听url的变化，实现url改变但是不刷新页面的多页面的效果// 例子window.addEvent("hashchange", function(event){// oldURL和newURL存在兼容问题，最好用location.hash代替console.log(event.oldURL, event.newURL);})

3.性能问题

当你卸载页面时，事件处理占用的内存没有释放。所以在卸载之前通过unonload事件移除所有事件的处理程序。并且不会保存在缓存中。

七、跨域文档传递iframe

// 源页面
window.onload = function(){// 获取源页面iframe的内容window对象var iframeWindow = document.querySelector("#iframe").contentWindow;// 向iframe发送消息，并指定源的地址，两个参数必填iframeWindow.postMessage("xujiang", "http://127.0.0.1:5500");var mesWrap = document.querySelector(".mes-wrap");// 接收iframe传来的消息window.addEventListener("message",function(e){// alert(e.data);mesWrap.innerHTML = e.data;iframeWindow.postMessage("你叫什么？", "http://127.0.0.1:5500");},false);
}// iframe页面，监听其他域传来的消息
window.addEventListener("message",function(e){// 向发送消息的域反馈消息，event对象的属性如下：// data 传入的字符串数据// origin 发送消息的文档所在的域// source 发送消息的文档的window的代理e.source.postMessage("hello", "http://127.0.0.1:5500");
},false);

八、ajax和cors

// ajax
var xhr = new XMLHttpRequest(); // 创建xhr对象// 第一个方法：open(get | post等, "exam.php", false) 参数为请求类型,请求url,是否异步的boolean
xhr.open("get","exam.php", false); // 调用该方法并不是真正的请求，而是请求一个请求以备发送// 发送真正的请求，接收一个参数，即作为请求主体要发送的数据，不发送数据时必须传递null,因为对于某些浏览器来说该参数是必须的
xhr.send(null)// 检验响应的状态--->针对同步
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){var data = xhr.responseText;
}else{console.log(xhr.status);
}// 异步方案
xhr.onreadystatechange = function(){// xhr.readyStatus表示请求/响应过程的当前活动阶段// 0 未初始化，还没调用open()// 1 启动，已调用open()方法但未调用send()// 2 发送， 已调用send()方法，但未收到响应// 3 接收，已接收到部分响应数据// 4 完成，已接受到全部响应数据if(xhr.readyStatus == 4){if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){var data = xhr.responseText;}else{console.log(xhr.status);}}
}
xhr.open("get","exam.php", false);
xhr.send(null);// 在接收到响应之前还可以取消异步请求
xhr.abort() // 在停止请求之后还应该进行解引用操作，防止内存堆积// 设置http请求头，必须放在open和send中间
xhr.open("get","exam.php", false);xhr.setRequestHeader("accept", "application/json; charset=utf-8")xhr.send(null);// 获取响应头信息
xhr.getResponseheader("accept");
xhr.getAllResponseHeaders();// get请求：向现有url中添加查询字符串
function addUrlParam(url, name, value){url += (url.indexOf("?") == -1 ? "?" : "&");url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
}// post请求：模拟表单提交
xhr.open("get","exam.php", false);
// 设置提交时的内容类型
xhr.setRequestHeader("content-Type", "application/x-www-form-urlencoded")
// 假设表单form对象已获取
xhr.send(serialize(form));// XHR2级 -- formData --序列化表单以及创建和表单格式相同的数据（用于通过xhr传输）
var data = new FormData();
data.append(key,value);
// 也就可以用表单元素的数据预先填入数据
var data = new FormData(document.forms[0]);
//使用FormData的好处在于不必明确地在xhr上设置请求头部
xhr.send(new FormData(form));// 进度事件
loadStart/progress/error/abort/load// 跨域资源共享CORS
核心思想： 使用自定义的http头部让浏览器和服务器进行沟通，从而决定请求是成功还是失败
原理：
1.请求头指定源：Origin: http://www.baidu.com
2.如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部回发相同的源信息
Access-Control-Allow-Origin：http://www.baidu.com
（如果是公共资源，可以回发“*”）
3.如果没有这个头部，或者有这个头部但是源信息不匹配，浏览器就会驳回请求// 主流浏览器对cros的实现方式： 在url中使用绝对路径，但有限制：不能设置自定义头部，不能发送和接收cookie,获取不到getAllResponseHeaders()的返回值// 带凭据的请求
withCredentials属性设置为true
// 服务器接收到带凭据的请求后，会用下面的头部来请求，如果响应不包含这个头部，浏览器将不会把响应数据交给js
Access-Control-Allow-Credentials: true// 跨浏览器的cros
function createCORSRequest(method,url){var xhr = new XMLHttpRequest();if("withCredentials" in xhr){xhr.open(method,url,true);}else if(typeof XDomainRequest != "undefined"){xhr = new XDomainRequest();xhr.open(method,url);}else{xhr = null;}return xhr
}
var req = createCORSRequest("get","http://www.baidu.com/page/");
if(req){req.onload = function(){// 对响应数据进行处理};req.send();
}
// 以上提供的公共方法有
// abort() 用于停止正在进行的请求
// onerror 用于替代onreadystatechange检验错误
// onload 用于替代onreadystatechange检验成功
// responseText 用于取得响应内容
// send() 用于发送请求// 其他跨域技术
1.图像ping---常用于跟踪用户点击页面和动态广告曝光数，只能get请求var img = new Image();img.onload = img.onerror = function(){// 操作}img.src = "http://baidu.com?name=xujaing";2.JSONP---可以直接访问响应文本，可以在浏览器和服务器之间进行双向通信，但有安全隐患function handleResponse(data){console.log(data);}var script = document.createElement("script");script.src = "http://a.net/json/?callback=handleResponse";document.body.insertBefore(script, document.body.firstChild);3.Comet (服务器推送SSE)常用的技术有长轮询和流
4.Web Sockets

九、高级技巧

1.高级函数

1.Object.prototype.toString.call(value) == "[object Array]";//检测数据类型
2.//原生实现bind 柯理化思想
//1.this 指向 apply /call2.参数形式 可以通过call（参数多）和apply实现（apply更方便）3.返回一个待执行的函数 闭包
function testBind(that){var _this=this;var args=Array.prototype.slice.apply(arguments,[1]);//通过slice将arguments转换成数组，取得bind的除第一个参数以外的参数return function(){return _this.apply(that,args.concat(Array.prototype.slice.apply(arguments,[0])))
}}

2.高级定时器

//防抖
function decouce(fn,wait){
var timer=null;
return function(){
clearTimeout(timer);
var timer=setTimeout(()=>{fn();},wait);
}
}
//节流
function throttle(fn,time,wait){
var pre=null;
var timer=null;
var now=new Date();
if(pre==undifined) pre=now;
if(now-pre>time){clearTimeout(timer);fn();pre=now;
}else{//小于time那么在wait内再执行一次
clearTimeout(timer)timer=setTimerout(()=>{fn();
},wait)
}
}

十、新的API

1.requestAnimationFrame():计时器不需要设置时间间隔，比其他两种精准

(function(){function draw(timestamp){// 计算两次重绘的时间间隔var drawStart = (timestamp || Date.now()),diff = drawStart - startTime;// 使用diff确定下一步的绘制时间// 把startTime重写为这一次的绘制时间startTime = drawStart;// 重绘UIrequestAnimationFrame(draw);}var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,startTime = window.mozAnimationStartTime || Date.now();requestAnimationFrame(draw);
})();

https://www.cnblogs.com/AI-fisher/p/11178130.html
https://zhuanlan.zhihu.com/p/84326290