匿名函数，闭包与ajax（js）

1、匿名函数

函数种类：

// 函数声明
function fn() { }

// 函数表达式
var fn = function () { }

// 事件函数
box.onclick = function () { }

// 构造函数  一定要能过new调用
function Fn() { }

// 回调函数
move(box, 'left', 500, function () { });


// -------------------------
// 匿名函数：没有名字的函数
// 匿名函数要用小括号包起来，后面再加小括号执行
(function () {
    // 代码
})();

(function () {
    // 代码
}());

匿名函数自执行

// 自执行
(function () {
    console.log('我执行了');
})();

// 有参数
(function (n) {
    console.log(n);
})(5);

// 有返回值
var num = (function (a, b) {
    return a + b;
})(5, 10);
console.log(num);

匿名函数自执行的好处

// 当一个函数只执行一次的时候，可以用匿名函数自执行
// 当在一个不是很熟悉的环境里面写代码，为了防止和别人的代码产生冲突，可以利用匿名函数自执行
var a = 10;

(function () {
    var a = 1;
    console.log(a);
})();

console.log(a);

2、闭包

什么是闭包：闭包就是能够读取其他函数内部变量的函数，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

1、函数嵌套函数
2、内部可以读取外部函数的变量、参数、或者其它函数
3、这个内部函数在包含它的外面被调用
这个函数就是一个闭包

闭包最大的特点：就是它可以“记住”诞生的环境，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的最大用处有两个：一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。

function fn() {
    var n = 10;
    return function () {
        n++;
        // console.log(n);
        return n;
    }
}

var v = fn();
console.log(v()); // 11
console.log(v()); // 12
console.log(v()); // 13

1、闭包模拟对象的私有属性

function fn() {
    var _age = 3;

    // 设置
    function setAge(n) {
        _age = n;
    }

    // 获取
    function getAge() {
        return _age;
    }

    return {
        setAge: setAge,
        getAge: getAge
    }
}

var obj = fn();
console.log(obj);

obj.setAge(5);
console.log(obj.getAge());

2、循环中的闭包

// 点击li，打出它的下标
var li = document.getElementsByTagName('li');

// 不行的
for (var i = 0; i < li.length; i++) {
    li[i].onclick = function () {
        console.log(i);
    }
}

// 方式一：自定义下标
for (var i = 0; i < li.length; i++) {
    li[i].index = i; // 自定义下标
    li[i].onclick = function () {
        console.log(this.index);
    }
}

// 方式二：闭包
for (var i = 0; i < li.length; i++) {
    li[i].onclick = (function (i) {
        return function () {
            console.log(i);
        }
    })(i);
}

for (var i = 0; i < li.length; i++) {
    (function (i) {
        li[i].onclick = function () {
            console.log(i);
        }
    })(i);
}

3、ajax

AJAX即“Asynchronous Javascript And XML”（异步javaScript和XML），是指一种创建交互式网页应用的网页开发技术，可以用于创建快速动态网页的技术。

工作原理：相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。通过XMLHttpRequest对象来向服务器发出异步请求，从服务器中获得数据，然后用Javascript来操作DOM从而更新局部页面。

异步：浏览器在请求数据的过程中，不会一直等待，这段时间还可以做其他的操作。

同步：浏览器在请求数据的过程中，会一直等待事件的响应，直到返回结果才会执行其他的操作。

1、基本流程

// 1、创建ajax对象
var xhr = new XMLHttpRequest();

// 2、open打开
// ajax对象.open(打开方式get/post, url地址, 是否异步);
xhr.open('get', './data/1.txt', true);

// 3、send发送
xhr.send();

// 4、等待服务器返回
// A、事件  xhr.onreadystatechange：当ajax的状态发生变化的时候会执行
// B、ajax状态  xhr.readyState 
//      0   （初始化）还没有调用open()方法
//      1   （载入）已调用send()方法，正在发送请求
//      2   （载入完成）send()方法完成，已收到全部响应内容
//      3   （解析）正在解析响应内容
//      4   （完成）响应内容解析完成，可以在客户端调用了
// C、服务器状态  xhr.status
//      1XX系列：指定客户端应响应的某些动作，代表请求已被接受，需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。
//      2XX系列：代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200、201状态码。
//      3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 location 域中指明。这系列中最常见的有301、302状态码。
//      4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。常见有：401、404状态码。
//      5XX系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。常见有500、503状态码。
// D、获取数据   xhr.responseText

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) { // ajax状态码
        if (xhr.status === 200) { // 服务器状态码
            console.log(xhr.responseText); // 数据
        }
    }
}

2、get请求并传数据

// key=value&key=value
// get请求的数据，跟在url后面，用?号连接起来
var xhr = new XMLHttpRequest();
xhr.open('get', './data/1.txt?tel=13388888888&pass=123456', true);
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
}

3、post请求并传数据

// post请求，数据作为send的参数传给后端
// 在send发送以前，要设置消息头，默认以application/x-www-form-urlencoded这种方式编码，如果要上传文件，则用multipart/form-data编码

var xhr = new XMLHttpRequest();
xhr.open('post', './data/1.txt', true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('tel=13399999999&pass=123456');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
}

4、封装

// 参数：请求方式 请求地址 发送给后端的数据 请求成功的回调
function ajax(methods, url, data, callback) {
    // 1、创建xhr对象
    var xhr = new XMLHttpRequest();

    if (methods === 'get') {
        // get请求
        if (data) {
            url += '?' + data;
        }
        // 2、open打开
        xhr.open('get', url, true);
        // 3、send发送
        xhr.send();
    } else {
        // post请求
        // 2、open打开
        xhr.open('post', url, true);
        // 3、send发送
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    // 4、等待服务器返回
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                // 成功了
                callback && callback(xhr.responseText);
            } else {
                // 请求失败
                throw new Error('请求失败，失败的服务器码是：' + xhr.status);
            }
        }
    }
}

5、JSON

JSON.stringify(对象) 将对象转成字符串
JSON.parse(字符串) 将字符串转成对象(这个字符串是长得像对象)

var arr = ["刘备", "关羽", "张飞"];

var s = JSON.stringify(arr);
console.log(typeof s);
console.log(s);
console.log(JSON.parse(s));

数组克隆

var arr2 = arr; // 不行
arr2.push('小邓');
console.log(arr);

// ---------------------------
// 深度克隆
var arr2 = JSON.parse(JSON.stringify(arr));
arr2.push('小邓');
console.log(arr);

var arr2 = arr; // 不行
arr2.push('小邓');
console.log(arr);

// ---------------------------
// 深度克隆
var arr2 = JSON.parse(JSON.stringify(arr));
arr2.push('小邓');
console.log(arr);