Salesforce开发人员的JavaScript技能-编写异步JavaScript

学习目标

完成本单元后,您将能够:

  • 识别JavaScript中重要的异步功能。
  • 使用setTimeout异步调用函数。
  • 编写和调用回调函数。
  • 编写和调用基于promise的函数。
  • 描述Aura组件中的异步功能。

回想起我们最初引入JavaScript引擎时的方式。引擎有一个单线程,它可以正常工作,完成工作,然后填充新的工作以重新开始。

当然,至关重要的是不要阻塞线程。 

让我们来看一个例子。

<html>
  <script>
    alert("Does JavaScript show first?");
  </script>
  <body>
    <p>
      Does HTML show first?
    </p>
  </body>
</html>

如果在浏览器中加载该HTML页面,则会发现先弹出警报,然后阻止HTML显示。这是因为该alert()函数会中止JavaScript线程的执行,直到用户将其关闭为止。简而言之,当JavaScript阻止您的浏览器时,就永远不会带来良好的用户体验。 

好消息是,除了一些alert()上面的功能仍然存在的遗留特性外,JavaScript是一种异步语言。 

异步JavaScript无处不在

为了开始异步之旅,让我们重新回顾事件和功能。以前我们看过这样的HTML和JavaScript。

<!-- HTML -->
<button id="clicker">
//JavaScript
let button = document.getElementById("clicker");
button.addEventListener("click", handleClick);

在此示例中,我们将handleClick事件控件添加到按钮发出的click事件中。 

在那里!我们已经编写了一些异步JavaScript。 

事件触发时,所有发生的事情是将新消息添加到队列中。没有事件可以接管线程。触发的每个事件都必须进入队列并等待轮流运行。 

一种说明方法是使用setTimeout函数。在此 示例 invoking中setTimeout,我们以毫秒为单位传递了事件处理程序和计时器。计时器到时,它将触发,将事件处理程序添加到队列中。 

setTimeout(function(){
  console.log("This comes first");
}, 0);
console.log("This comes second");
//output in console
// "This comes second"
// "This comes first"

在这里,我们将计时器设置为零。但这并不意味着“立即致电”。这仅表示“立即将其放入队列中”。但是,代码块本身的执行需要完成,从而清除了调用堆栈。只有这样,函数才能setTimeout 轮流使用。 

另一个常见的错误是认为计时器是事件处理程序何时触发的准确预测器,但不一定。事件处理程序仍然必须等待轮到队列。通过测量时间,我们可以看到这个 在行动。 

const timer  = function(){
  let start = Date.now();
  setTimeout(function(){
    let end = Date.now();
    console.log( "Duration: " + (end - start) )
  },1000);
};
timer();
// Console output when invoked several times:
// "Duration: 1007"
// "Duration: 1000"
// "Duration: 1002"
// "Duration: 1004"

时间设置为一秒,并且它接近于该时间。但是很明显,将函数添加到队列然后在每次调用时运行的速度有所不同。 

现在,我们已经看到了一些异步调用的示例,我们可以看看一些常见的异步模式和构造。 

回调模式

回调只是一个传递给另一个函数的函数,该函数会在将来的某个时刻调用它。 

因此,实际上,我们已经看到了很多回调。 

setTimeout(callback, timer)
Element.addEventListener(event, callback)
Array.map(function(item){...})

让我们将其应用于自行车 用例,以了解如何实现回调。当您换挡时,大多数情况下它都起作用。但是失败的可能性仍然很小。这是异步JavaScript的理想方案。让我们看一下回调的外观,该回调接收有关齿轮如何移动的数据,然后在完成时调用传入的函数。 

Bike.prototype.changeGearAsync = function(shiftObject, callback){
  let newIndex = shiftObject.currentIndex + shiftObject.changeBy;
  if (newIndex < 0 || newIndex > shiftObject.maxIndex) {
    callback(new Error("There is a problem"), null);
  } else {
    callback(null, newIndex);
  }
};

该参数callback实际上是一个函数。如果有错误,我们将调用它并为第一个参数设置要发送回的任何错误数据。成功后,我们将错误参数设为空并传回正确的数据。然后,我们可以看到如何调用新的换档功能。 

