js原生设计模式——4安全的工厂方法模式之Factory方法模式

最新推荐文章于 2024-09-24 22:18:19 发布

weixin_34184561

最新推荐文章于 2024-09-24 22:18:19 发布

阅读量74

点赞数

文章标签：设计模式 javascript java ViewUI

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Factory方法模式--oop面向对象编程实例</title>

</head>
<body>
   <div id="container" style="border:3px solid red;width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
//针对oop编程增强版进行改造，oop增强版里面的各个基类都是分散开来写的，本demo中将统一写入工厂类的原型中统一管理，并增加安全模式

//学科工厂类
var JobFactory = function(type,content){
   //安全模式:加了安全模式后可以直接实例化对象，不用加new
   if (!(this instanceof JobFactory)) {
       return new JobFactory(type,content);
   }
}
   //工厂类原型中添加创建各个学科基类的方法
    JobFactory.prototype = {
       //java学科基类
       java:function(content){
           //将文本内容保存在属性content里
           this.content = content;
           //创建对象时，通过自调用函数直接执行
           (function(content){//自调用函数的形参content
               var div = document.createElement('div');
               div.innerHTML = content;
               div.style.color = 'green';
               div.style.width = 200+'px';
               div.style.height = 200+'px';
               div.style.background = 'white';
               div.style.border = '1px solid olive';
               // alert(div.style.background);
               //获取父容器container(注：这里获取DOM元素必须在DOM建立形成之后获取，否则报错),并将div添加到container中
               document.getElementById('container').appendChild(div);
           })(content);//自调用函数的实参content
       },
       //php学科基类
       php:function(content){
           this.content = content;
           (function(content){
               var div = document.createElement('div');
               div.innerHTML = content;
               div.style.color = 'green';
               div.style.width = 200+'px';
               div.style.height = 200+'px';
               div.style.background = 'white';
               div.style.border = '1px solid olive';
               document.getElementById('container').appendChild(div);
           })(content);
       },
       //Javascript学科基类
       javascript:function(content){
           this.content = content;
           (function(content){
               var div = document.createElement('div');
               div.innerHTML = content;
               div.style.color = 'green';
               div.style.width = 200+'px';
               div.style.height = 200+'px';
               div.style.background = 'white';
               div.style.border = '1px solid olive';
               document.getElementById('container').appendChild(div);
           })(content);
       },
       //UI学科基类
       ui:function(content){
           this.content = content;
           (function(content){
               var div = document.createElement('div');
               div.innerHTML = content;
               div.style.color = 'green';
               div.style.width = 200+'px';
               div.style.height = 200+'px';
               div.style.background = 'white';
               div.style.border = '1px solid olive';
               document.getElementById('container').appendChild(div);
           })(content);
       }
    }

//测试用例
var data = [
{type:'java',content:'java是门后台语言'},
{type:'php',content:'php是门后台语言'},
{type:'javascript',content:'js是前端web开发语言'},
{type:'ui',content:'ui交互设计'},
];

//循环创建实例对象(省去了new操作)
var job = JobFactory();
for(var i=0;i<data.length;i++){
   var fn = data[i].type;//让字符串变方法名的写法，对象的方法名若是字符串数据，可将字符串写在中括号中实现对象方法的调用
   job[fn](data[i].content);
}

// job.Java(data[0].content);
// job.php(data[1].content);
// job.Javascript(data[2].content);
// job.UI(data[3].content);

//本例已经通过验证
</script>
</html>