Javascript高级程序设计-笔记_javascript高级程序设计对于实际开发哪些内容比较重要

Javascript高级程序设计

3.基本概念

• === 全等符号，要求类型和值均想等
• switch判断时使用的是全等符号
• 参数
  
  • arguments
    
    • arguments.callee(严格模式禁用)
    • arguments.caller(严格模式禁用)
  • arguments为类数组对象(Array-like object)，结构类似于 {0:’Z’, 1:’a’, 2:’b’, 3:’c’}
    
    • 类数组对象拥有类似数组的结构，所以它可以使用大多数数组的方法
    • 对类数组对象使用Array.isArray()返回false
    • 通过Array.prototype.slice.call(arguments)来将其转化为真正的数组
• 声明提前
  
  • 注意
    
    • 如果是多次使用function funcName(){}的语法声明函数则以最后为准
    • 但是如果是使用var funcName = function(){}语法则funcName在随时改变
    • 注意体会这两种方法的区别

4.变量、作用域和内存问题

• ECMAScript中所有函数的参数都是按值传递的
  
  • 对于基本类型，修改参数并不会对参数本身造成影响
  • 对于Object类型，传参过程中传递的实际上是引用值（可想象为传递的是地址），这个地址就是这个参数的值，所以对对的属性进行操作会作用到源对象；但是如果为参数赋予新对象，则不会对源对象产生任何影响，因为对参数赋值为新对象只是更新参数的地址，而并未更新源对象的地址
• var声明的变量是函数级的，let声明的变量是块级的，不使用保留字声明的变量是全局的（一般是附属到window对象）
• javascript中的GC
  
  • 标记清除法
  • 引用计数

5.引用类型

• 数组
  
  • 数组的length是可写的，所以可以通过直接设置length的值来移除数组末尾的项或者添加项（直接添加到指定位置）
  • join()方法 使用指定分隔符连接字符串
  • sort()方法 接受比较函数对数组元素排序，若无比较函数则按从小到大排序
  • splice()方法 splice(起始位置，要删除的项数，插入元素1,插入元素2,…)
• RegExp 正则表达式
• function
  
  • 函数是对象，函数名是指针
  • call(object, arguments[0], arguments[1], …)
  • apply(object, arguments)

6.面向对象的程序设计

• 对象属性
  
  • 数据属性
    
    • 特性
      
      • [[Configurable]] 表示能否通过delete删除属性 默认为true
      • [[Enumerable]] 表示能否通过for-in循环返回属性 默认为true
      • [[Writable]] 表示能否修改属性的值 默认为true
      • [[Value]] 包含这个属性的数据值，即数据的写入位置 默认为undefined
    • 可以直接定义也可以使用Object.defineProperty()定义，defineProperty的使用见下面访问器属性的实例，只要替换相关特性即可
  • 访问器属性
    
    • 包含getter/setter
      
      • 再读取访问器属性时调用getter，在写入访问器属性时调用setter
    • 特性
      
      • [[Configurable]] 表示能否通过delete删除属性 默认为true
      • [[Enumerable]] 表示能否通过for-in循环返回属性 默认为true
      • [[Get]] 在读取属性时调用的函数，默认值为undefined
      • [[Set]] 在写入属性时调用的函数，默认值为undefined
    • Vue.js通过访问器属性实现了双向数据绑定，所以IE8及以下浏览器均不支持
    • 访问器属性不能直接定义，必须使用Object.defineProperty()来定义，示例如下

function Person() {
        var name = 'default';
        this.age = 23;
        Object.defineProperty(this, "name", {
            get: function() {
                return name;
            },
            set: function(newName) {
                console.log(y);
                name = newName;
            },
            enumerable: true,
            configurable: true, //这两项见Javascript高级程序语言读书笔记Blog
        });
    }
//访问
var p = new Person();
console.log(p.name); //'default'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 继承过程

function subType(){
    superType.call(this);
    /*balabala...*/
}
subType.prototype = new superType();
subType.prototype.*** = function(){
    /*balabala...*/
}
1
2
3
4
5
6
7
8

7.函数表达式

• 闭包是指有权访问另一个函数作用域中的变量的函数

8.BOM(浏览器对象模型)

• 队列只保证在指定时间将任务添加到队列中而不能保证运行，如果当前队列中有任务在运行，则新添加的任务需要等之前任务全部运行完再开始运行

9.客户端检测

• 要尽量使用typeof进行能力检测

10.DOM

• DOM1级定义了一个Node接口，该接口由DOM中的所有节点类型实现。这个Node接口在Javascript中是作为Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型
• 每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。这个对象是根据DOM结构动态执行查询的结果
• 每个节点都有parentNode属性，只想文档树中的父节点
• 访问邻居节点使用previousSibling和nextSibling属性
• 如下五个方法不会返回元素间空格导致的文本节点(例如
  之间的空格会被当做一个文本节点)
  
  • childElementCount
  • firstElementChild
  • lastElementChild
  • previousElementChild
  • nextElementChild

13.事件