Bike.prototype.changeGear = function(frontOrRear, changeBy) {
  const shiftIndexName = frontOrRear + "GearIndex"
  const that = this;
  //contains state change for making the shift
  let shiftObject = {
    currentIndex: this[shiftIndexName],
    maxIndex: this.transmission[frontOrRear + "GearTeeth"].length,
    changeBy: changeBy
  }
  // invoke async function with anonymous callback
  this.changeGearAsync(shiftObject, function(err, newIndex){
    if (err) {
      console.log("No Change");
    } else {
      that[shiftIndexName] = newIndex;
    }
  });
};

回调模式已被广泛接受并广泛使用,但是它也有一些缺点。首先,当多个回调链接在一起时,它们被嵌套在另一个中。这会造成不必要的复杂性,可读性问题,并且在阅读别人的代码时很难推理。此缺陷称为回调地狱。回调也没有隐式错误状态(像try/catch这样)。由开发人员编写回调以明确查找带有if条件的错误,这取决于开发人员。这些障碍导致了诺言的创造。 

箭头功能

在前面的示例中,您可能已经注意到了这一行。

const that = this;

这是旧版JavaScript的遗物。我们仅介绍一种新的函数语法:箭头函数。回想一下调用函数时会发生什么。具体来说,它将绑定到新this上下文。与匿名函数关闭范围内的其他变量不同,JavaScript this实际上在实际上我们需要this包含函数时重新绑定。 

一个长期的解决方法是分配this一个新变量(按照惯例通常称为selfor that),然后将上下文引用保留在闭包中。

箭头函数通过不重新绑定来消除编码技巧的这一点this。箭头函数语法如下所示:

(arg1, arg2) => {...function body...}

使用箭头功能,我们可以删除该that = this位并将其调用更改changeGearsAsync为以下内容。

  // the anonymous function is now an arrow function
this.changeGearAsync(shiftObject, (err, newIndex)=>{
  if (err) {
    console.log("No Change");
  } else {
    // we reference this instead of that
    this[shiftIndexName] = newIndex;
  }
});

有前途的东西

开发为处理异步代码的库的承诺,使您可以更轻松地推断代码成功或失败的时间。它们还包含内置机制,可将一个呼叫链接到另一个呼叫。最终,竞争库在浏览器中被标准化为Promise对象。让我们变身bike一个多 的时间。 

Bike.prototype.changeGearAsync = function(shiftObject){
  return new Promise(
    (resolve, reject) => {
      let newIndex = shiftObject.currentIndex + shiftObject.changeBy;
      if (newIndex < 0 || newIndex > shiftObject.maxIndex) {
        reject("New Index is Invalid: " + newIndex);
      } else {
        resolve(newIndex);
      }
    }
  );
};

首先,更新后的changeGearAsync函数接收我们传递的数据,并返回一个新的Promise对象。我们传入一个参数:一个回调函数,它本身有两个函数传递给它,resolvereject。 

在实现promise时,您可以执行回调函数中所需的任何计算,请求等。完成后,如果一切顺利,您将resolve使用要传递回的数据进行调用。如果遇到问题,您可以通过调用reject任何相关错误作为参数来向函数调用者发出信号。 

让我们看看我们现在如何使用它。 

// invoke async function that returns a promise
this.changeGearAsync(shiftObject)
  .then(
    (newIndex) => {
      this[shiftIndexName] = newIndex;
      console.log(this.calculateGearRatio());
    }
  )
  .catch(
    (err) => {console.log("Error: " + err);}
  );

现在,我们有了一些更容易推理的东西。如果changeGearAsync可行,则将then函数与传递给其参数的函数一起调用。如果没有,catch则被调用。 

如果回调函数本身返回的实例Promise,那么事情就会变得令人兴奋。您可以简单地将这两个Promise函数链接在一起。举例来说,如果我们想改变 这两个前后齿轮。 

