Дата публикации: 24 июля 2022 г. Автор: Виджей Сонаван Категории: Salesforce Developer/Lightning Web Component/LWC/Javascript

Salesforce принимает и поддерживает использование стандартов с открытым исходным кодом и Javascript для значительного повышения скорости и простоты разработки LWC.
LWC использует основную концепцию веб-стандартов, а JavaScript является основным языком программирования или сценариев для работы с веб-приложениями. .
LWC использует версии JavaScript ES6 (2015 г.), ES7 (2016 г.), ES8 (2017 г.), ES9 (2018 г.), ES10 (2019 г.) и ES11 (2020 г.). Эти версии являются современной версией JavaScript.

Веб-стандарты, принятые LWC:

  • Веб-компоненты
  • Шаблоны
  • Пользовательские элементы
  • Теневой DOM
  • Метаданные
  • ECMAScript 7
  • События
  • Стандартные элементы
  • Визуализация

Теперь давайте подробнее обсудим важные стандарты JS и изменения, о которых вам необходимо знать, прежде чем начинать работу с веб-компонентами Lightning.

1. Декораторы

2. DispatchEvent и CustomEvent

3. Селекторы запросов

4. Импорт/экспорт

5. Расширенное обозначение

6. Слоты

7. Обещания

8. Интерполяция строк + Let/Const

Давайте обсудим эти стандарты один за другим..!

1. Декораторы:
Декоратор — это просто шаблон проектирования, который позволяет нам добавлять поведение к отдельному объекту.
В основном в веб-компоненте Lightning используются три декоратора. Это:

@track :

  • Используется для свойства частного реактивного объекта/массива.
  • Отслеживаемые свойства можно использовать только в том компоненте, в котором они определены.

@api :

  • Используется для предоставления общедоступного свойства.
  • Делает свойство реактивным.
  • Если используется с функцией, то она делает функцию доступной за пределами компонента.

@wire :

  • Используется для доступа к данным Salesforce.
  • Когда проводная служба предоставляет данные, компонент повторно визуализируется.

2. DispatchEvent и CustomEvent:

  • Пользовательские события могут быть преобразованы из дочерних в родительские.
  • Чтобы создать событие, используйте конструктор CustomEvent(). Чтобы отправить событие, вызовите метод EventTarget.dispatchEvent().

Рассмотрение:

Конструктор CustomEvent() имеет один обязательный параметр — строку, указывающую тип события. Как автор компонента, вы указываете тип события при его создании. Вы можете использовать любую строку в качестве типа события. Однако мы рекомендуем вам соответствовать стандарту событий DOM.

  • Нет заглавных букв
  • Нет пробелов
  • Используйте подчеркивание для разделения слов

СИНТАКСИС:

//Диспетчер событий

// contactListItem.js
import { LightningElement, api } from 'lwc';

export default class ContactListItem extends LightningElement {
    @api contact;

    selectHandler(event) {
        // Prevents the anchor element from navigating to a URL.
        event.preventDefault();

        // Creates the event with the contact ID data.
        const selectedEvent = new CustomEvent('selected', { detail:   this.contact.Id });

        // Dispatches the event.
        this.dispatchEvent(selectedEvent);
    }
}

// Образец списка событий

<c-contact-list-item key={contact.Id} contact={contact} onselected={contactSelected}></c-contact-list-item>

3. селектор запросов:

Чтобы получить доступ к элементам, отображаемым компонентом, используйте свойство template.

this.template.querySelector();
this.template.querySelectorAll();

ПРИМЕЧАНИЕ Вы также можете использовать element.template.querySelector.

4. Импорт/экспорт (ECMAScript 6):

В архитектуре ES6 JS мы можем экспортировать переменные или функции в файл JS, чтобы их можно было использовать в других модулях.

Здесь мы создадим простой калькулятор, используя функции импорта/экспорта в среде веб-компонента Lightning. Давайте проверим это.

//образец TemperatureConversion.js

const convertCelsiusToFahrenheit = (c) => {
    return (9/5)*c + 32 ;
};

const convertFahrenheitToCelsius = (f) => {
    return 5/9 * (f-32);
};

export {
    convertCelsiusToFahrenheit,
    convertFahrenheitToCelsius
}

// sampleTemperatureCalculator.js (импорт вышеуказанных функций с помощью импорта)

