js原生设计模式——4安全的工厂方法模式之oop编程增强版
2015-11-05 11:06
736 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oop编程增强版写法——js面向对象编程实例</title>
</head>
<body>
<div id="container" style="border:3px solid red;width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
//Java学科基类
var 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学科基类
var 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学科基类
var 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学科基类
var 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 JobFactory = function(type,content){
switch(type){
case 'java':
return new Java(content);
case 'php':
return new Php(content);
case 'js':
return new Javascript(content);
case 'ui':
return new Ui(content);
}
}
//测试用例
var java = JobFactory('java','java是门后台语言');
console.log(java);
console.log(java.content);
var php = JobFactory('php','php是门后台语言');
console.log(php);
console.log(php.content);
var js = JobFactory('js','js是前端web开发语言');
console.log(js);
console.log(js.content);
var ui = JobFactory('ui','ui交互设计');
console.log(ui);
console.log(ui.content);
//本例已经通过验证
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oop编程增强版写法——js面向对象编程实例</title>
</head>
<body>
<div id="container" style="border:3px solid red;width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
//Java学科基类
var 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学科基类
var 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学科基类
var 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学科基类
var 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 JobFactory = function(type,content){
switch(type){
case 'java':
return new Java(content);
case 'php':
return new Php(content);
case 'js':
return new Javascript(content);
case 'ui':
return new Ui(content);
}
}
//测试用例
var java = JobFactory('java','java是门后台语言');
console.log(java);
console.log(java.content);
var php = JobFactory('php','php是门后台语言');
console.log(php);
console.log(php.content);
var js = JobFactory('js','js是前端web开发语言');
console.log(js);
console.log(js.content);
var ui = JobFactory('ui','ui交互设计');
console.log(ui);
console.log(ui.content);
//本例已经通过验证
</script>
</html>
相关文章推荐
- javascript的语句和函数
- HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传
- javascript 的几种使用多行字符串的方式
- 关于js返回按钮的问题
- JSON.parse( ) 和JSON.stringify( ) 的区别
- JS使用cookie实现DIV提示框只显示一次的方法
- js获取form的值提交
- js获取form的值提交
- 用HTML5+JS开发跨平台的桌面应用
- Javascript DOM操作实例
- C_C++_Java_JavaScript_逗号表达式
- 使用js Math.random()函数生成n到m间的随机数字
- js 如何将无限级分类展示出来
- JS 数组的删除与判断是否存在的两个扩展方法
- HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传
- a href="javascript:void(0)" 是什么意思?加不加上有什么区别
- JS实现的新浪微博大厅文字内容滚动效果代码
- javaScript的on方法,动态触发事件
- JavaScript中清空数组的三种方式
- Extjs gridPanel对选中行的操作