Bike.prototype.changeBothGears = function(frontChange, rearChange) {
  let shiftFront = {
    currentIndex: this.frontGearIndex,
    maxIndex: this.transmission.frontGearTeeth.length - 1,
    changeBy: frontChange
  };
  let shiftRear = {
    currentIndex: this.rearGearIndex,
    maxIndex: this.transmission.rearGearTeeth.length - 1,
    changeBy: rearChange
  };
  this.changeGearAsync(shiftFront)
    .then(
      (newIndex) => {
        this.frontGearIndex = newIndex;
        console.log(this.calculateGearRatio());
        return this.changeGearAsync(shiftRear);
      }
    )
    .then(
      (newIndex) => {
        this.rearGearIndex = newIndex;
        console.log(this.calculateGearRatio());
      }
    )
    .catch(
      (err) => {console.log("Error: " + err);}
    );
  };

changeBothGears上面的函数向我们显示了对的两个调用的链接changeGearsAsync,每个调用都与对应于前齿轮或后齿轮的对象相关。第一次调用之后,我们在第一次调用结束时再次调用它thenthen可以在上面加上另一个。从根本上讲,每当一个then承诺返回时,都可以跟随另一个承诺,then直到我们用尽了所有链式动作。  

异步/等待

在签字之前,值得一提的是异步武器库中的一些新功能:asyncawait运算符。这些基于promise,使它们的使用方式与同步JavaScript非常相似。

闪电Web组件和异步JavaScript

利用Lightning Web Components,开发人员可以同时使用基于承诺的异步功能和异步/等待功能。现在唯一的建议是,为开发人员在Internet Explorer 11上为用户创建功能,asyncawait 在该浏览器中未实现。不过,请放心,您的代码可以使用。但是,当在IE11中使用async / await运行任何内容时,LWC会自动使用polyfill,以便语法正确运行。因此,如果经常使用,IE11的性能可能会有所下降。 

与Salesforce互动

在Lightning Web Components中实现了使用异步JavaScript的若干功能。其中大多数围绕与服务器的交互。一个示例是可以在Lightning Web组件中强制调用Apex方法的方法。 

考虑以下Apex类和方法: 

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> findContacts(String searchKey) {
        if (String.isBlank(searchKey)) {
            return new List<Contact>();
        }
    String key = '%' + searchKey + '%';
    return [SELECT Id, Name, Title, Phone, Email, Picture__c FROM Contact WHERE Name LIKE :key AND Picture__c != null LIMIT 10];
    }
...

Lightning Web Components使用基于Promise的API来展示此方法。您可以这样调用它: 

import { LightningElement, track } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';
export default class ApexImperativeMethodWithParams extends LightningElement {
    @track searchKey = '';
    @track contacts;
    @track error;
    handleSearch() {
        findContacts({ searchKey: this.searchKey })
        .then(result => {
            this.contacts = result;
            this.error = undefined;
        })
        .catch(error => {
            this.error = error;
            this.contacts = undefined;
        });
    }
}
注意

注意

这里有一些超出此模块范围的内容,最值得注意的是ES6中JavaScript模块的使用。要了解这些功能,这是考虑进入本教程“现代JavaScript开发”中的下一个模块的绝佳时机。但是在您这样做之前,请先了解一下此代码。 

当我们称其import findContacts…为标准模块语法时,该组件中将包含另一个模块的功能。我们在findContacts这里将Apex方法展示为同名的JS函数。 

当我们在handleSearch()函数中调用它时,Apex方法的参数作为文字对象传递,然后我们看到了then和catch函数的基于promise的语法。

Salesforce开发人员的JavaScript技能-了解上下文,范围和闭包

学习目标

完成本单元后,您将能够:

  • 确定变量在JavaScript中的范围。
  • 描述如何this根据调用函数的位置进行更改。
  • 使用闭包捕获对函数中变量的引用。

理解任何编程语言的关键在于理解变量的可用性,如何维护状态以及如何访问该状态。 

在JavaScript中,变量的可用性和可见性称为范围。范围由声明变量的位置确定。 

上下文是当前代码执行的状态。通过this指针访问它。 

可变范围

在JavaScript变量使用申报varletconst关键字。在何处调用关键字指示要创建的变量的范围。 

