vue运用的模式有哪些
这篇文章主要介绍“vue运用的模式有哪些”,在日常操作中,相信很多人在vue运用的模式有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue运用的模式有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:做网站、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的普兰网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
vue运用的设计模式:1、单例模式,确保一个类只有一个实例对象,并提供一个全局访问点供其访问。2、工厂模式,是用来创建对象的一种模式,不必暴露构造函数的具体逻辑,而是将逻辑封装在一个个函数之中。3、装饰器模式,允许向现有的函数添加新的功能,同时不改变其结构。4、策略模式,就是定义一系列的算法,把他们一个个封装起来,并且使他们可以相互替换。5、发布订阅者模式。
什么是设计模式:
设计模式的原则是找出程序中的变化,并将变化封装起来,实现高效的可复用性。核心在于意图,而不在结构。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性。我们使用设计模式的最终目的是为了实现代码的高类聚和低耦合。你是否思考过这样的一个问题,如何让代码写的更有健壮性,其实核心在于把握变与不变。确保变的部分更加灵活,不变的地方更加稳定,而使用设计模式可以让我们达到这样的目的。
下面来总结一下vue项目中或者说工作中常用的设计模式。
单例模式
单例模式:确保一个类只有一个实例对象,并提供一个全局访问点供其访问。
优点:适用于单一对象,只生成一个对象实例,避免频繁创建和销毁实例,减少内存占用。
缺点:不适用动态扩展对象。
场景:登录浮窗、Vue中的axios实例(我们对axios进行请求拦截和响应拦截,多次调用封装好的axios但是仅设置一次,封装好的axios导出就是一个单例)、全局态管理 store、线程池、全局缓存
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()
工厂模式
工厂模式:工厂模式是用来创建对象最常见的一种设计模式。不必暴露构造函数的具体逻辑,而是将逻辑封装在一个个函数之中,那么这个构造函数就可以被看做工厂。
场景: 有构造函数的地方,写了大量的构造函数代码,调用了大量的new操作符。
优点:通过工厂模式,我们可以快速创建大量相似对象,没有重复代码。
缺点:工厂模式创建的对象属于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('切入后代码')
})()
策略模式
策略模式: 就是定义一系列的算法,把他们一个个封装起来,并且使他们可以相互替换。
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'] }]
}
发布订阅者模式
发布订阅者模式又叫观察者模式,发布订阅者模式一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得将得到通知;观察者模式则是一种一对一的依赖关系。
手写观察者模式
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 = '正在测试'
到此,关于“vue运用的模式有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
当前文章:vue运用的模式有哪些
文章出自:http://scyanting.com/article/gicood.html