JavaScript学习Day26笔记

Day26笔记

一、jQuery操作Ajax

$.ajax()方法

$.ajax({
    type:'GET'/'POST',
    url:'URL',
    dataType:'json',
    contentType:'application/x-www-form-urlencoded'，
    timeout:time,
    cache:boolean,
    data{
    	name:'jack',
    	age:23
	},
	success:function(data) {
    	if(data.success) {
            // 处理传入的data数据
         }else{
             console.log(`出现错误${data.msg}`)
         }
	}，
    error:function(jqXHR) {
        console.log(`发生错误${jqXHR.status}`)
    },
	complete:function(){ },
	async:boolean
})

• type => ‘POST’/‘GET’，默认是’GET’，指定请求方式。
• url => 发送请求的地址。
• dataType => 指定服务器返回的数据类型，常用为’json’。
• contentType => 指定传输数据类型，键值对类型（默认值） application/x-www-form-urlencoded 、文件类型 multipart/form-data 、JSON字符串类型 application/json。
• timeout => 请求超时时间，单位为毫秒，数值表示。
• cache => 是否缓存请求结果，布尔值表示。
• data => 是一个对象，里面是发送到服务器的数据。
• success => 是一个方法，请求成功后的回调函数，传入返回后的data数据，一个包含success成功代码属性的对象。
• error => 请求失败后，服务器回调的函数，传入XMLHttpRequest对象。
• complete => 请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用。
• async => 是否异步处理，布尔值表示，设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行。

Ajax跨域

$.ajax({
    type:'GET'/'POST',
    url:'URL',
    dataType:'jsonp',
    jsonp:'jsonp',
    jsonpCallback:'func',
    contentType:'application/x-www-form-urlencoded'
    timeout:time,
    cache:boolean,
    data{
    	name:'jack',
    	age:23
	},
	success:function(result) {
        console.log(result)
	}，
    error:function(err) {
        console.log(err)
    },
	async:boolean
})

• dataType => 指定服务器用 jsonp 方式跨域请求。
• jsonp => 指定 callback 为jsonp参数名。
• jsonpCallback => 自定义服务器封装数据的函数名。

$.get()方法

$.get( 'URL',{data},callback )
// 例：
$.get( 'http://10.7.176.81:8089/api/list_page',{pageNo:1},function(data) {
    console.log( JSON.stringify(data) )
} )

• {data} => 会自动以 ?key1=value2&key2=value2 的类型拼接在URL后面。

$.post()方法

$.post( 'URL',{data},callback )
// 例：
$.post( 'http://10.7.176.81:8089/api/list_page',{pageNo:1},function(data) {
    console.log( JSON.stringify(data) )
} )

二、函数的执行空间

1. 首先我们知道函数是用来封装代码的，也就是复杂数据类型。

2. 复杂数据类型都是存储在堆区域中，但堆只能用来存储数据和代码，并不能执行代码，函数体内的代码会以字符串的形式存储到堆区域中。

3. 所以当我们执行函数调用语句时，函数封装的代码会临时copy一份存储在**调用栈区域（函数的执行空间）**中。

4. 调用栈区域中的代码就会执行，我们的函数就可以运行了。

5. 在函数的代码执行完后，调用栈区域中的代码就会被销毁。

6. 这也解释了在函数内部声明的变量，为什么不能在函数外部使用。

三、不会被销毁的函数执行空间

1. 当函数体内返回一个复杂数据类型，该函数代码执行空间内会开辟一个新的存储单元。
2. 这个新的存储单元专门用来储存这个返回值。
3. 存储单元有一个专门的地址。
4. 将返回值赋给一个变量，那么该变量在栈中存储的数据就是存储单元的地址。
5. 所以在代码执行完后，调用栈区域也不会将函数代码销毁。

四、什么是闭包

1. 有一个A函数，在A函数内部返回一个B函数。（直接返回/间接返回）

2. 在B函数中引用A函数内部的私有变量。

   function fnA() {
       let a = 10;
       function fnB() {
           a++;
           console.log(a);
       }
       return fnB
   }
   let fn = fnA()
   

3. 在A函数的外部有变量引用这个B函数。

   function fnA() {
       let a = 10;
       function fnB() {
           a++;
           console.log(a);
       }
       return fnB
   }
   let fn = fnA()
   // 多次引用B函数
   // 这时候fn=function(){a++;console.log(a)}
   // 所以fn()就会引用B函数
   fn()  =>  11
   fn()  =>  12
   fn()  =>  13
   fn()  =>  14
   

直接返回B函数

// 函数内容使用return返回。
return function() { }

间接返回B函数

// 事件函数，当事件发生时才会引用该函数
Ele.事件 = function() { }

五、闭包的特性

• 函数嵌套函数。
• 函数内部可以引用函数外部的参数和变量。
• 不会被销毁的存储空，一直占用内存。
• 会造成内存泄漏（有一块内存空间被长期占用，而不被释放）。
• 让外部访问函数内部变量成为可能。

六、闭包的应用场景

全局变量下获取局部变量的值

function fn(){
    var name = 'admin';
    return function() {
        return name;
    }
}
var f = fn()
// 实现了在全局变量下获取到局部变量中的值
console.log( f() )  =>  admin

​ fn() 的返回值是一个匿名函数，这个匿名函数在 fn() 作用域内部，所以它可以获取 fn() 作用域下变量 name 的值，将这个值作为返回值赋给了在全局作用域下的变量 f ，实现了在全局变量下获取到局部变量中的值。

内存消耗问题

function fn() {
    var num = 3;
    return function() {
        var n = 0;
        console.log('n:',++n);
        console.log('num:',++num);
    }
}
var f = fn()
// 多次引用内部的匿名函数
f()  =>  n:1  num:4
f()  =>  n:1  num:5
f()  =>  n:1  num:6

​ 匿名函数内部引用了 fn() 函数的变量 num，所以变量 num 不会被销毁，而变量 n 是每次调用时新创建的，因为每次 f() 执行完后都会被销毁，这里就产生了内存消耗的问题。

间接返回内部函数

(function fnA(){
    var num = 0;
    btnEle.onclick = function() {
        console.log(++num)
    }
} () )

​ 使用事件函数，每当事件发生时就会调用该函数，不需要使用 return 来返回内部函数。