了解这三者之间的区别归结为两个因素:分配可变性和支持非功能块作用域。我们在本模块的第一个单元中介绍了分配可变性。现在该讨论范围了。 

范围的乐趣

声明变量或参数的代码块确定其范围。但var不能识别非功能代码块。这意味着调用var在一个if块或一个环块将变量分配给最近的封闭功能的范围。此功能称为提升。 

使用let或时const,参数或变量的范围始终是在其中声明参数的实际块。有一个经典的思维 练习可以证明这一点。

function countToThree() {
  // i is in the scope of the countToThree function
  for (var i = 0; i < 3; i++){
    console.log(i); // iteration 1: 0
    // iteration 2: 1
    // iteration 3: 2
  }
  console.log(i); // What is this?
}

所述console.log内部输出for回路不足为奇,输出的值i对于每次迭代。可能更令人惊讶的是最终console.log声明,它输出3。您可能已经预料到了错误,因为i在您认为是for循环范围之内声明了该错误。但是随着吊装,i实际上属于countToThree的范围。 

虽然不一定很糟糕,但是如果在代码块中重新声明了变量,则吊装通常会被误解,并可能导致变量泄漏或导致意外覆盖。为了解决这些误解let,将const其添加到语言中以创建具有块级作用域的变量。让我们重新思考一下。

for (let j = 0; j < 3; j++){
  console.log(j); // 0
  // 1
  // 2
}
console.log(j); // error

通过替换letvar,我们现在有了一个仅在for循环上下文中存在的变量。在循环关闭后尝试访问它会给我们一个错误。 

上下文和这个

正如我们探索的那样,JavaScript围绕对象。对象是跟踪状态的地方。调用一个函数时,该函数周围始终有一个对象容器。该对象容器是其上下文,this关键字指向该上下文。因此,在声明函数时不会设置上下文,而是在调用函数时设置上下文。 

因为功能可以在对象之间传递,所以this指向的内容可以更改。 

例如说这个JavaScript 对象。

var obj = {
  aValue: 0,
  increment: function(incrementBy) {
    this.aValue = this.aValue + incrementBy;
  }
}

如果然后访问增量功能,它将按预期工作。

obj.increment(2);
console.log(obj.aValue); // 2

但是,让我们将该函数分配给另一个变量,看看它是如何工作的。 

//assign function to variable
var newIncrement = obj.increment;
//now invoke through the new pointer
newIncrement(2);
console.log(obj.aValue); // still 2 not 4

通过将变量分配给newIncrement,现在可以在其他上下文中执行该功能。具体而言,在这种情况下,在全局范围内。 

注意

注意

Function.apply()Function.call()Function.bind()函数提供的方式来调用函数,同时明确其绑定到不同的对象上下文。

全局对象

当执行JavaScript而没有以开发人员身份编写的任何包含对象时,它将在全局对象中运行。因此,据称在此调用的函数正在全局上下文中运行,这意味着访问this将指向该全局上下文。 

在浏览器中,全局上下文是window对象。您可以通过在浏览器开发人员工具中运行以下命令来轻松测试该功能。 

this === window; // true

在该increment示例中,将increment函数分配给newIncrement变量会将调用它的上下文移动到全局对象。这很容易证明。

console.log(this.aValue); // NaN
console.log(window.aValue); // NaN
console.log(typeof window.aValue); // number

当我们尝试this.aValue使用新的上下文进行分配时,JavaScript对象的可变性开始发挥作用。新的未初始化aValue属性已添加到中this。对未初始化的变量执行数学运算将失败,因此该NaN值也会失败。但是我们可以看到aValue存在于window,的确是一个数字。 

与对象的上下文

在此increment示例中,只要increment使用obj点符号来调用函数,就this指向obj。或者,通常来说,当调用函数作为object.function() 点左侧的事物时,始终是调用该函数的上下文。 

想想这个Bike例子。的Bike构造限定了与几个属性this参考。它还具有分配给其引用该原型的功能this。 

