前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >建造者模式

建造者模式

作者头像
Qwe7
发布2022-06-09 08:41:44
2910
发布2022-06-09 08:41:44
举报
文章被收录于专栏:网络收集

二、建造者模式

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

1、建造者模式例子

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

// 未使用建造者模式前

代码语言:javascript
复制
<!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>

// 建造者模式

代码语言:javascript
复制
<!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>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档