(1)同步和异步的概念
同步:在进程中任务未结束时,需要等待结束后才能执行下一个任务。
异步:在进程中任务未结束,在等待的过程中可以先去执行下一个任务。
由于JavaScript属于单线程,所以我们最好采用异步编程。
(2)异步编程的实现方式
a.回调函数
b.事件监听
c.发布/订阅
e.promise对象
f.Gennerator函数
g.async函数
(3)回调函数
1.回调函数的概念:
回调函数也被称为高阶函数,是一个被作为参数传递给另一个函数(这里我们把另一个
函数称为“otherFuncion”)的函数,回调函数在otherFunction中被调用。
我们常见的回调函数,例如在Jquery中
$("#btn_1").click(function(){
alert("btn_1 clicked");
});
在这个例子中我们将一个匿名函数作为参数传递给了click方法,click方法会调用我们传递
给它的函数。
再看一个例子
var friends = ["Mike", "Stacy", "Andy", "Rick"];
friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});
这个例子中也传递了一个匿名函数作为参数给forEach方法。
实际上我们也可以传递一个函数名给另一个函数作为参数。
2.回调函数怎样运作
当我们将一个回调函数作为参数传递给另一个函数时,我们仅仅传递了
函数的定义,并没有在参数中执行函数(我们并没有在传递函数时像平时执行函数一样带有
一对执行小括号)。需要注意的很重要的一点,回调函数并不会马上执行,它会在包含他的
函数内在某个特定的时间点被“回调”。
3.回调函数其实是闭包
4.实现回调函数的基本原理
a.使用命名或匿名函数作为回调
b.传递参数给回调函数
我们能够将包含(调用)它的函数的属性(或全局属性)作为回调函数的参数
--这也说明了回调函数其实是闭包。
c.在执行前确保回调函数时一个函数
如下:
//确保callback是一个函数
if(typeof callback === "function"){
//调用它,既然我们已经确定了它是可调用的
callback(options);
d.使用this对象的方法作为回调函数时的问题(*)
当回调函数是一个this对象的方法时,我们必须改变执行回调函数的方法来
保证this对象的上下文。否则如果回调函数被传递给一个全局函数,
this对象要么指向全局window对象(在浏览器中)
。要么指向包含方法的对象。
例子:
//定义一个拥有一些属性和一个方法的对象 //我们接着将会把方法作为回调函数传递给另一个函数
var clientData = {
id: 094545,
fullName "Not Set",
//setUsrName是一个在clientData对象中的方法
setUserName: fucntion (firstName, lastName){
//这指向了对象中的fullName属性
this.fullName = firstName + " " + lastName;
}
}
function getUserInput(firstName, lastName, callback){
//在这做些什么来确认firstName/lastName
//现在存储names
callback(firstName, lastName);
}
getUserInput("Barack","Obama",clientData.setUserName);
console.log(clientData.fullName); //Not Set
//fullName属性将在window对象中被初始化
console.log(window.fullName); //Barack Obama
在上面的例子中,我们看到 ,当clientData.setUsername被执行时,
this.fullName并没有设置clientData对象中的fullName属性。相反,
它将设置window对象中的fullName属性,因为getUserInput是一个全局函数。
这是因为全局函数中的this对象指向window对象。
如何解决呢?我们可以通过call和apply函数来保存this。
我们知道JavaScript中的函数都有两个方法:Call和Apply,这两个方法被用来
设置函数内部的this对象,以及给函数传递变量。
call接收的第一个参数为被用来在函数内部当做this的对象,传递给函数的参数被挨个传递(当然使用逗号分开)。Apply函数的第一个参数也是在函数内部作为this的对象,
然而最后一个参数确是传递给函数的值的数组。
如何修改上一例子中的问题呢
//注意到我们增加了新的参数作为回调对象,叫做“callbackObj”
function getUserInput(firstName, lastName, callback. callbackObj){
//在这里做些什么来确认名字
callback.apply(callbackObj, [firstName, lastName]);
}
//我们将clientData.setUserName方法和clientData对象作为参数,clientData对象会被Apply方法使用来设置this对象
getUserName("Barack", "Obama", clientData.setUserName, clientData);
//clientData中的fullName属性被正确的设置
console.log(clientUser.fullName); //Barack Obama
上面的例子使用了Call函数,也可以使用Apply函数
e.允许多重回调函数
我们可以将不止一个的回调函数作为参数传递给一个函数,就像我们能够传递不止一个变量一样。这里有一个关于jQuery中AJAX的例子:
function successCallback(){
//在发送之前做点什么
}
function successCallback(){
//在信息被成功接收之后做点什么
}
function completeCallback(){
//在完成之后做点什么
}
function errorCallback(){
//当错误发生时做点什么
}
$.ajax({
url:"http://fiddle.jshell.net/favicon.png",
success:successCallback,
complete:completeCallback,
error:errorCallback
});
5."回调地狱"问题以及解决方案
在异步执行代码时,多层级的回调函数堆积会导致代码杂乱无章难以维护,我们称为“回调地狱”
两种解决方案:
a.给函数命名,并传递它们的名字作为回调函数,而不是在主函数的参数中定义匿名函数。
b.模块化,将代码分割到模块中,不同的代码块完成不同的工作,然后到巨型应用中导入模块。
(4)事件监听
1.事件的概念
JavaScript使我们有能力创建动态页面,网页中的每一个元素都可以产生某些触发JavaScript函数的事件。
我们可以认为事件是可以被JavaScript侦测到的一种行为。
2.事件流
事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件,
而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。
冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】
捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象,从document对象开始,也在document对象结束。
3.事件处理
a.HTML事件处理
<button οnclick="something()"></button>
b.DOM 0级事件处理
var dib1 = document.getElementById("div1");
div1.onclick = function(){
alert("message1");
};
div1.onclick = function(){
alert("message2");
}
缺点:每个DOM元素只能绑定一个同类事件,例如上面只弹出message2
c.DOM 2级事件处理(事件监听)
var dib1 = document.getElementById("div1");
div1.addEventListener('click', function(){
alert("message1");
},false);
div1.addEventListener('click', function(){
alert("message2");
},false);
addEventListener("事件名" , "事件处理函数" , "布尔值");
false 事件冒泡 true 事件捕获
优点相比前两个就多了。可以选择是事件流。
可绑定多个同类事件。事件名可以组成字符串。
addEventListener("事件名" , "事件处理函数" , "布尔值")和removeEventListener("事件名" , "事件处理函数" , "布尔值")
注意:removeEventListener()不能移除匿名函数。
event.preventDefault():阻止默认事件
event.stopPropagation();阻止事件冒泡
事件代理
事件代理的原理:
传统的事件处理中,需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧,通过它可以把事件处理器添加到一个父级元素上,从而避免把事件处理器添加到多个子级元素上。
事件代理的原理用到的就是事件冒泡和目标元素,把事件处理器添加到父元素,等待子元素事件冒泡,并且父元素能够通过target(IE为srcElement)判断是哪个子元素,从而做相应处理
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
var colorList=document.getElementById("color-list");
colorList.addEventListener('click',showColor,false);
function showColor (e) {
e=e||window.event;
var targetElement=e.target||e.srcElement;
if(targetElement.nodeName.toLowerCase()==="li"){
alert(targetElement.innerHTML);
}
}
})();
</script>
</body>
</html>