const Bike = function(frontIndex, rearIndex){
  this.frontGearIndex = frontIndex || 0;
  this.rearGearIndex = rearIndex || 0;
  ...
}
...
Bike.prototype.calculateGearRatio = function(){
  let front = this.transmission.frontGearTeeth[this.frontGearIndex],
  rear = this.transmission.rearGearTeeth[this.rearGearIndex];
  if (front && rear) {
    return (front / rear) ;
  } else {
    return 0;
  }
};

然后Bike,我们使用new关键字进行调用。 

const bike = new Bike(1,2);
console.log(bike.frontGearIndex); // 1
console.log(bike.rearGearIndex); // 2

看起来我们正在Bike全局上下文中调用构造函数。但是,new关键字将上下文(和this指针)移动到分配左侧的新对象。 

当我们调用任何函数时,它们现在是bike对象的成员,因此它们将其用作包含上下文。 

let gearRatio = bike.calculateGearRatio();
console.log(gearRatio); // 3

以错误的方式调用构造函数很容易。在这里事情会崩溃。

const badBike = Bike(1,2);
console.log(badBike.frontGearIndex); // error
console.log(window.frontGearIndex); // 1

当您忘记使用时newBike将像其他任何函数一样调用,并且thiswindow到新创建的对象的关键转换失败。frontGearIndex 引入对象可变性,并添加属性window。 

注意

classJavaScript中的语法会强制您使用new关键字调用构造函数,因此您不会误导上下文。

关闭

声明函数时,它将保留对其中声明的任何变量或参数的引用,以及对其所包含范围内引用的任何变量的引用。它的变量和自变量以及其包含范围中的局部变量和自变量的这种组合称为闭包。 

考虑此 函数及其返回的函数。 

const greetingMaker = function(greeting){
  return function(whoGreeting){
    return greeting + ", " + whoGreeting + "!";
  }
}
const greetingHello = greetingMaker("Hello");
const greetingBonjour = greetingMaker("Bonjour");
const greetingCiao = greetingMaker("Ciao");
console.log(greetingHello("Gemma")); // Hello, Gemma!
console.log(greetingBonjour("Fabien")); // Bonjour, Fabien!
console.log(greetingCiao("Emanuela")); // Ciao, Emanuela!

greetingMaker被调用时,我们通常可以想象它的greeting参数仅在被调用的整个生命周期内持续存在。 

但是返回的函数会greetinggreetingMaker的范围内保留对参数的引用。这样,最后通过greetingHelloBonjour/ 调用它时Ciao,它仍然可以访问。 

掌握闭包也是理解和使用该语言的重要组成部分。

Salesforce开发人员的JavaScript技能-对事件和功能采取行动

学习目标

完成本单元后,您将能够:

  • 定义功能
  • 区分函数声明和函数表达式
  • 调用功能
  • 传递和分配功能
  • 描述闪电网络组件中功能和事件的使用

当要使事情发生在JavaScript中时,一切都与事件和函数有关。

还记得我们的运行时模型吗?让我们扩展一下。 

使用浏览器中的JavaScript,事件无处不在。DOM的某些部分发出的事件与该DOM对象的行为相对应。按钮具有单击事件,输入和选择控件具有更改事件,并且可见DOM的几乎每个部分实际上都具有鼠标光标与其交互(例如,经过它)的事件。窗口对象甚至具有用于处理设备事件的事件处理程序(例如检测移动设备的运动)。 

为了使某件事发生在网页中,将函数分配给这些事件作为事件处理程序。 

重申一下,DOM事件和与浏览器环境相关的其他事件实际上并不是核心JavaScript语言的一部分,而是它们是在浏览器中为JavaScript实现的API。 

发出事件时,将在引擎中创建一条消息。这些消息被放置在我们前面讨论的事件队列中。 

队列中的消息和堆栈中的帧。

释放堆栈后,将调用事件处理程序。这将在调用堆栈上创建所谓的框架。每次一个函数调用另一个函数时,都会将一个新框架添加到堆栈中,完成后会从堆栈中弹出,直到最后弹出实际事件处理程序的框架,堆栈为空,然后我们重新开始。 

定义和分配功能

