javascript进阶学习：js的工厂设计模式

工厂设计模式是另外一种对象创建的设计模式，它与其他设计模式不相同，它不要求我们去使用具体的构造器，工厂的设计开发模式主要是提供一个公共的接口，然后开发者只需要告知需要用到哪个，js中就会自动的返回对应的给使用者，如果在“工厂”也就是外部封装的js并没有找到想要的内容板块，那么开发者还可以针对“工厂”原有的基础上去进行拓展。

1、封装js校验库

简单的封装一个js库用于去校验不同类型的表单项，那么最快的方法是会进行如下实现：
开发使用的部分：

// 引入自己封装的校验库

    电话号码：
    

    电子邮箱
    

    邮政编码：
    

    检验

封装的factoryCheck的js校验库：

function factoryCheck(type,value){
    let success = '校验成功!';
    let error = '校验失败!';
    if(type == 'telephone'){
        // 判断是需要校验的手机号码
        if(/^1[3-9]\d{9}$/.test(value)){
            return success
        }else {
            return error
        }
    }
    if(type == 'email'){
        // 判断是需要校验的电子邮箱
        if(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
            return success
        }else {
            return error
        }
    }
    if(type == 'postal'){
        // 判断是需要校验的邮政编码
        if(/^[1-9]\d{5}$/.test(value)){
            return success
        }else {
            return error
        }
    }
}

image.png

其他的开发者使用手机号的校验是成功的校验了的，但是这种封装校验库，存在一个弊端，那就是如果校验库中没有，而其他的开发者想要去自行拓展，那么只存在一种处理方式，那就是修改封装好的源码，这就与封装的基本原则相违背，那么就需要使用工厂模式去进行改进设计。

2、工厂模式去设计

工厂模式的一些例子可以在UI库里面找到，例如ExtJS, 用于创建对象或者组件的方法可以被做更深层次的子类。 使用构造器模式逻辑来重写校验库
开发使用的部分：

    电话号码：
    

    电子邮箱
    

    邮政编码：
    

    检验

js校验库的封装：

function factoryCheck(type, value) {
    if (this instanceof factoryCheck) {
        // 如果开发者new了一个实例
        var res = new this[type](value);
        return res;
    } else {
        // 直接调用，this指向的window
        return new factoryCheck(type, value);
    }
}

var success = '符合要求!';
var error = '不符合规则!';

factoryCheck.prototype = {
    telephone: function (value) {
        console.log(this);
        //  判断是需要校验的手机号码
        if (/^1[3-9]\d{9}$/.test(value)) {
            this.msg = success
        } else {
            this.msg = error;
        }
    },
    email: function (value) {
        // 判断是需要校验的电子邮箱
        if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
            this.msg = success
        } else {
            this.msg = error;
        }
    },
    postal: function (value) {
        // 判断是需要校验的邮政编码
        if (/^[1-9]\d{5}$/.test(value)) {
            this.msg = success
        } else {
            this.msg = error;
        }
    }
}

使用.png

3、其他的开发者自行拓展规则库

当其他的开发者使用js库时发现没有想要的模块内容，那么他们可以根据暴露出去的接口，自行的做一套校验方法。

自行添加的name校验：

    
    
    



    姓名：
    

    电话号码：
    

    电子邮箱
    

    邮政编码：
    

    检验

自行拓展校验用户名的规则库.png

可以看出来，自行拓展的规则库方法也是能够使用，这样，就可以不修改库文件的源码，也能不断的根据不同的需求去添加拓展。