首页 > web前端 > js教程 > 正文

JavaScript 模式之工厂模式(Factory)应用介绍_javascript技巧

php中文网
发布: 2016-05-16 17:48:02
原创
1821人浏览过

工厂模式也是对象创建模式之一,它通常在类或类的静态方法中去实现。构造对象的一种方式是使用new操作符,但使用new时正是针对实现编程,会造成“耦合”问题,与具体的类关系紧密。导致代码更脆弱,缺乏弹性,在复杂逻辑的项目中建议是面向接口编程。
先看简单工厂模式

pollinations
pollinations

属于你的个性化媒体引擎

pollinations 231
查看详情 pollinations
复制代码 代码如下:

Person(name, age) {
var obj = {}
obj.name = name
obj.age = age
return obj
}
var p1 = Person('jack', 25)
var p2 = Person('lily', 22)

与构造函数方式写一个类的区别在于没有使用this,而是每次都构造一个空对象,然后给其添加属性。创建对象方式不是使用new,而是使用函数调用方式。这种方式基本上用来替代一个类(具有相同属性的对象),而复杂一些的工厂则可以造不同类型的对象。
下面以个水果工厂示例
复制代码 代码如下:

function Banana() {
this.price = '$1.5'
}
function Apple() {
this.price = '$1.2'
}
function Orange() {
this.price = '$2.2'
}
// 静态工厂类
function Fruit() {}
Fruit.factory = function(type) {
if (!window[type]) {
return
}
var fruit = new window[type]
return fruit
}
// 制造不同的水果
var banana = Fruit.factory('Banana')
var apple = Fruit.factory('Apple')
var orange = Fruit.factory('Orange')

有三个水果类Banana、Apple、Orange,一个水果工厂类Fruit,通过静态方法factory每次可以造出不同的水果类对象。
工厂模式在JavaScript原生对象Object也有所体现,比如
复制代码 代码如下:

var obj = Object(),
num = Object(1),
str = Object('s'),
boo = Object(false);

Object就是一个工厂,根据参数不同会构造出不同的对象。obj是一个空对象,num是一个Number类型的对象,str是一个String类型的对象,boo是Boolean类型的对象。
jQuery.Callbacks也是一个工厂,每次调用它都会返回一个具有add, remove, fire等方法的对象。还可以根据参数如“once”, “memory”等构造出具有不同性质的对象。

所谓的工厂模式,是指可以返回一个对象的方法。
利用这种模式,我们可以做什么呢?假设我不满足现有的DOM对象里面所拥有的方法,我想要增加一个自定义的方法叫sayHello,我们可以这样做:
复制代码 代码如下:

function RemouldNodeObj(DomNode){
//先判断一下传递进来的参数是不是一个Dom节点
if(typeof DomNode == "object" && DomNode.nodeType == 1){
DomNode.say = function(){
alert("Hello!!");
}
}else{
alert("你传递进来的参数不正确!");
}
}

//这样调用:
window.onload = function(){
var oDiv = RemouldNodeObj(document.getElementById("test"));
//通过这一步,oDiv就拥有了新的方法say
oDiv.say();
}

有了上面的基础后,我们来实现点复杂的功能,我们要实现只要通过js的调用就生成一个简单的form表单,看代码:
复制代码 代码如下:



JavaScript之工厂模式




###




看到了没?这样的调用方式是不是很像jQuery?如果能够解决跨浏览器问题的话,其实完全可以做出一个搜索栏插件来!
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号