JavaScript设计模式(二)【工厂模式】

.NET跨平台

于 2020-08-05 14:57:21 发布

阅读量136

点赞数

分类专栏： Javascript设计模式

原文链接：https://blog.youkuaiyun.com/WuLex

版权

Javascript设计模式专栏收录该内容

37 篇文章

订阅专栏

//  安全的工厂方法

var Factory = function (type, content) {
  if (this instanceof Factory) {
    var s = new this[type](content);
    return s;
  } else {
    return new Factory(type, content);
  }
}

// 工厂原型中设置创建所有类型数据对象的基类

Factory.prototype = {
  Java: function (content) {

  },
  UI: function (content) {

  },
  PHP: function (content) {

  },
  JavaScript: function (content) {
    this.content = content;
    (function (content) {
      var div = document.createElement('div');
      div.innerHTML = content;
      div.style.border = '1px solid red';
      document.getElementById('container').appendChild(div);
    })(content);
  },
}

// 使用实例

var data = [
  {type: 'JavaScript',content: 'JavaScript哪家强'},
  {type: 'Java',content: 'Java哪家强'},
  {type: 'UI',content: 'UI哪家强'},
  {type: 'PHP',content: 'PHP哪家强'}
];
console.log(data);
for (var i = 3; i >= 0; i--) {
  Factory(data[i].type, data[i].content);
}

完整html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    //  安全的工厂方法
    var Factory = function(type, content) {
        if (this instanceof Factory) {
            var s = new this[type](content);
            return s;
        } else {
            return new Factory(type, content);
        }
    }

    // 工厂原型中设置创建所有类型数据对象的基类
    Factory.prototype = {
        Java: function(content) {

        },
        UI: function(content) {

        },
        PHP: function(content) {

        },
        JavaScript: function(content) {
            this.content = content;
            (function(content) {
                var div = document.createElement('div');
                div.innerHTML = content;
                div.style.border = '1px solid red';
                document.getElementById('container').appendChild(div);
            })(content);
        },
    }

    // 使用实例
    var data = [
        { type: 'JavaScript', content: 'JavaScript哪家强' },
        { type: 'Java', content: 'Java哪家强' },
        { type: 'UI', content: 'UI哪家强' },
        { type: 'PHP', content: 'PHP哪家强' }
    ];
    console.log(data);
    for (var i = 3; i >= 0; i--) {
        Factory(data[i].type, data[i].content);
    }
</script>
</body>
</html>

如图：

在这里插入图片描述