デコレーターとは何なのかを簡単に説明します。 Vue でデコレータを使用するにはどうすればよいですか?

デコレータとは何ですか?この記事ではデコレータについて紹介し、jsやvueでのデコレータの使い方を簡単に紹介しますので、お役に立てれば幸いです。

# 開発中に二次的なポップアップ確認が必要になったことがあると思います。 UI フレームワークの 2 番目のポップアップ コンポーネントを使用しているか、独自のカプセル化されたポップアップ コンポーネントを使用しているか。いずれも、複数回使用すると大量のコードが繰り返される問題を避けることはできません。これらのコードが蓄積されると、プロジェクトの可読性が低下します。プロジェクトのコードの品質も非常に悪くなりました。では、ポップアップ コードが重複する問題はどのように解決すればよいでしょうか? デコレータの使用

デコレータとは何ですか?

Decorator は ES7 の新しい構文です。 Decoratorクラス、オブジェクト、メソッド、プロパティを装飾します。それにいくつかの追加の動作を追加します。平たく言えば、コードの一部を二次的にパッケージ化したものです。

デコレータの使用法

使用方法は非常に簡単で、関数を定義します

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

デコレータの目的はコードを再利用することです。まずは小さな例を見てみましょう。

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)

デコレータを使用しない

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);

この比較では、デコレータを使用した後のコードの可読性が向上していることがわかります。もっと強くなる。デコレータは内部コードの実装を気にしません。

vue でのデコレータの使用

プロジェクトが vue-cli でビルドされており、vue-cli のバージョンが 2.5 以降の場合は、設定なしで使用できます。プロジェクトに eslit も含まれている場合は、eslit でのデコレータ関連の構文検出のサポートを有効にする必要があります。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

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

このコードを追加すると、eslit はデコレータ構文をサポートします。

通常、プロジェクトでは、削除操作に 2 番目のポップアップ ボックスをよく使用します。

//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
  }
}

上記のコード確認メソッドは、element-ui の MessageBox コンポーネントを実行します。ユーザーがキャンセルすると、Message コンポーネントはユーザーに操作をキャンセルするよう求めます。

test() メソッドをデコレータで装飾しましょう

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('操作成功!')
  }
}

このとき、ユーザーはストアをクリックして削除します。デコレーターが活躍します。ポップアップは次のとおりです。

キャンセルをクリックしたとき:

ヒント: ユーザーは操作をキャンセルしました。変更されたテスト メソッドは を実行しません。

[OK] をクリックすると:

インターフェイスが呼び出され、メッセージがポップアップ表示されます

概要

デコレータコードの一部を再パッケージ化するために使用されます。いくつかの動作操作と属性をコードに追加します。デコレータを使用すると、コードの重複を大幅に減らすことができます。コードの可読性を向上させます。

最後に

記事に不備がございましたら、ご批判、ご指摘をお願いいたします。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がデコレーターとは何なのかを簡単に説明します。 Vue でデコレータを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。