• 事件捕获阶段->目标截断->事件冒泡阶段 DOM2级(IE8及以前不支持)
• DOM0级事件处理 btn.onclick = function(){};
• DOM2级事件处理 btn.addEventListener(‘click’, function(){}, false);
  
  • 最后一个false代表是否在捕获阶段执行。此处为false，代表在冒泡阶段执行，否则为捕获阶段
  • 此方法在IE/Opera中为attachEvent和detachEvent，默认在冒泡阶段执行，因为IE8以及之前的浏览器不支持事件捕获
• event.stopPropagation()用于取消事件进一步冒泡
• document.implementation.hasFeature(‘MouseEvent’, ‘2.0’)用于检测是否有相应的事件存在
• 事件委托

21.Ajax

• XHR
  
  • 新建对象方法
    
    • IE - ActiveXObject
    • Others - XMLHttpRequest
  • 接收到响应之前可以使用xhr.abort()来取消异步请求
  • 不建议重用xhr对象，有内存泄漏风险
  • XHR用法

xhr = new XMLHttpRequest();
xhr.onreadystatechane = function(){
    /*
        if判断当xhr.readyState==4(即接收完成)时，则执行某些操作
    */
    };
xhr.open('get', url, false); //最后一个参数代表是否采用同步方式执行
xhr.send(null);
1
2
3
4
5
6
7
8

• HTTP
  
  • Request头部信息
    
    • Accept 浏览器能够处理的内容类型
    • Accept-Charset 字符集
    • Accept-Encoding 压缩编码
    • Accept-Language 浏览器当前设置的语言
    • Cache-control
    • Connection 浏览器与服务器之间的连接类型 (keep-alive)
    • Cookie
    • Host 发出请求的页面所在的域
    • Referer 发出请求的页面的URI
    • User-Agent
  • Response头部信息
    
    • Cache-control
    • Content-length
    • Content-type
    • Date
    • Last-modified
• CORS(Corss-Origin Resource Sharing, 跨域资源共享)
  
  • 微软IE8引入XDomainRequest，其他浏览器的XHR已经对CORS原生支持
    
    • 不能发送接受cookie
    • 不能使用setRequestHeader()设置自定义头部
    • 以此保证跨域安全
  • Preflighted Request
  • JSONP
    
    • 本地自定义函数，服务器根据指定的函数名返回相应的函数调用，示例如下

function handleCallback(res) {
    console.log(res);
}
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleCallback';
document.body.insertBefore(script, document.body.firstChild);
1
2
3
4
5
6

    其中JSONP接口返回的内容如下，即作为插入到代码中执行的部分，API接口内容作为参数传入
1

handleCallback({
    ip: "219.239.227.229",
    country_code: "CN",
    country_name: "China",
    region_code: "11",
    region_name: "Beijing",
    city: "Beijing",
    zip_code: "",
    time_zone: "Asia/Shanghai",
    latitude: 39.9289,
    longitude: 116.3883,
    metro_code: 0
})  //即调用了我们设置的函数handleCallback
1
2
3
4
5
6
7
8
9
10
11
12
13

• Comet
  
  • 基于长轮询的服务器’推’技术
  • 客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求
• HTML5 - Web Socket
  
  • WebSocket不支持DOM2级事件监听器，因此必须使用DOM0级语法
  • 使用方法

var socket = new WebSocket('ws://api.com/api/get/id')   //此处ws开头为指定的websocket协议
socket.onmessage = function(event){var data = event.data};
socket.onopen = function(){};
socket.onerror = function(){};
socket.onclose = function(){};
1
2
3
4
5

• CSRF

22.高级技巧

• 函数的惰性载入
• curry化函数
• 防篡改对象
  
  • Object.preventExtensions(o) 不能再为对象添加新属性和新方法
  • Object.seal(o) 不能添加和删除属性/方法，但是属性值是可以修改的
  • Object.freeze(o) 冻结对象的数据属性[[Writable]]特性会被设置为false；如果定义了访问器属性[[Set]]，访问器属性则仍是可写的
  • 以上三个防篡改级别的强度依次递增
• Javascript中没有任何代码是立刻执行的，但一旦进程空闲则尽快执行
• 大量数据采用数组分块处理-防止循环占用大量时间导致浏览器无响应

setTimeout(function(){
    //var item = array.shift();
    process(item);

    if (array.length > 0){
        setTimeout(arguments.callee, 100);
    }
}, 100);
1
2
3
4
5
6
7
8

• 函数节流
  
  • 思想
    
    • 某些代码不可以在没有时间间断的情况连续重复执行
  • 代码结构如下

var processor = {
    timeoutId: null,
    performProcessing: function(){
        //实际执行代码
    }, 
    process: function(){
        clearTimeout(timeoutId);
        this.timeoutId = setTimeout(() => {
            this.performProcessing()
        }, 100);
    }
}
processor.process();
1
2
3
4
5
6
7
8
9
10
11
12
13

• 使用concat克隆数组
  
  • 不传入参数即可
  • var cloneArr = arr.concat()
• 自定义事件
  
  • 观察者模式