javascript高级程序设计pdf,javascript 高级程序设计_javascript高级程序设计 pdf

一、面向对象的程序设计

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/set
    let 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:对象能访问到给定属性时返回true
     6.Object.key(obj)---返回一个可以包含所有可枚举的属性
     7.Object.getOwnPropertyNames() ---返回所有的实例属性，包括不可枚举的
     8.实例中的指针只指向原型，而不是构造函数Python中的所有运算符号。 var person1=new Person() 那person1中的指针只指向Person.prototype 即 person1._proto_=Person.prototype   

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

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);//1
        this.age = 13;
    }
    Child.prototype = new Parent();//2
    Child.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_=Person
        name: {
            value: "xujiang"
        }
    })
5.寄生组合式继承（通过借用构造函数继承属性，通过原型链混成的方式继承方法）---最理想的继承范式
    function inheritPrototype(sub,sup){
        let prototype = Object.create(sup.prototype);//prototype._proto_=sup.prototype 
        prototype.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不会复制节点的java属性，但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 // 事件的目标 触发事件的元素li
    currentTarget // 事件处理程序当前正在处理事件的那个元素 邦定事件的元素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.ctrlKey
 
3.鼠标按钮(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  = document.createElement("");
    .src = "http://a.net/json/?callback=handleResponse";
    document.body.insertBefore(, 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;
 
        // 重绘UI
        requestAnimationFrame(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