建造者模式

Qwe7

发布于 2022-06-09 00:41:44

29700

代码可运行

文章被收录于专栏：网络收集网络收集

运行总次数：0

代码可运行

二、建造者模式

建造者模式注重创建对象的细节，使用这种模式创建出的复杂对象或者复合对象结构会非常清晰

1、建造者模式例子

比如有一家招聘中介公司，现在有一批纸质简历或者简历数据信息，为了做成统一的电子版简历，我们需要将这些信息进行整理，我们如何去做呢

// 未使用建造者模式前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    
    var data = [
        {
            name: 'zhang san',
            age: 24,
            work: 'engineer'
        },
        {
            name: 'li si',
            age: 25,
            work: 'teacher'
        },
        {
            name: 'wang wu',
            age: 26,
            work: 'sb'
        },
    ]

    function Candidate(param) {
        var _candidate = {};
        _candidate.name = param.name
        _candidate.age = param.age;

        _candidate.firstName = _candidate.name.split(' ')[0];
        _candidate.secondName = _candidate.name.split(' ')[1];

        _candidate.work = {};

        switch(param.work) {
            case 'engineer': 
                _candidate.work.name = '工程师'
                _candidate.work.description = '热爱编程'
                break;
            case 'teacher': 
                _candidate.work.name = '老师'
                _candidate.work.description = '热爱分享'
                break;
            default:
                _candidate.work.name = param.work
                _candidate.work.description = '无'
                break
        }

        _candidate.work.changeWork = function(work) {
            this.name = work
        }

        _candidate.work.changeDes = function(des) {
            this.description = des;
        }

        return _candidate
    }

    var candidateArr = []
    for (let i = 0; i < data.length; i++) {
        candidateArr[i] = Candidate(data[i])
    }

    console.log(candidateArr[0])

    candidateArr[1].work.changeWork('xxx')
    console.log(candidateArr[1].work)

    </script>
</head>
<body>
    
</body>
</html>

// 建造者模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

    var data = [
        {
            name: 'zhang san',
            age: 24,
            work: 'engineer'
        },
        {
            name: 'li si',
            age: 25,
            work: 'teacher'
        },
        {
            name: 'wang wu',
            age: 26,
            work: 'sb'
        },
    ]
    function Candidate(param) {
        var _candidate = new Person(param);

        _candidate.name = new CreateName(param.name)
        _candidate.work = new CreateWork(param.work)
        
        return _candidate
    }

    function Person(param) {
        this.name = param.name
        this.age = param.age
    }

    function CreateName(name) {
        this.wholeName = name
        this.firstName = name.split(' ')[0]
        this.secondName = name.split(' ')[1]
    }

    function CreateWork(work) {
        switch(work) {
            case 'engineer': 
                this.name = '工程师'
                this.description = '热爱编程'
                break;
            case 'teacher': 
                this.name = '老师'
                this.description = '热爱分享'
                break;
            default:
                this.name = work
                this.description = '无'
                break
        }
    }

    CreateWork.prototype.changeWork = function(work) {
        this.name = work
    }

    CreateWork.prototype.changeDes = function(des) {
        this.description = des
    }

    var candidateArr = []
    for (let i = 0; i < data.length; i++) {
        candidateArr[i] = Candidate(data[i])
    }

    console.log(candidateArr[0])

    candidateArr[1].work.changeWork('xxx')
    console.log(candidateArr[1].work)

    </script>
</head>
<body>
    
</body>
</html>