Analisis ringkas tentang apa itu penghias? Bagaimana untuk menggunakan penghias dalam Vue?

Apakah itu penghias? Artikel ini akan membawa anda memahami penghias dan memperkenalkan secara ringkas cara menggunakan penghias dalam js dan vue saya harap ia akan membantu anda.

Saya percaya bahawa anda mesti menghadapi keperluan untuk pengesahan pop timbul sekunder semasa pembangunan. Sama ada anda menggunakan komponen pop timbul sekunder rangka kerja UI atau komponen pop timbul terkapsul anda sendiri. Kesemua mereka tidak dapat mengelakkan masalah sejumlah besar kod berulang apabila digunakan beberapa kali. Pengumpulan kod ini mengakibatkan kebolehbacaan projek yang lemah. Kualiti kod projek juga menjadi sangat teruk. Jadi bagaimana kita menyelesaikan masalah kod timbul pendua? Menggunakan Penghias

Apakah itu penghias?

Decorator ialah sintaks baharu untuk ES7. DecoratorDengan mengubah suai kelas, objek, kaedah dan sifat. Tambahkan beberapa tingkah laku tambahan kepadanya. Dalam istilah orang awam: ia adalah pembungkusan sekunder sekeping kod.

Penggunaan penghias

Kaedah penggunaannya sangat mudah. ​​Kami mentakrifkan fungsi

const  decorator =  (target, name, descriptor) => {
 var oldValue = descriptor.value；
 descriptor.value = function(){
    alert('哈哈')
    return oldValue.apply(this,agruments)
       }
  return descriptor
}
// 然后直接@decorator到函数、类或者对象上即可。

Tujuan penghias adalah untuk menggunakan semula kod. Mari kita ambil contoh kecil untuk melihat

Menggunakan penghias dalam js

//定义一个装饰器 
const log = (target, name, descriptor) => {
  var oldValue = descriptor.value;
  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };
  return descriptor;
}
   //计算类
  class Calculate {  
 
  //使用装饰器
  @log() 
  function  subtraction(a,b){
     return  a - b
   }
 }
 
 const operate  = new Calculate()
  operate.subtraction(5,2)

Tidak menggunakan penghias

const log = (func) => {
  if(typeof(func) !== 'function') {
    throw new Error(`the param must be a function`);
  }
  return (...arguments) => {
    console.info(`${func.name} invoke with ${arguments.join(',')}`);
    func(...arguments);
  }
}

const subtraction = (a, b) => a + b;

const subtractionLog = log(subtraction);

subtractionLog(10,3);

Dalam perbandingan ini, anda akan mendapati bahawa menggunakan penghias The kebolehbacaan kod di belakang pengkompil telah menjadi lebih kuat. Penghias tidak mengambil berat tentang pelaksanaan kod dalaman anda.

Menggunakan penghias dalam vue

Jika projek anda dibina dengan vue-cli dan versi vue-cli lebih besar daripada 2.5, anda boleh menggunakannya tanpa sebarang konfigurasi. Jika projek anda juga mengandungi eslit, maka anda perlu mendayakan sokongan untuk pengesanan sintaks berkaitan penghias dalam eslit. [Cadangan berkaitan: tutorial video vue.js]

//在 eslintignore中添加或者修改如下代码:
parserOptions: {
    ecmaFeatures:{
      // 支持装饰器
      legacyDecorators: true
    }
  }

Selepas menambahkan kod ini, eslit akan menyokong sintaks penghias.

Biasanya dalam projek kami sering menggunakan kotak pop timbul sekunder untuk operasi pemadaman:

//decorator.js
//假设项目中已经安装了 element-ui
import { MessageBox, Message } from 'element-ui'
/**
 * 确认框
 * @param {String} title - 标题
 * @param {String} content - 内容
 * @param {String} confirmButtonText - 确认按钮名称
 * @param {Function} callback - 确认按钮名称
 * @returns
   **/
export function confirm(title, content, confirmButtonText = '确定') {
  return function(target, name, descriptor) {
    const originValue = descriptor.value
    descriptor.value = function(...args) {
      MessageBox.confirm(content, title, {
        dangerouslyUseHTMLString: true,
        distinguishCancelAndClose: true,
        confirmButtonText: confirmButtonText
      }).then(originValue.bind(this, ...args)).catch(error => {
        if (error === 'close' || error === 'cancel') {
          Message.info('用户取消操作'))
        } else {
          Message.info(error)
        }
      })
    }
    return descriptor
  }
}

Kod di atas dalam kaedah pengesahan melaksanakan komponen MessageBox dalam elemen-ui apabila pengguna Apabila membatalkan, komponen Message akan menggesa pengguna untuk membatalkan operasi.

Kami menghiasi kaedah test() dengan penghias

import { confirm } from '@/util/decorator'
import axios form 'axios'
export default {
name:'test',
data(){
return {
  delList: '/merchant/storeList/commitStore'
    }
  }
},
methods:{
 @confirm('删除门店','请确认是否删除门店？')
  test(id){
   const {res,data} = axios.post(this.delList,{id})
   if(res.rspCd + '' === '00000') this.$message.info('操作成功!')
  }
}

Pada masa ini, pengguna mengklik pada kedai untuk memadamkannya. Penghias akan berfungsi. Pop timbul adalah seperti yang ditunjukkan di bawah:

Apabila saya mengklik batal:

petua: The pengguna membatalkan Operasi Kaedah ujian yang diubah suai tidak akan melaksanakan .

Apabila kita klik OK:

Antara muka dipanggil dan mesej muncul

Ringkasan

Penghias digunakan Untuk membungkus semula sekeping kod. Tambahkan beberapa operasi tingkah laku dan atribut pada kod. Menggunakan penghias boleh mengurangkan pertindihan kod dengan banyak. Tingkatkan kebolehbacaan kod.

Akhir sekali

Sekiranya ada kekurangan dalam artikel tersebut, sila tegur dan tunjuk.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis ringkas tentang apa itu penghias? Bagaimana untuk menggunakan penghias dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!