import { LightningElement, track } from 'lwc';
import { convertCelsiusToFahrenheit } from 'c/temperatureCalculator';
import { convertFahrenheitToCelsius } from 'c/temperatureCalculator';
export default class TemperatureDemo extends LightningElement {
    @track type;
    @track temp;
    @track result;
    conversionType = [
        { label: "Celsius To Fahrenheit", value: "c2f" },
        { label: "Fahrenheit To Celsius", value: "f2c" }
    ];
    fetchTemperature(event){
        this.temp = event.target.value;
    }
    fetchConversionType(event){
        this.type = event.target.value;
    }
    calculateTemperature(){
        if(this.type === "c2f"){
            this.result = convertCelsiusToFahrenheit(this.temp);
        } else{
            this.result = convertFahrenheitToCelsius(this.temp);
        }                
    }
}

5. Расширенная нотация (ECMAScript 9):

  • Эта нотация распространения — это способ явного копирования данных из одного массива в другой, когда мы его используем.
function eats(fruit1, fruit2, fruit3) {    
  console.log('Monkey loves eating ', fruit1 + ', ' + fruit2 + ' and     ' + fruit3);
} 
let fruits = ['apple', 'mango', 'banana']; 
eats(...fruits); // here using spread notation to pass array values

6. Слоты:

  • В приведенном ниже примере есть безымянный слот. Безымянный слот — это заполнитель для любой разметки, которую родительский компонент передает в тело любого компонента.
    <!-- slotDemo.html -->
    <template>
    <h1>Add content to slot</h1>
    <div>
    <slot></slot>
    </div>
    </template>

Вот разметка для родительского компонента, использующего c-slot-demo.

<!-- slotWrapper.html -->
<template>
    <c-slot-demo>
        <p>content from parent</p>
    </c-slot-demo>
</template>

Так что просто вставьте свой контент внутрь, используя слоты.

7. Обещания:

  • "Promise позволяет асинхронным методам возвращать значения, как и синхронные методы: вместо немедленного возврата конечного значения асинхронный метод возвращает обещание предоставить значение в какой-то момент в будущем" ~ MDN
  • Обещание может иметь одно из следующих состояний
  • ожидание: это начальное состояние. Оно не выполняется и не отвергается.
  • выполнено: обещание успешно выполнено.
  • отклонено: обещание не выполнено или возникла ошибка.

Мы можем использовать несколько методов JavaScript для связывания промисов.

  • обещание.тогда()
  • обещание.поймать()
  • обещание.наконец()

Ниже приведен пример кода, который показывает, как использовать промисы:

const sampleAsynchronousMethod = (resolve, reject) => {
setTimeout(() => {
resolve('Resolved Asynchronous Output!'); 
//reject('Rejected Asynchronous Output!');
}, 500);
}
// resolve funtion call on fulfilled
// reject funtion call on rejected
new Promise(sampleAsynchronousMethod)
.then((value) => {
// If the promise resolves
console.log(value); // Output : Resolved Asynchronous Output!
})
.catch((error) => {
// If the promise rejects
console.log(error); // Output : Rejected Asynchronous Output!
})
.finally(() => {
console.log('Hurray !'); // Output: Hurray !
})
// Final output: Resolved Asynchronous Output! Hurray !

8. Интерполяция строк (ECMAScript) + Let/Const
Вы устали от объединения строк и переменных в шаблоне строк? Не волнуйся!!

Интерполяция строк позволяет встраивать выражения в строку.

Он использует обратную галочку (``), а не одинарные или двойные кавычки.

Ex:

let planet= "Mars";
console.log(`One day we will go on ${planet}.`);
Output: One day we will go on Mars.

и видим, что переменная planet заключена в ${}. Вы также можете использовать выражения, как показано ниже.

let num1 = 10;
let num2 = 20;
console.log(`The sum of ${num1} and ${num2} is ${num1+num2}.`);
Output: The sum of 10 and 20 is 30.

Let, var и Const :

  • var имеет глобальную область видимости. даже если мы повторно объявим переменную var, ошибка не возникнет.
  • let имеет блочную область видимости. мы не можем повторно объявить переменную let.
  • const необходимо инициализировать при объявлении. Мы не можем повторно присвоить какое-либо значение переменной const позже. Это навсегда навсегда, как следует из названия ...!