工厂模式之javascript

最新推荐文章于 2024-05-09 11:42:16 发布

最新推荐文章于 2024-05-09 11:42:16 发布 · 176 阅读

文章标签：

#JavaScript #XML #HTML #ViewUI

AJAX 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的JavaScript工厂模式实现案例，通过定义一个工厂类来创建具有特定功能的对象实例。这些对象能够显示名称、从表单元素获取值以及解析XML文件等。此外，还展示了如何在HTML页面中使用这些功能。

1. 创建工厂类

// 对象的工厂类
var ObjFactory=new Object();
ObjFactory.createObj=function (){  //创建产品的方法
var  obj =  new Object();//要生产的产品
obj.name = "hero";//产品的属性
obj.showName=showName;//产品所具备的功能
obj.getElement=getElement;//产品所具备的功能
obj.getTextFromXMLByPath=getTextFromXMLByPath;//产品所具备的功能
return obj;//返回产品的实例信息
}

2. 实现产品具备的功能

//弹出属性信息
function showName(){alert(this.name);}

//根据id获取指定表单的值
function getElement(A,B){
var t=document.getElementById(A);
var value=t.value+B;
return value;
}

//输入xml和路径，获取指定路径下xml节点的值
function getTextFromXMLByPath(xmlStr,path){
var responseDoc = new ActiveXObject("MSXML.DOMDocument");
responseDoc.loadXML(xmlStr);
var value = responseDoc.selectSingleNode(path).text;
return value;
}

//$ 的神秘--js支持$作为方法名，对象也是可以的。
$=function(A,B){
var t=document.getElementById(A);
var value=t.value+B;
return value;
}

3. 编写测试类

<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>

<input type="button" id="1" value="test" onclick="$(1)"/>
<script>
document.write(ObjFactory.createObj().name);
ObjFactory.createObj().showName();
document.write(ObjFactory.createObj().getElement(1,'大家好'));
var xmlStr="<request>rteVerRan</request>";
xmlStr="1";
document.write(ObjFactory.createObj().getTextFromXMLByPath(xmlStr,"/request"));
</script>
</body>
</html>

4. 测试结果

hero
弹出alert("VerRan");
test大家好