vue はどのようなモードを使用しますか?

vue で使用されるデザイン パターン: 1. シングルトン モードでは、クラスにインスタンス オブジェクトが 1 つだけ存在し、そのアクセスにグローバル アクセス ポイントが提供されます。 2. ファクトリ パターンは、オブジェクトを作成するために使用されるパターンであり、コンストラクターの特定のロジックを公開する必要はなく、各関数内にロジックをカプセル化する必要があります。 3. デコレータ モードでは、構造を変更せずに既存の機能に新しい機能を追加できます。 4. 戦略パターンは、一連のアルゴリズムを定義し、それらを 1 つずつカプセル化し、互換性を持たせることです。 5. パブリッシュ/サブスクライバー モデル。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

デザイン パターンとは:

デザイン パターンの原理は、プログラム内の変更を見つけて変更をカプセル化し、効率的な再利用性を実現することです。核となるのは構造ではなく意図です。デザイン パターンは、コードの再利用性、拡張性、保守性、柔軟性を強化するのに役立ちます。デザイン パターンを使用する際の最終目標は、コードの 高クラスタリングと 低結合を達成することです。コードをより堅牢にする方法について考えたことがありますか?実際、その核心は変化と不変性を把握することにあります。変化する部分はより柔軟になり、変化しない部分はより安定するようにし、デザイン パターンを使用することでこの目標を達成できます。

vue のプロジェクトや仕事でよく使われるデザインパターンをまとめてみましょう。

シングル ケース モード

シングル ケース モード: クラスにインスタンス オブジェクトが 1 つだけあることを確認し、グローバルを提供します。アクセス クリックしてアクセスしてください。

利点: 単一のオブジェクトに適用され、オブジェクト インスタンスが 1 つだけ生成されるため、インスタンスの頻繁な作成と破棄が回避され、メモリ使用量が削減されます。

欠点: 動的に拡張されたオブジェクトには適用できません。

シナリオ: フローティング ウィンドウ、Vue の axios インスタンスにログインします (axios でリクエスト インターセプトとレスポンス インターセプトを実行し、カプセル化された axios を複数回呼び出しますが、設定するのは 1 回だけです。カプセル化された axios エクスポートはシングルトン)、グローバル状態管理ストア、スレッド プール、グローバル キャッシュ

  function Person (name, age) {
    this.name = name
    this.age = age
    this.info = function () {
      console.log(`我的名字叫${this.name}, 我今年${this.age}了`)
    }
  }
  Person.getInstance = function (name, age) {
    if (!this.instance) {
      this.instance = new Person(name, age)
    }
    console.log(this.instance)
    return this.instance
  }
  let b1 = Person.getInstance('单例1', 18)
  let b2 = Person.getInstance('单例2', 18)
  b1.info()
  b2.info()

ファクトリ モード

ファクトリ モード: ファクトリ モードは、次のいずれかです。オブジェクトの作成に使用される最も一般的なデザイン パターン。コンストラクターの特定のロジックを公開する必要はありませんが、ロジックを各関数にカプセル化すると、このコンストラクターをファクトリーとみなすことができます。

シナリオ: コンストラクターがある場合、多くのコンストラクター コードが記述され、多くの新しい演算子が呼び出されます。

利点: ファクトリ パターンを使用すると、コードを複製することなく、類似したオブジェクトを多数迅速に作成できます。

欠点: ファクトリ パターンで作成されたオブジェクトは Object に属し、オブジェクトの種類を区別できないため、ファクトリ パターンはあまり普及していません。

 function Factory (name, age) {
   this.name = name;
   this.age = age;
   // 或者
   // let obj = {}
   // obj.name = name
   // obj.age = age
   // return obj
 }
 Factory.prototype.say = function () {
   console.log(`我的名字叫${this.name}, 我今年${this.age}了`)
 }
 let zs = new Factory('张三', 18);
 let ls = new Factory('李四', 20);
 zs.say()
 ls.say()

デコレータ モード

デコレータ モード (アスペクト プログラミング AOP): オブジェクト自体の基礎を変更せずにオン一方、責任はプログラムの実行中にオブジェクトに動的に追加されます。関数本体が直接変更されると、「オープンおよびクローズの原則」に違反し、「単一責任の原則」にも違反します。簡単に言うと、構造を変えることなく、既存の機能に新しい機能を追加できます。

