Posted on 2006-09-26 02:32
风中聆听 阅读(555)
评论(0) 编辑 收藏 所属分类:
JavaScript
Using the $F() function$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。 这个方法可以传入元素的 id 或者元素自己。
可以先看示例：
<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>
再来学习源码中的相关代码：
Form对象
//Form 对象
var Form = 
{
//返回 url 参数格式的项目名和值的列表
//如'field1=value1&field2=value2&field3=value3'。
serialize: function(form) {
var elements = Form.getElements($(form));
var queryComponents = new Array();
for (var i = 0; i < elements.length; i++) {
var queryComponent = Form.Element.serialize(elements[i]);
if (queryComponent)
queryComponents.push(queryComponent);
}
return queryComponents.join('&');
},
//返回包含所有在表单中输入项目的 Array 对象
getElements: function(form) {
form = $(form);
var elements = new Array();
for (tagName in Form.Element.Serializers) {
var tagElements = form.getElementsByTagName(tagName);
for (var j = 0; j < tagElements.length; j++)
elements.push(tagElements[j]);
}
return elements;
},
//返回一个 Array 包含所有在表单中的 <input>元素。
//另外， 这个列表可以对元素的类型或名字属性进行过滤。
getInputs: function(form, typeName, name) {
form = $(form);
var inputs = form.getElementsByTagName('input');
if (!typeName && !name)
return inputs;
var matchingInputs = new Array();
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if ((typeName && input.type != typeName) ||
(name && input.name != name))
continue;
matchingInputs.push(input);
}
return matchingInputs;
},
//使表单中的所有输入项目无效。
disable: function(form) {
var elements = Form.getElements(form);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.blur();
element.disabled = 'true';
}
},
//使表单中的所有输入项目有效。
enable: function(form) {
var elements = Form.getElements(form);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.disabled = '';
}
},
//返回第一个表单中可视的，有效的输入项目。
findFirstElement: function(form) {
return Form.getElements(form).find(function(element) {
return element.type != 'hidden' && !element.disabled &&
['input', 'select', 'textarea'].include(element.tagName.toLowerCase());
});
},
//激活第一个表单中可视的，有效的输入项目。
focusFirstElement: function(form) {
Field.activate(Form.findFirstElement(form));
},
//重置表单。和调用表单对象的 reset() 方法一样。
reset: function(form) {
$(form).reset();
}
}Form.Element对象
//Form.Element 对象
Form.Element = {
//返回元素的 名称=值 对, 如'elementName=elementValue'。
serialize: function(element) {
element = $(element);
var method = element.tagName.toLowerCase();
var parameter = Form.Element.Serializers[method](element);
if (parameter) {
var key = encodeURIComponent(parameter[0]);
if (key.length == 0) return;
if (parameter[1].constructor != Array)
parameter[1] = [parameter[1]];
return parameter[1].map(function(value) {
return key + '=' + encodeURIComponent(value);
}).join('&');
}
},
//返回元素的值。
getValue: function(element) {
element = $(element);
var method = element.tagName.toLowerCase();
var parameter = Form.Element.Serializers[method](element);
if (parameter)
return parameter[1];
}
}
Form.Element.Serializers 对象
//Form.Element.Serializers 对象
Form.Element.Serializers = {
input: function(element) {
switch (element.type.toLowerCase()) {
case 'submit':
case 'hidden':
case 'password':
case 'text':
return Form.Element.Serializers.textarea(element);
case 'checkbox':
case 'radio':
return Form.Element.Serializers.inputSelector(element);
}
return false;
},
//返回带有元素名称和值的Array , 如 ['elementName','elementValue']
inputSelector: function(element) {
if (element.checked)
return [element.name, element.value];
},
//返回带有元素名称和值的Array , 如 ['elementName','elementValue']
textarea: function(element) {
return [element.name, element.value];
},
//返回带有元素名称和所有被选择的选项的值或文本的 Array
//如 ['elementName', 'selOpt1 selOpt4 selOpt9']
select: function(element) {
return Form.Element.Serializers[element.type == 'select-one' ?
'selectOne' : 'selectMany'](element);
},
selectOne: function(element) {
var value = '', opt, index = element.selectedIndex;
if (index >= 0) {
opt = element.options[index];
value = opt.value;
if (!value && !('value' in opt))
value = opt.text;
}
return [element.name, value];
},
selectMany: function(element) {
var value = new Array();
for (var i = 0; i < element.length; i++) {
var opt = element.options[i];
if (opt.selected) {
var optValue = opt.value;
if (!optValue && !('value' in opt))
optValue = opt.text;
value.push(optValue);
}
}
return [element.name, value];
}
}
var $F = Form.Element.getValue;
要看懂这些代码，首先必须知道Javascript中的对象直接量、函数直接量是怎么一回事。
在Javascript中对象内的元素是一个关联数组。请看下面的例子，car 对象的第一个元素定义了一个属性，myCar；第二个元素，getCar 属性调用一个函数（Cars("honda")）。第三个元素，用了一个已存在的变量指定的属性（Sales）。
var Sales = "Toyota";
function CarTypes(name) {
if(name == "Honda")
return name;
else
return "Sorry, we don't sell " + name + ".";
}
car = {myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales}
document.write(car.myCar); // Saturn
document.write(car.getCar); // Honda
document.write(car.special); // Toyota
另外，您可以在对象内使用索引、索引属性（例如7）或进行对象的嵌套。请看下例：
car = {manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda"}
document.write(car.manyCars.b); // Jeep
document.write(car[7]); // Mazda
与对象直接量相应地，也存在函数直接量，即是把匿名函数作为值赋给某元素。看例子：
普通：
function average(x,y) {
return (x+y)/2;
}
var z = average(1,3);
alert(z);
构造：
var z = new Function("x","y","return(x+y)/2");
直接：
var z = function(x,y) {
return (x+y)/2;
} (1,3);
alert(z);
一个匿名函数就是一个没有名字的函数。你可以认为他们是一次性函数。当你只需要用一次某个函数式，他们就特别有用。通过使用匿名函数，没有必要把函数一直放在内存中，所以使用匿名函数更加有效率。上面几个函数处理同样的事情，第一种方面中
average在给
z赋值结束之后一直保留——但匿名函数则不会；而第二个要调用一个构造器，第三种则是引擎直接解释的，相比之下是最有效率的。
参考：
http://www.nirvanastudio.org/wp-content/uploads/2006/04/Functional_JavaScript_Programming.htmhttp://cheminfo.tongji.edu.cn/cn/docs/javascript/javascript.htm<待续>