Bagaimana untuk memahami penghias es6

Dalam es6, corak penghias ialah teori reka bentuk yang memanjangkan fungsi objek secara dinamik tanpa mengubah kelas asal dan menggunakan pewarisan adalah fungsi biasa, digunakan untuk atribut Kelas lanjutan dan kelas kaedah. Kelebihan menggunakan penghias: 1. Kod menjadi lebih mudah dibaca, dan penamaan penghias adalah setara dengan ulasan 2. Fungsi asal boleh dikembangkan tanpa mengubah kod asal.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Bagaimana untuk memahami Penghias dalam ES6?

Penghias, penghias, dari namanya dengan mudah boleh mengingatkan kita tentang corak penghias

Ringkasnya, corak penghias ialah kaedah yang tidak mengubah Kelas asal dan teori reka bentuk memanjangkan fungsi objek secara dinamik menggunakan pewarisan.

Hal yang sama berlaku untuk fungsi Penghias dalam ES6 Intipatinya bukanlah struktur tinggi, ia adalah fungsi biasa yang digunakan untuk melanjutkan atribut kelas dan kaedah kelas

Seorang askar ditakrifkan di sini. Dia tidak mempunyai peralatan

class soldier{ 
}

Tentukan fungsi untuk mendapatkan peralatan AK, iaitu penghias

function strong(target){
    target.AK = true
}

Gunakan penghias ini untuk meningkatkan askar

@strong
class soldier{
}

Pada masa ini, tentera mempunyai senjata

soldier.AK // true

Walaupun kod di atas mudah, anda boleh melihat dengan jelas dua kelebihan menggunakan Decorator:

• Kod tersebut mempunyai menjadi lebih mudah dibaca dan penamaan penghias adalah bersamaan dengan ulasan

• Melanjutkan fungsi asal tanpa menukar kod asal

Penggunaan penghias

Objek yang diubah suai doktor ialah dua jenis berikut:

• Hiasan kelas

• <>

  Hiasan atribut kelas

Hiasan kelas

Apabila menghias kelas itu sendiri, Boleh menerima satu parameter, iaitu kelas itu sendiri

Uraikan tingkah laku penghias, dan semua orang boleh mempunyai pemahaman yang lebih mendalam

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

Yang berikut @testable ialah penghias, dan sasarannya ialah pas Kelas yang diimport, MyTestableClass, melaksanakan penambahan atribut statik kepada kelas

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

Jika anda ingin menghantar parameter, anda boleh merangkum lapisan fungsi di luar penghias

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

Hiasan atribut kelas

Apabila menghias atribut kelas, ia boleh menerima tiga parameter:

• Objek prototaip kelas

• Nama atribut yang perlu dihias

• Objek perihalan nama atribut yang dihias

Mula-mula tentukan penghias baca sahaja

function readonly(target, name, descriptor){
  descriptor.writable = false; // 将可写属性设为false
  return descriptor;
}

Menggunakan baca sahaja untuk menghias kaedah nama kelas

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

sama dengan panggilan berikut

readonly(Person.prototype, 'name', descriptor);

Jika kaedah mempunyai berbilang penghias, ia seperti bawang , mula-mula masukkan dari luar ke dalam, dan kemudian laksanakan dari dalam ke luar

function dec(id){
    console.log('evaluated', id);
    return (target, property, descriptor) =>console.log('executed', id);
}

class Example {
    @dec(1)
    @dec(2)
    method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

Penghias luar @dec(1) masuk dahulu, tetapi penghias dalam @dec(2) laksanakan dahulu

Nota

Penghias tidak boleh digunakan untuk menghiasi fungsi kerana terdapat pengisytiharan berubah dalam fungsi

var counter = 0;

var add = function () {
  counter++;
};

@add
function foo() {
}

Peringkat penyusunan , menjadi seperti berikut

var counter;
var add;

@add
function foo() {
}

counter = 0;

add = function () {
  counter++;
};

Niatnya ialah pembilang adalah sama dengan 1 selepas pelaksanaan, tetapi hasil sebenar ialah pembilang itu sama dengan 0

Senario penggunaan penghias

Berdasarkan fungsi berkuasa Penghias, kami boleh memenuhi keperluan pelbagai senario Berikut adalah beberapa:

Apabila menggunakan react-redux, jika ia ditulis dalam perkara berikut. bentuk, kedua-duanya Tak sedap dipandang dan menyusahkan

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

Ia menjadi lebih mudah melalui penghias

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

Mixin juga boleh ditulis sebagai penghias, menjadikan penggunaan lebih ringkas

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}

// 使用
const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // "foo"

Mari kita bincangkan tentang beberapa penghias biasa dalam penghias teras.js

@antobind

Penghias autobind menjadikan objek ini dalam kaedah , mengikat objek asal

import { autobind } from 'core-decorators';

class Person {
  @autobind
  getPerson() {
    return this;
  }
}

let person = new Person();
let getPerson = person.getPerson;

getPerson() === person;
// true

@readonly

readonly penghias menjadikan sifat atau kaedah tidak boleh ditulis

import { readonly } from 'core-decorators';

class Meal {
  @readonly
  entree = 'steak';
}

var dinner = new Meal();
dinner.entree = 'salmon';
// Cannot assign to read only property 'entree' of [object Object]

@ tidak digunakan lagi

Penghias yang tidak digunakan atau tidak digunakan lagi memaparkan amaran pada konsol, menunjukkan bahawa kaedah itu akan ditamatkan

import { deprecate } from 'core-decorators';

class Person {
  @deprecate
  facepalm() {}

  @deprecate('功能废除了')
  facepalmHard() {}
}

let person = new Person();

person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.

person.facepalmHard();
// DEPRECATION Person#facepalmHard: 功能废除了

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web 】

Atas ialah kandungan terperinci Bagaimana untuk memahami penghias es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!