设计模式知识连载（14）---工厂方法模式:

最新推荐文章于 2022-11-14 18:51:37 发布
宇智波幽助
最新推荐文章于 2022-11-14 18:51:37 发布
阅读量147
点赞数
分类专栏：设计模式文章标签：设计模式工厂方法模式 JavaScript
本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78794129
版权
设计模式专栏收录该内容
51 篇文章 0 订阅
订阅专栏
<body>

<h3>设计模式知识连载（14）---工厂方法模式:</h3>
<p>
    工厂方法模式：创建多类（不同种类的）对象
</p>

<div id = 'container' ></div>

<script type="text/javascript">


    /**
    *   案例,方式一：常规写法
    */

    // // 创建Java学科类
    // var Java = function (content) {

    //  // 将内容保存在content里面以备日后使用
    //  this.content = content ;

    //  // 创建对象时，通过闭包，直接执行，将内容按需求的样式插入到页面内
    //  (function(content){
    //      var _div = document.createElement('div') ;
    //      _div.innerHTML = content ;
    //      _div.style.color = 'green' ;
    //      document.getElementById('container').appendChild(_div) ;
    //  })(content) ;
    // } ;

    // // 创建PHP学科类
    // var Php = function(content) {
    //  this.content = content ;
    //  (function(content) {
    //      var _div = document.createElement('div') ;
    //      _div.innerHTML = content ;
    //      _div.style.color = 'yellow' ;
    //      _div.style.background = 'red' ;
    //      document.getElementById('container').appendChild(_div) ;
    //  })(content) ;
    // } ;

    // // 创建JavaScript学科类
    // var JavaScript = function(content) {
    //  this.content = content ;
    //  var _div = document.createElement('div');
    //  _div.innerHTML = content ;
    //  _div.style.color = 'blue' ;
    //  document.getElementById('container').appendChild(_div) ;
    // }

    // var java = new Java('这是Java的广告') ;
    // var php = new Php('这是Php的广告') ;
    // var javascript = new JavaScript('这是javascript的广告') ;



    /**
    *   案例,方式二：简单工厂模式
    */
    // // 创建Java学科类
    // var Java = function (content) {

    //  // 将内容保存在content里面以备日后使用
    //  this.content = content ;

    //  // 创建对象时，通过闭包，直接执行，将内容按需求的样式插入到页面内
    //  (function(content){
    //      var _div = document.createElement('div') ;
    //      _div.innerHTML = content ;
    //      _div.style.color = 'green' ;
    //      document.getElementById('container').appendChild(_div) ;
    //  })(content) ;
    // } ;

    // // 创建PHP学科类
    // var Php = function(content) {
    //  this.content = content ;
    //  (function() {
    //      var _div = document.createElement('div') ;
    //      _div.innerHTML = content ;
    //      _div.style.color = 'yellow' ;
    //      _div.style.background = 'red' ;
    //      document.getElementById('container').appendChild(_div) ;
    //  })(content) ;
    // } ;
    // // 创建JavaScript学科类
    // var JavaScript = function(content) {
    //  this.content = content ;
    //  (function() {
    //      var _div = document.createElement('div');
    //      _div.innerHTML = content ;
    //      _div.style.color = 'blue' ;
    //      document.getElementById('container').appendChild(_div) ;
    //  })(content) ;
    // } ;

    // function JobFactory(type ,content) {
    //  switch (type) {
    //      case 'java' : 
    //          return new Java(content) ;
    //      case 'php' :
    //          return new Php(content) ;
    //      case 'javascript' :
    //          return new JavaScript(content) ;    
    //  } ;
    // } ;

    // JobFactory('java', '这是Java的广告') ;
    // JobFactory('php', '这是Php的广告') ;
    // JobFactory('javascript', '这是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) {
            this.content = content ;
            (function() {
                var _div = document.createElement('div') ;
                _div.innerHTML = content ;
                _div.style.color = 'green' ;
                document.getElementById('container').appendChild(_div) ;
            })(content) ;
        },
        Php : function(content) {
            this.content = content ;
            (function() {
                var _div = document.createElement('div') ;
                _div.innerHTML = content ;
                _div.style.color = 'yellow' ;
                _div.style.background = 'red' ;
                document.getElementById('container').appendChild(_div) ;
            })(content) ;
        },
        JavaScript : function(content) {
            this.content = content ;
            (function() {
                var _div = document.createElement('div') ;
                _div.innerHTML = content ;
                _div.style.color = 'blue' ;
                document.getElementById('container').appendChild(_div) ;
            })(content) ;
        },
        UI : function(content) {
            this.content = content ;
            (function() {
                var _div = document.createElement('div') ;
                _div.innerHTML = content ;
                _div.style.border = '1px solid red' ;
                document.getElementById('container').appendChild(_div) ;
            })(content) ;
        }
    } ;


    var data = [
        {type : 'Java', content : '这是Java的广告'},
        {type : 'Php', content : '这是Php的广告'},
        {type : 'JavaScript', content : '这是JavaScript的广告'},
        {type : 'UI', content : '这是UI的广告'},
    ] ;


    for(var i = 0; i < data.length; i++) {
        console.log(data[i].type+'---'+data[i].content) ;
        Factory(data[i].type, data[i].content) ;
    }



    /**
    *   安全模式类小Demo
    */ 

    // 正常情况
    var Demo = function() {} ;
    Demo.prototype = {
        show : function() {
            console.log('成功获取') ;
        }
    } ;

    var demo1 = new Demo() ;
    var demo2 = Demo() ;
    demo1.show() ;  // 成功获取
    // demo2.show() ;   // Uncaught TypeError: Cannot read property 'show' of undefined

    // 使用安全模式类
    var DemoSafety = function() {
        if(!(this instanceof(DemoSafety))) {
            return new DemoSafety() ;
        }   
    } ;

    DemoSafety.prototype = {
        show : function() {
            console.log('获取成功~~~') ;
        }
    } ;

    var demosafety1 = new DemoSafety() ;
    var demosafety2 = DemoSafety() ;

    demosafety1.show() ;    //  获取成功~~~
    demosafety2.show() ;    //  获取成功~~~
</script>

</body>