シナリオ: vue でのフォーム検証とフォーム送信は、このモデルを使用し、クローズドおよびオープンの原則に従います。

 function before (fn, callback) {
    let _this = this;
    return function () {
      callback.apply(this, arguments)
      return fn.bind(this, arguments)
    }
  }

  function after (fn, callback) {
    let _this = this 
    return function () {
      let res = fn.apply(this, arguments)
      callback.apply(this, arguments)
      return res
    }
  }
  // before和after是两个高阶函数，让我们一起回忆一下什么是高阶函数？
  // 还知道call，apply,bind的区别吗
  let getName = function getName () {
    // 加入这是你同事写的烂代码，看不下去的那种，那么别动他的代码
    console.log('这是getName函数')
  }

  before(getName, function () {
    // 这个就是你要写的新逻辑
    console.log('切入前代码')
  })()

  after(getName, function () {
    // 这个也是你要写的新逻辑
    console.log('切入后代码')
  })()

戦略モード

戦略モード: 一連のアルゴリズムを定義し、それらを 1 つずつカプセル化することです。 . そしてそれらを交換可能にします。

 let strategy = {
    'A': function (bonus) {
      return bonus * 4
    },
    'B': function (bonus) {
      return bonus * 3
    }
  }

  function fn (level, bonus) {
    return strategy[level](bonus)
  }

  let result = fn('A', 4000)
  console.log(result, 'result')
  // 策略模式提供了开放-封闭原则，将算法或者方法封装在一个类中，使它们易于切换，易于替换。

  function func (a, b) {
    let f = function f() {
      return a + b
    }
    return f
  }

vue フォーム検証でも使用できます

// 这里可以将所有的表单验证正则函数写在这里
export const loginUsername = (str) => {
  return /^[a-zA-Z0-9_]{3,20}$/.test(str);
};

import * as validateForm from './validate';
export const gene = (key, msg) => {
  return (r, v, c) => {
    if (validateForm[key](v)) {
      c();
    } else {
      c(new Error(msg));
    }
  };
};

// 这样看着是不是很清晰明了
import {gene} from '@/utils/formValidateGene';
rules: {
     account: [{ required: true, validator: gene('loginUsername', '请输入合适的账号'), trigger: ['blur', 'change'] }]
 }

サブスクライバー モードの公開

サブスクライバー パターンの公開 は、オブザーバー パターン 、パブリッシュ サブスクライバー パターン とも呼ばれます。1 対多の依存関係です。オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトが全員に依存する必要があります。 Observer pattern は 1 対 1 の依存関係です。

手書きオブザーバー モード

• class Observer {
    client = {}
    // 订阅
    listen (key, fn) {
      if (!this.client[key]) {
        this.client[key] = []
      } 
        this.client[key].push(fn)
    }
    // 发布
    publish (key) {
      this.client[key].forEach(fn => {
        fn.apply(this, arguments)
      })
    }
  }
  
  let observer = new Observer()
  observer.listen('华为', (model, brand) => {
    console.log(model, brand)
  })
  observer.listen('苹果', function (model, brand) {
    console.log(model, brand)
  })
  observer.publish('华为', 'P50')
  observer.publish('苹果', '14')

手書きの応答性

• class EventEmitter {
      constructor () {
        this.client = {}
      }
      on (key, fn) {
        if (!this.client[key]) {
          this.client[key] = []
        }
        this.client[key].push(fn)
      }
      trigger (key, ...args) {
        this.client[key].forEach(cb => cb(...args))
      }
    }
    let event = new EventEmitter()
    event.on('hello', function(res) {
      console.log('hello', res)
    })
    
    let data = {
      name: '测试'
    }
    Object.defineProperty(data, 'name', {
      get (val) {
        // console.log(val)
      },
      set (newVal) {
        console.log(newVal)
        event.trigger('hello', newVal)
      }
    })
    data.name = '正在测试'

[関連する推奨事項:

vuejs ビデオ チュートリアル 、Web フロントエンド開発]

以上がvue はどのようなモードを使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。