JavaScript(六)

基于《JavaScript高级程序设计》

AJAX

XMLHttpRequest(XHR)对象：

一般直接构造函数创建对象
1
var xhr = new XMLHttpRequest();
XHR用法：
- xhr.open("get/post", url, true/false) 第三个值表示是否异步发送请求。但不会真正发送请求，只是启动一个请求备发送，由send()发送。
- xhr.send() 接收一个参数为请求主体发送的数据，不调用也必须传一个null
属性有：
- responseText : 响应主体文本
- responseXML
- status : HTTP状态，注意304是表示请求资源未发生过更新，可以直接用浏览器缓存数据
- statusText : HTTP状态说明，跨浏览器不可靠
另外为了顺利发送异步请求，还需检测xhr的readyState属性，可取值如下：

一般主要对值是否为4进行判断。

xhr.abort()在接收响应之前取消异步请求。
http头部

xhr的setRequestHeader()方法设置自定义请求头，两个参数为头部字段名称，设置头部字段的值。并且为了生效，该方法必须在 open()之后，send()之前。

对应的xhr getResponseHeader()获取响应头，接收一个参数为头部字段名称，getAllResponseHeaders()取得包含所有头部信息的长字符串。
get/post请求

get请求注意确保url参数正确必须对名称和值都进行encodeURIComponent()编码

post请求，send()主体数据一般为序列化后的XML DOM文档。

创建表单

var data = new FormData();
data.append("name", "James"); // 键值对儿 字段名 -> 值

// var data  = new FormData(document.forms[0]); //可直接用表单元素填入

超时设定 xhr.timeout(xxxms) 仅IE8+支持？
进度事件：

利用progress事件xhr.onprogress可以做个进度显示器。该事件的event对象包括lengthComputable, position, totalSize属性。
跨域资源共享(CORS)：
- JSONP 带回调函数（被包含在函数调用中的JSON）
- Comet
- Web Sockets(微信小程序用的)：ws: / wss:

高级技术

作用域安全的构造函数：增设instanceof判断，防止this指针对象的晚绑定而造成的作用域不匹配的问题
惰性载入：函数执行分支之会发生一次，即某些场景下的if判断，一旦支持就一直支持，而不需要每一次都判断一次造成不必要的开销。
- 一种是对每一个if分支都改成对该函数的赋值(函数表达式)，且最后一步为调用新赋值的函数，下一次再调用时就会直接调用被分配的函数
- 第二种创建匿名，自执行的函数
函数绑定：将函数作为变量传递的同时保留代码执行环境，常和回调函数与事件处理程序一起用。

我们可用函数闭包来解决这个问题(保留整个活动对象)

一般js都封装了bind()函数，语法如下：
1
2
3
4
5
6
7
// 参数为一个函数和上下文环境
function bind(fn, context){
return function(){
// 这里的arguments是fn的
return fn.apply(context, arguments);
}
}
ECS5为所有函数都定义了bind(ctx)函数，接收一个参数：上下文环境。

函数柯里化：创建已经设置好了一个或多个参数的函数

创建：调用另一个函数，并为它传入柯里化的函数和必要参数

function curry(fn){
    var args = Array.prototype.slice.call(arguments, 1);
    return function(){
        // 取得第一个参数(柯里化函数名)后的所有参数
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return fn.apply(null, finalArgs);
    }
}

防篡改对象：
- 不可扩展对象：
  Object.preventExtensions(object_name)则该对象不能被添加属性或方法，但可以修改或者删除已有成员
- 密封对象：
  Object.seal(object_name) 且不能删除
- 冻结对象：
  Object.freeze(object_name)
高级定时器：

ds是单线程运行环境，定时器指定时间间隔只能表示将代码添加到队列，而不是实际执行。
- 链式setTimeout()
- 引出数组分块操作
- 节流：某些代码不能在没有间断的情况下一直重复执行(性能开销过大)
```
function throttle(method, context){
    clearTimeout(method.tId);
    method.tId = setTimeout(function(){
        method.call(context);
    }, 100);
}
```
自定义事件
- 观察者模式：主体发布事件，观察者订阅事件