通用的 DynForm 类初稿，及 JS OOP 讨论，抛砖引玉，欢迎发表高见

alexxing 2002-09-23 02:41:54

一直在琢磨 JS 下 OOP 的问题，高手有宝贵经验的，望不吝赐教
另外，下面这个类很粗糙，我自己都看出一些问题了，能指出大问题的多加分 :)

//DynForm.js

// class DynForm

// DynForm::DynForm
function DynForm(_parentElement, _target, _action, _method, _onsubmit, _class)
{
// member vars
this.parentElement = _parentElement;
this.target = _target;
this.action = _action;
this.method = _method;
this.onsubmit = _onsubmit;
this.oForm = null;
this.className = _class;

// member functions
this.Create = DynFormCreate;
this.NewHidden = DynFormNewHidden;
this.NewInput = DynFormNewInput;
this.NewTextArea = DynFormNewTextArea;
this.NewLine = DynFormNewLine;
return this;
}

// DynForm::Create
function DynFormCreate()
{
var oForm = document.createElement("FORM");
this.parentElement.appendChild(oForm);
this.oForm = oForm;
with ( this )
{
if (target) oForm.target = target;
if (action) oForm.action = action;
if (method) oForm.method = method;
if (onsubmit) oForm.onsubmit = onsubmit;
}
return oForm;
}

// DynForm::DynFormNewHidden
function DynFormNewHidden(_name, _value)
{
var oInput = document.createElement("<INPUT type=hidden name="+_name+" value="+_value+">");
this.oForm.appendChild(oInput);
return oInput;
}

// DynForm::NewInput
function DynFormNewInput(_type, _name, _value, _class)
{
var oInput = document.createElement("INPUT");
this.oForm.appendChild(oInput);
with ( oInput )
{
if (_type) type = _type;
if (_name) name = _name;
value = _value;
if (_class) className = _class;
}
return oInput;
}

// DynForm::NewTextArea
function DynFormNewTextArea(_name, _rows, _cols, _class)
{
var oTextArea = document.createElement("TEXTAREA");
this.oForm.appendChild(oTextArea);
with ( oTextArea )
{
if (_name) name = _name;
if (_rows) rows = _rows;
if (_cols) cols = _cols;
if (_class) className = _class;
}
return oTextArea;
}

// DynForm::NewLine
function DynFormNewLine()
{
var oBr = document.createElement("BR");
this.oForm.appendChild(oBr);
}

//test_DynForm.htm
<html>
<head>
<title>demo of class DynForm</title>
<script type="text/javascript" src="./dynform.js"></script>
</head>
<body>
<div id="oDiv" style="border:1px solid black"></div>
<script>

var oDynForm = new DynForm(oDiv, "", "http://www.test.com", "post", "", "")
oDynForm.Create()
oDynForm.NewHidden("arg1", "value1")
oDynForm.NewLine()
oDynForm.NewInput("text", "input1", "1", "")
oDynForm.NewLine()
oDynForm.NewInput("text", "input2", "2", "")
oDynForm.NewLine()
oDynForm.NewTextArea("area1", 30, 70, "")

</script>
</body>
</html>

...全文

113 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

fokker 2002-09-23

打赏
举报

在DynForm中添加一段
this.oHiddenInputs = new ActiveXObject("Scripting.Dictionary");
this.oInputs = new ActiveXObject("Scripting.Dictionary");
this.oTextAreas = new ActiveXObject("Scripting.Dictionary");

在添加DynFormNewHidden，，DynFormNewTextArea中分别添加：
this.oHiddenInputs.Add(_name,oInput);
this.oTextAreas.Add(_name,oTextArea);
this.oInputs.Add(_name,oInput);

这样可以直接从DynForm直接访问到form中的元素：
var oDynForm = new DynForm(oDiv, "", "http://www.test.com", "post", "", "")
oDynForm.Create()
oDynForm.NewHidden("arg1", "value1")
alert(oDynForm.oHiddenInputs("arg1").value);
oDynForm.NewHidden("arg2", "")
oDynForm.oHiddenInputs("arg2").value="value2";
alert("隐藏元素有：" + oDynForm.oHiddenInputs.count + "个");

wangxj0600 2002-09-23

打赏
举报

在function DynForm(_parentElement, _target, _action, _method, _onsubmit, _class)中最好能加上一个判断：
this.parentElement = （_parentElement=="")?"",_parentElement;

blues-star 2002-09-23

打赏
举报

u p

talisman 2002-09-23

打赏
举报

mark学习

alexxing 2002-09-23

打赏
举报

我一般是让他们在页面上留一块“空地”，就是一个大小合适的层<div>啦，
然后俺用程序把代码填进层里……

emu 2002-09-23

打赏
举报

挺好啊，没看到什么大问题。我以前做的表单设计器可以比你多生成radio，checkbox和select-one,select-multiple（当然还有option），外加定位信息（呵呵极端的“编程主义”），还带有默认值，少了form和br，不过代码还没有你写的好看呢。我不是说你该加这些东西啊，那些没多少作用的我觉得。

用hidden post一些数据？你指的是用隐藏的IFRAME悄悄的发还是？target指向隐藏的IFRAME？

emu 2002-09-23

打赏
举报

恩，我就有点“编程主义”倾向。看来什么过头了都不好。不过，不什么都试试咋知道好不好呢。

Lostinet 2002-09-23

打赏
举报

支持。

alexxing 2002-09-23

打赏
举报

其实，动态 FORM 的主要用途恐怕还是在于 HIDDEN 元素
有时候，想用 HIDDEN POST 一些数据，而且有各种不同的请求，如果为每种请求都写一个静态的 FORM，效率太低了，此时 DynForm 就显出价值了

另外，恐怕就是对“编程主义”的网页设计人员有用——网页的所有内容都以程序和 DHTML 的方式，而不是直接写 HTML 代码的方式生成。俺尝试过这么干，对某些特殊页面还是很有效的，但都这样干好像也太过分了 :)