三个装饰器,都是利用了async/await把异步变成同步的特性实现的。
要求被装饰的方法必须写成async/await,用起来十分方便,实现彻底被隐藏在了装饰器内部。
前两个都是用在ts环境下class写法的vue里的。
不过看清楚逻辑后,很容易修改成可以用在js环境中的vue组件上。
用于ts环境下的vue
通过装饰器添加这个属性,并包装vue的created, mounted和beforeDestroy方法。
当created或者mounted里发出的请求完成后,就把pageIsReady设为true。
使用这个装饰器时,在业务代码中完全无感,没有任何心智负担。
import { Constructor } from "vue/types/options";
export type WrapReadyProperty<T> = T & { pageIsReady?: boolean }
/**
* 在@compontent 之后使用这个装饰器,
* 组件就会被注入属性 pageIsReady,
* 当created和mounted都执行完成时 pageIsReady 变成true,
* 要求mounted或created是async/await。(取决于在哪个方法中发请求初始化组件)
* 然后可以在template中直接使用。
* 在script中使用调用isPageReady.call(this)方法;
*/
export default function PageReadyStatus() {
let createdDone = false;
let mountedDone = false;
function isCreatedMountedAllDone() {
return createdDone && mountedDone;
}
return function pageReadyEnhancement<T extends Constructor>(target: T) {
const oldMounted = target.prototype.mounted || function() { }
const oldCreated = target.prototype.created || function() { }
const oldBeforeDestroy = target.prototype.beforeDestroy || function() { }
target.prototype.pageIsReady = false;
target.prototype.created = async function(...params: any[]) {
await oldCreated.apply(this, params);
createdDone = true;
this.pageIsReady = isCreatedMountedAllDone()
}
target.prototype.mounted = async function(...params: any[]) {
await oldMounted.apply(this, params);
mountedDone = true;
this.pageIsReady = isCreatedMountedAllDone()
}
target.prototype.beforeDestroy = async function(...params: any[]) {
await oldBeforeDestroy.apply(this, params);
mountedDone = false;
createdDone = false;
this.pageIsReady = false;
}
return target
};
}
export function isPageReady(this: WrapReadyProperty<Vue>) {
return this.pageIsReady
}
用于ts环境下的vue
通过装饰器包装被装饰的方法。
要求被包装的方式是async/await的。这样装饰器内只需要用一个await就可以得知被包装的方法是否执行完成。
同时,可以从事件对象中拿到被点击的dom元素并修改它。
/*
* 请保证被包装的方法的参数列表最后一个是点击事件的参数
*/
export default function buttonThrottle() {
let pending = false;
return function(target: any, name: string): any {
const btnClickFunc = target[name];
const newFunc = async function(this: Vue, ...params: any[]) {
if (pending) {
return;
}
const event:Event = params[params.length - 1];
let btn = event.target as htmlElement
pending = true;
const recoverCursor = changeCursor(btn);
try {
await btnClickFunc.apply(this, params);
} catch (error) {
console.error(error);
}
recoverCursor();
pending = false;
};
target[name] = newFunc;
return target;
};
}
function changeCursor(btn?: HTMLElement) {
if (btn == null) {
return () => {};
}
const oldCursor = btn.style.cursor;
btn.style.cursor = "wait";
return () => {
btn.style.cursor = oldCursor;
};
}
用法:
在点击事件函数上使用这个装饰器。
装饰器会自动检测该函数是否执行完成,并在执行过程中往按钮的Dom节点上添加point:wait属性
import { Component, Vue } from "vue-property-decorator";
import buttonThrottle from "@/ui/view/utils/buttonThrottle";
type Member = { account_no: string; name: string; warn?: string };
@Component({ components: {} })
export default class AddMemberInput extends Vue { @buttonThrottle()
private async confirmAdd() {
await this.addMembers(this.getVaildMembers());
}
}
用于js的vue中包装vue的对象
同上,通过async/await获得mounted或者created是否执行完成
再通过指向vue实力的this拿到组件根节点,然后按需修改它
以下代码只是将组件隐藏了,实际上可以写更复杂的逻辑,在加载过程中显示其他内容,毕竟拿到了Dom,想干嘛就干嘛。
function firstPaintControl(vueObj) {
let oldMounted = vueObj.mounted || function() {};
vueObj.mounted = async function(...params) {
this.$el.style.visibility = 'hidden';
await oldMounted.apply(this, params);
this.$el.style.visibility = 'visible';
};
return vueObj;
}
装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为。通俗的讲装饰器就是一个方法,可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
装饰器(Decorator)是ES7的一个语法,是一种与类相关的语法,用来注释或修改类和类的方法。装饰器是一种函数,写成 @ + 函数名。它可以放在类和类方法的定义前面
因为装饰器属于一个在提案中的语法,所以不管是node还是浏览器,现在都没有直接支持这个语法,我们要想使用该语法,就必须要通过babel将它进行一个编译转换,所以我们需要搭建一个babel编译环境。
TypeScript 是 JavaScript 语言的扩展,它使用 JavaScript 的运行时和编译时类型检查器。这种组合允许开发人员使用完整的 JavaScript 生态系统和语言功能
装饰器模式是一种经典的设计模式,它可以在不修改被装饰者(如某个函数、某个类等)源码的前提下,为被装饰者增加 / 移除某些功能(收集用户定义的类/函数的信息,例如用于生成路由表,实现依赖注入等等
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!