Apakah mod yang vue gunakan?

Corak reka bentuk yang digunakan oleh vue: 1. Mod Singleton memastikan bahawa kelas hanya mempunyai satu objek contoh dan menyediakan pusat akses global untuk aksesnya. 2. Corak kilang ialah corak yang digunakan untuk mencipta objek Ia tidak perlu untuk mendedahkan logik khusus pembina, tetapi untuk merangkum logik dalam setiap fungsi. 3. Mod penghias membenarkan menambah fungsi baharu pada fungsi sedia ada tanpa mengubah strukturnya. 4. Corak strategi adalah untuk menentukan satu siri algoritma, merangkumnya satu demi satu, dan menjadikannya boleh ditukar ganti. 5. Model penerbitan pelanggan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Apakah corak reka bentuk:

Prinsip corak reka bentuk adalah untuk mencari perubahan dalam program dan merangkum perubahan untuk mencapai kebolehgunaan semula yang cekap. Intinya adalah niat, bukan struktur. Corak reka bentuk boleh membantu kami meningkatkan kebolehgunaan semula, kebolehskalaan, kebolehselenggaraan dan fleksibiliti kod. Matlamat utama kami dalam menggunakan corak reka bentuk adalah untuk mencapai kelompok tinggi dan gandingan rendah kod. Pernahkah anda terfikir tentang soalan ini, bagaimana untuk menjadikan kod lebih mantap Sebenarnya, terasnya terletak pada memahami perubahan dan kebolehubahan. Pastikan bahagian yang berubah lebih fleksibel dan bahagian yang tidak berubah adalah lebih stabil, dan menggunakan corak reka bentuk membolehkan kami mencapai matlamat ini.

Mari kita ringkaskan corak reka bentuk yang biasa digunakan dalam projek atau kerja vue.

Singleton Pattern

Singleton Pattern: Pastikan kelas mempunyai hanya satu objek contoh dan menyediakan akses global Klik untuk akses.

Kelebihan: Berkenaan dengan objek tunggal, hanya menjana satu contoh objek, mengelakkan penciptaan dan pemusnahan kejadian yang kerap, dan mengurangkan penggunaan memori.

Kelemahan: Tidak berkenaan dengan objek yang dipanjangkan secara dinamik.

Senario: Log masuk tetingkap terapung, contoh aksios dalam Vue (kami melakukan pemintasan permintaan dan pemintasan tindak balas pada aksios, panggil aksios terkapsul beberapa kali tetapi tetapkan sekali sahaja, Eksport aksios terkapsul ialah singleton), stor pengurusan negeri global, kumpulan benang, cache global

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

Mod kilang

Mod kilang: Corak Kilang ialah corak reka bentuk yang paling biasa digunakan untuk mencipta objek. Ia tidak perlu untuk mendedahkan logik khusus pembina, tetapi untuk merangkum logik dalam setiap fungsi, maka pembina ini boleh dianggap sebagai kilang.

Senario: Di mana terdapat pembina, banyak kod pembina ditulis dan banyak operator baharu dipanggil.

Kelebihan: Melalui corak kilang, kami boleh mencipta sebilangan besar objek serupa dengan pantas tanpa menduplikasi kod.

Kelemahan: Objek yang dicipta oleh corak kilang tergolong dalam Objek, dan jenis objek tidak dapat dibezakan Inilah sebabnya corak kilang tidak digunakan secara meluas.

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

Mod Penghias

Mod Penghias (AOP Pengaturcaraan Aspek) : Tanpa menukar objek itu sendiri Pada asas, tanggungjawab ditambah secara dinamik pada objek semasa menjalankan program jika badan fungsi diubah suai secara langsung, ia melanggar 'prinsip terbuka dan tertutup' dan juga melanggar 'prinsip tanggungjawab tunggal' kami; tambah fungsi sedia ada pada Fungsi tambah fungsi baharu tanpa mengubah strukturnya.

Senario: Pengesahan borang dan penyerahan borang dalam vue menggunakan model ini dan ikut prinsip tertutup dan terbuka.

 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('切入后代码')
  })()

Mod Strategi

Mod Strategi: Ia adalah untuk mentakrifkan satu siri algoritma dan merangkumnya satu oleh satu dan menjadikannya boleh ditukar ganti.

 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
  }

Anda juga boleh menggunakan

// 这里可以将所有的表单验证正则函数写在这里
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'] }]
 }

mod pelanggan terbitkan

Corak Penerbit-PelangganJuga dipanggil Corak Pemerhati, Corak Penerbit-PelangganPerhubungan pergantungan satu-dengan-banyak, apabila keadaan objek Apabila perubahan berlaku, semua objek yang bergantung padanya mesti dimaklumkan; Corak pemerhati ialah hubungan pergantungan satu dengan satu.

• Mod pemerhati tulisan tangan

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

• Tulisan tangan responsif

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 = '正在测试'

[Cadangan berkaitan: video vuejs tutorial, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah mod yang vue gunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!