在JavaScript中,函数本质上是特殊的对象。作为对象,它们是JavaScript的一流成员。可以将它们分配为变量的值,将其作为参数传递给其他函数,然后从函数中返回。 

函数生命周期有两个基本阶段:定义和调用。  

声明函数时,其定义将加载到内存中。然后以变量名,参数名或对象属性的形式将指针分配给它。但是,有几种不同的语法可以做到这一点也就不足为奇了。

功能声明

声明是使用function关键字创建函数的语句。实际上,当我们查看对象构造函数时,我们已经看到了它。该构造函数是一个函数。但是构造函数有点特殊,所以让我们退一步,谈论普通的旧函数,看看它们是如何工作的: 

// declare function
function calculateGearRatio(driverGear, drivenGear){
  return (driverGear / drivenGear);
}
// call function
let gearRatio = calculateGearRatio(42, 30);
console.log(gearRatio); // 1.4

在此代码示例中,函数后跟函数名称,并在括号中包含参数。 

这可以正常工作,但是有一些隐式事件正在发生。首先,函数名称成为变量名称。它还将变量隐式分配给封闭的上下文。最后,您可以在声明此函数之前调用它,例如在声明下面calculateGearRatio的那一行调用下面。 

// call function
let gearRatio = calculateGearRatio(42, 30);
// function is declared after the line it is called
// this is allowed in function declaration
function calculateGearRatio(driverGear, drivenGear){
  return (driverGear / drivenGear);
}
console.log(gearRatio); // 1.4

函数表达式

函数表达式更明确地实现了与声明相同的功能。 

const calculateGearRatio = function(driverGear, drivenGear){
  return (driverGear / drivenGear);
}
// the rest works the same
let gearRatio = calculateGearRatio(42, 30);
console.log(gearRatio); // 1.4

在这种情况下,我们有一个明确分配的变量。由于我们已经命名了指针,因此可以将函数名称放在function关键字之后。这里唯一的陷阱是必须在调用函数之前声明该函数。 

值得注意的是,函数表达式还用于将函数分配为对象的成员。回想一下我们将changeGear功能分配给Bike.prototype什么时候?  

Bike.prototype.changeGear = function(direction, changeBy) {
  if (direction === 'up') {
    this.currentGear += changeBy;
  } else {
    this.currentGear -= changeBy;
  }
}

返回函数

由于函数是一类对象,因此声明函数的另一种方法是函数返回另一个函数。这种模式通常称为工厂功能。 

// when invoked, this function will assign a function
function gearFactory(){
  return function(driverGear, drivenGear){
    return (driverGear / drivenGear);
  }
}
// calculateGearRatio can now be invoked as a function
const calculateGearRatio = gearFactory();
// and all the rest

虽然上面的例子很简单,但是它是有效的。工厂函数对于一次性可重用函数很有用,尤其是在闭包中捕获变量引用时。我们将在以后的单元中讨论闭包。 

匿名函数

JavaScript中有许多API,要求您传递一个函数才能使它们起作用。例如,假设您有一个数组,并且想要创建一个从该数组的值派生的新数组。在这种情况下,您可能会使用该Array.map 功能。

let myArray = [1, 5, 11, 17];
let newArray = myArray.map( function(item){ return item / 2 } );
console.log(newArray); // [0.5, 2.5, 5.5, 8.5]

在此代码段中,myArray.map采用一个参数:该函数对中的每个项目执行一次myArray。 

此功能永远不会重用。它被声明为传递给函数的参数(没有名称…因此“匿名”),并在map函数实现的内部执行。匿名函数( 在某些语言中也称为lambda)在JavaScript中很常见。 

功能调用

声明函数后,您可能想遍历调用它。调用函数时,会发生一些事情。 

请记住,第一件事是将新框架推入堆栈。然后在内存中创建一个包含其变量和参数的对象。this然后,将指针与其他一些特殊对象绑定到该对象。然后,将传递给参数的值赋值,最后运行时开始执行函数体内的语句。 

的绑定this有一个重要的例外,我们将在异步JavaScript的单元中重新进行讨论。 

调用与分配

