Wj-design-art NPM

描述

让javascript使用设计模式更简单

安装

npm i wj-design-art -S

使用

责任链模式的API

ResChain类

类	说明	入参
ResChain	constructor(handleFn: HandleFn, transaction?: any, next?: ResChain)	HandleFn:处理事务的函数，transaction：事务， next：下一个处理对象

实例方法或属性

名称	说明	入参	出参
setNext	设置下一个处理对象，setNext(next: ResChain)	next: 下一个处理对象	void
handle	开始处理事务，handle(transaction?: any)	transaction：要处理的事务	void

责任链模式的使用

import designArt from 'wj-design-art';

// 要处理的事务
const count = 1100;

// 部门处理事务的函数
function deptHandleFn(transaction: any) {
    return new Promise((resolve) => {
        setTimeout(function() {
            if(transaction >= 500) {
                console.log(transaction + '部门不能解决，给单位')
                resolve({
                    isNext: true
                });
            } else {
                resolve({
                    isNext: false
                });
            }
        }, 1000);
    });
}

// 单位处理事务的函数
function companyHandleFn(transaction: any) {
    return new Promise((resolve) => {
        setTimeout(function() {
            if(transaction >= 1000) {
                console.log(transaction + '单位不能解决，给集团');
                resolve({
                    isNext: true
                });
            } else {
                resolve({
                    isNext: false
                });
            }
        }, 1000);
    });
}

// 集团处理事务的函数
function groupHandleFn(transaction: any) {
    return new Promise((resolve) => {
        setTimeout(function() {
            console.log(transaction + '集团解决了')
            resolve({
                isNext: false
            });
        }, 1000);
    });
}

const dept = new designArt.ResChain(deptHandleFn, count);
const company = new designArt.ResChain(companyHandleFn, count);
const group = new designArt.ResChain(groupHandleFn, count);

dept.setNext(company);
company.setNext(group);

// 或者不用setNext函数，直接给定下一处理对象
// const group = new designArt.ResChain(groupHandleFn, count);
// const company = new designArt.ResChain(companyHandleFn, count, group);
// const dept = new designArt.ResChain(deptHandleFn, count, company);

dept.handle();

// 输出结果为
// 1100部门不能解决，给单位
// 1100单位不能解决，给集团
// 1100集团解决了

单例模式API

名称	说明	入参	出参
singles	一个属性，所有的单例	none	none
add	增加单例，add(_class: any, classname: string = _class.name, ...args: any[])	_class：类，classname：类名，...args：实例化类时的参数	void
del	删除单例，del(key: string)	key：要删除的键	void
clear	清空，clear()	none	void

单例模式的使用

import designArt from 'wj-design-art';
const { singleCase } = designArt;

class A {
    getName() {
        return 'wj';
    }
}
class B {
    getName() {
        return 'jack';
    }
}
class C {
    public myname: string;
    constructor(name: string) {
        this.myname = name;
    }
    getName() {
        return this.myname;
    }
}
singleCase.add(A); // {A: instance}
singleCase.add(B, 'singleB'); // {A: instance, singleB: instance}
singleCase.add(C, 'singleC', 'cname'); // {A: instance, singleB: instance, singleC: instance}
const singles = singleCase.singles; // {A: instance, singleB: instance, singleC: instance}
console.log(singles.A.getName()); // wj
console.log(singles.singleB.getName()); // jack
console.log(singles.singleC.getName()); // cname
singleCase.del('A'); // {singleB: instance, singleC: instance}
singleCase.del('singleB'); // {singleC: instance}
singleCase.clear(); // {}

命令模式

命令模式API

Command 类

类	说明	入参
Command	命令模式类	none

实例方法

名称	说明	入参	出参
add	添加命令， add(command: CommandItem)	command：函数或者是实现了ICommand接口的实例	Command
remove	删除命令，remove(command: CommandItem)	command：函数或者是实现了ICommand接口的实例	Command
undo	撤销命令，删除最后一次添加的命令，undo()	none	Command
reset	重置命令，清空所有命令，reset()	none	Command
execute	执行所有的命令，execute()	none	void

命令模式的使用

import designArt from 'wj-design-art';
import { ICommand } from 'wj-design-art/lib/types/Command/types';

const { Command } = designArt;

const command = new Command();

class One implements ICommand {
    execute() {
        console.log('one');
    }
}

const one = new One();

function two() {
    console.log('command two');
}

command.add(one).add(two);

command.add(function() {
    console.log('command three');
});

// one,command two,command three

command.remove(one); // command two,command three

command.undo(); // command two

command.execute(); // command two