目录
一.JQuery与Flask通信的三种方法
根据HTTP的“get”与“post”两种请求，JQuery提供“$.get()”、“$.post()”、“$.ajax()”三种方式通信。
1.1$.ajax()
使用$.ajax()可以很方便的与后端交换数据，不过当我们传入的数据是一个JS对象时，我们需要使用“JSON.stringify(object)”方法来将JS对象转换为JSON数据。
除此之外，我们还需要修改“请求头格式”为“application/json”，如果不修改“请求头格式”，那么会报错：“415 (Unsupported Media Type)”
而解决办法就是在$.ajax()中添加语句“contentType: "application/json;charset=UTF-8"”
一个ajax向Flask后端传送数据的示例。
//发送数据
$.ajax({
type:"post",
dataType:"json",
url:"/main/blog/commit/comment",
contentType: "application/json;charset=UTF-8",
data:JSON.stringify(data),
});后端使用“request.json”获取字典对象来使用数据。
1.2$.get()
$.get()是ajax使用get请求的简化版，在使用get请求向后端请求数据时，如果我们是这样的语句：
$.get("/main/blog/get/allcomment",{"blog_id":"123"},function(res){
if(res.length == 0){
//pass
}
}注意我们使用get请求的同时，附加了“blog_id”这个数据参数，这会改变我们get请求的URL，变成："/main/blog/get/allcomment?blog_id=66"，也就是说我们的请求参数自动作为修饰符添加到URL中。
此时，在后端Flask中，我们需要使用：“request.args.get("blog_id")”来获取“123”
若数据参数有多个，例如：
{
"test1":"123",
"test2":"456"
}仍然使用“request.args.get("blog_id")”来获取对应值
1.3$.post()
$.post是ajax的post请求简化版，需注意，传入的数据类型需要是JSON类型，在后端使用：“request.json”获取字典对象来使用数据。
例如：
二.forEach()方法
forEach()方法用来对一个数组中的所有成员执行方法内操作。
例如：
let value = [1,2,3]
value.forEach(function(item){
console.log(item);
});效果：
三.this指针
3.1为什么要用this指针
this可以用来指向某些元素、对象，在合适的地方使用this，可以减少无用代码的编写。
下面是一个冗余且不易维护的代码：
var user = {
name: "aclie",
sing: function () {
console.log(user.name + '在唱歌')
},
dance: function () {
console.log(user.name + '在跳舞')
},
study: function () {
console.log(user.name + '在学习')
},
}在这个代码中，每个方法都需要用到user对象中的name属性，如果user对象名称发生变化，那么所有用到user的地方都要修改，在这种情况下，就可以使用this指针。
var user = {
name: "aclie",
sing: function () {
console.log(this.name + '在唱歌')
},
dance: function () {
console.log(this.name + '在跳舞')
},
study: function () {
console.log(this.name + '在学习')
},
}3.2this的指向
this的指向(值)和函数在哪里定义无关，只与“如何调用”有关。
function foo(){
console.log(this)
}
foo()
var obj = {
foo: foo
}
obj.foo()
obj.foo.apply("hello") 执行结果：
3.3this指针的四种绑定方式
3.3.1默认绑定
当函数独立调用时，this指针默认绑定window
//1.直接调用函数
function f(){
console.log(this);
}
f();
//2.对象中的函数
var obj1 = {
f:f
}
var fn1 = obj1.f;
fn1();
//3.被全局变量引用
var obj2 = {
bar:function(){
console.log(this);
}
}
var fn2 = obj2.bar;
fn2();
//4.函数嵌套调用
function f1(){
console.log("f1",this);
f2();
}
function f2(){
console.log("f2",this);
f3();
}
function f3(){
console.log("f3",this);
}
f1();
//5.通过闭包调用
var obj3 = {
bar:function(){
return function(){
console.log(this);
}
}
}
obj3.bar()();
执行结果：
3.3.2隐式绑定
调用的对象内部有对函数的引用
(通过对象调用函数)
//通过对象调用函数
//注意区别“使用对象调用函数”与“直接调用对象中函数”两者区别
//前者是通过对象调用，故this指向该对象
//后者直接调用，故this指向window
var obj2 = {
f:f
}
var myF = obj2.f
obj2.f(); //隐式调用,通过对象调用
myF(); //直接调用执行结果：
注意：
将对象内的函数单独取出并且赋值给某个变量，通过这个变量来调用函数，就是“直接绑定”，this指针指向“window对象”。
而直接通过对象调用这个函数，this指针指向“该对象”。
3.3.3显式绑定
不希望在对象内部包含这个函数的引用，但又希望通过对象强制绑定
(手动修改this指向)
使用call/apply/bind进行“显式绑定
function f(){
console.log(this);
}
var testV = {
"name":"小明"
}
f.call(testV)
f.apply(testV)
f.call("大明")执行结果：
3.3.4new绑定
通过new关键字来创建构造函数的示例，绑定this
function animal(aName,aAge){
this.aName = aName;
this.aAge = aAge;
}
const cat = new animal("小花",14);
const dog = new animal("大黄",15);
console.log(cat);
console.log(dog);执行结果：
总结：
在这里的this指针，跟Pythonn对象里的“self”指针差不多，都是指向对象自身
3.3.5通过标签调用this指针函数
当某个标签调用某个含有this指针函数时，是默认绑定，故this指针指向window
(其实就是相当于单独在script标签中调用了函数，故是默认绑定)
可以将this指针传入，用来代指该标
<button onclick="myclick1(this)">按钮1</button>
<button onclick="myclick2()">按钮2</button>
<script>
function myclick1(e){
console.log(e);
}
function myclick2(){
console.log(this);
}
</script>执行结果：
3.4this绑定的优先级
- 隐式绑定高于默认绑定
- 显示绑定高于隐式绑定
- new绑定高于隐式绑定
- new绑定高于显示绑定
绑定优先级：
new关键字绑定 > 显式绑定 > 隐式绑定 > 默认绑定
3.5特殊的绑定
除了上述四种常见绑定以外，还有三种“特殊的绑定规则”，少见，但是容易犯浑
3.5.1忽略空值的绑定
当显式绑定的值为“null/undefined”时，this忽略显式昂定，转而绑定window
var testV = {
name:"小明",
f:function f(){
console.log(this);
}
}
testV.f.call("123");
testV.f.call(null);
testV.f.call(undefined);执行结果：
3.5.2函数赋值同时调用函数(间接函数引用)
间接函数引用相当少见(正常人不会写这种犯抽代码，某些面试官可能喜欢问用来装X)
var testV1 = {
name:"小明"
};
testV1.f = function (){
console.log(this);
};
testV1.f();
testV2 = {
name:"大明"
};
(testV2.f = testV1.f)()执行结果：
总结：
testV2在接收testV1的值(函数)时，添加了小括号，相当于赋值过程和调用函数过程同时发生(并发过程)，而在这个函数调用过程中，因为“赋值过程”没有结束，而“函数又被调用”(此时因为是在内存中的函数被调用，而不是隐式绑定[例如：“testV1.f()”])，故被当做“默认绑定”由window调用this指针
3.5.3箭头函数
箭头函数不绑定this指针，它的this指针来源于上级作用域
var testV = {
name:"小明",
f:() => {
console.log(this);
}
};
testV.f();执行结果：
四.event指针
4.1event指针介绍
当事件(鼠标点击、键盘敲击等等)发生以后，会产生一个事件对象，作为参数传给监听函数。
<button onclick="myclick1(event)">按钮</button>
<script>
function myclick1(e){
console.log(e);
}
</script>点击按钮后，执行结果：
可以看出event是一个事件对象，在这里表示一个点击事件对象
4.2事件相关概念
要想学会event，我们还需要了解“事件流”、“捕获过程”、“事件触发过程”、“冒泡过程”
一个完整的JS事件流是从window开始，最后回到window的一个过程。
事件流别分为三个阶段：“(1-5)捕获阶段”、“(5-6)事件触发过程”、“(6-10)冒泡阶段”。
4.2.1事件流
指页面中接受事件的顺序，即上图中的顺序。
4.2.2捕获阶段
在捕获阶段中，也可以通过“addEventListener(evnt,function,useCapture)”方法执行事件，在捕获阶段执行的元素，在冒泡阶段就不会在执行
addEventListener()定义与用法
- document.addEventListener() 方法用于向文档添加事件句柄。
- 提示： 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的 事件句柄。
- 提示：使用 element.addEventListener() 方法为指定元素添加事件句柄。
| 参数 | 描述 |
|---|---|
| event | 必须。描述事件名称的字符串，例如“click”是点击事件 |
| function | 必须。描述事件触发后执行的函数 |
| useCapture | 可选。布尔值，true-事件句柄在捕获阶段执行，false-事件句柄在冒泡阶段执行。 |
4.2.3事件触发过程
“被点击位置”最内层元素执行事件且准备向上传递事件句柄的过程
4.2.4冒泡阶段
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。
如果它的父级元素也有某个事件函数，当执行完它的事件函数后，也会执行它父级的事件函数。
一个例子代码：
HTML部分：
<div class="parents" id="parents">
<div class="child" id="child"></div>
</div>JS部分：
<script>
var parents = document.getElementById("parents");
var child = document.getElementById("child");
document.onclick = function(e){
alert("你点击了屏幕任何区域");
};
document.body.onclick = function(e){
alert("你点击了body区域");
};
parents.onclick = function (e) {
alert("你点击了parents区域");
};
child.onclick = function (e) {
alert("你点击了child区域");
};
</script>具体HTML元素的区域：
- 当点击区域①的时候：会依次弹出
你点击了child区域、你点击了parents区域、你点击了body区域、你点击了屏幕任何区域这四个弹框。 - 当点击区域②的时候：会依次弹出
你点击了parents区域、你点击了body区域、你点击了屏幕任何区域这三个弹框。 - 当点击区域③的时候：会弹出
你点击了body区域、你点击了屏幕任何区域这两个弹框。 - 当点击区域④的时候：就只弹出
你点击了屏幕任何区域这一个弹框。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