使用函数时,与JavaScript新手混淆的一个潜在原因是您是分配/传递函数还是调用它。这一切都取决于您是否使用()。 

考虑我们的自行车对象的calculateGearRatio功能。 

let bike = {
  ...,
  calculateGearRatio: function() {
    let front = this.transmission.frontGearTeeth[this.frontGearIndex],
    rear = this.transmission.rearGearTeeth[this.rearGearIndex];
    return (front / rear);
  },
  ...
}

现在考虑这两种访问calculateGearRatio函数的不同方式。  

// invoke function and assign value to ratioResult
let ratioResult = bike.calculateGearRatio();
// assign calculateGearRatio function to a new pointer
const ratioFunction = bike.calculateGearRatio;

在第一种情况下,calculateGearRatio将调用,并将从函数返回的结果分配给该ratioResult变量(在这种情况下作为原始值)。另一方面ratioFunction ,仅已分配或指向该calculateGearRatio功能。然后,您可以掉头并以方式调用它ratioFunction。 

有理由将一个函数分配给另一个指针,特别是作为另一个函数的参数,就像该Array.map()函数一样。但是使用this参考的任何功能都有可能会被破坏,因为它this可以在不同的时间指向不同的事物。以后再说。 

充当事件处理程序

如果您希望某个函数作为事件的结果而触发,则需要将其连接到该事件。这样做会使该函数成为事件处理程序。函数定义需要包含一个参数:指向触发它的事件的指针。 

var handleClick = function(event) {
}

每个事件都具有告诉您处理该事件所需了解的属性。例如,click您可以检测到有关点击的数据(事件类型,触发该事件的元素,点击的坐标等)。  

var handleClick = function(event) {
  console.log(event.type);  // click
  console.log(event.currentTarget); // the thing you clicked
  console.log(event.screenX); // screen X coordinate
  console.log(event.screenY); // screen Y coordinate
}

通过DOM API分配事件处理程序

在简单的网页中,您有时可能会在HTML中看到显式分配的事件处理程序。 

<button onclick="handleClick(event)">
  Click to Go
</button>

但是,现代Web应用程序很少在HTML中使用事件绑定。相反,首选DOM API,特别是JavaScript Element.addEventListener()函数。 

首先,您需要对HTML元素的引用。下面,我们在id按钮中添加了一个属性,并删除了onclick属性。 

<button id=”clicker”>

现在我们进入DOM,获取对按钮的引用,并通过将事件侦听器handleClick作为值(注意,不带括号)传递给事件侦听器。 

let button = document.getElementById("clicker");
button.addEventListener("click", handleClick);

使用DOM API可使开发人员灵活地使UI高度交互并响应用户的操作。如果需要关闭功能,开发人员还可以删除事件侦听器。 

button.removeEventListener("click", handleClick);

您还将看到匿名函数添加为事件侦听器。 

button.addEventListener("click", function(event){
  //...anonymous function body...
});

请记住,不能使用来删除匿名函数removeEventListener,因为没有指针可以传入以识别该函数。 

Lightning Web Components中的事件和功能

Lightning Web组件的关键代码工件是JavaScript模块,HTML模板和CSS文件。其中唯一需要的是JavaScript模块(注意,.xml还需要的文件不是代码,而是有关组件的元数据)。 

Lightning Web组件中的功能通常以方法的形式出现,这些方法是该组件的JavaScript模块导出的类的成员。这些函数可以是事件处理程序,也可以是从下游向下游调用的其他函数。 

HTML模板以类似于静态HTML绑定的方式引用处理程序函数,但实际上是不同的。由于模板已编译为JavaScript工件,因此看起来静态的绑定实际上只是框架addEventListener在组件生命周期中某个时间调用的语法约定。 

模板中的此标记显示事件处理程序绑定。

<lightning-input onchange={handleChange} label="Input Text" value={text}>
</lightning-input>

这是事件处理程序。 

    handleChange(event){
        this.text = event.target.value;
    }
注意

注意

Lightning Web Components中有许多事件的更高级的功能。要探索这些功能,请完成Lightning Web Components基础知识模块,或深入研究其中一个示例 应用程序。