dojo/dom-form
表单的处理在前端开发中一样意义非凡,dojo/dom-form模块提供了一系列方法来处理表单元素。比如:
- fieldToObject: 将一个表单字段转化成JavaScript原生类型,可能是string、array等
- toObject:将一个表单元素转化成JavaScript对象
- toQuery: 将一个表单元素转化成编码后的query字符串
- toJson: 将一个表单元素转化成JSON字符串
我们知道,表单字段的值可能是一个结果,也可能是多个结果,所以在JavaScript中字段的值可能是字符串也可能是数组,form模块中提供了一个setValue函数,该函数用于便利form中的表单元素时,取出其中的字段值:
function setValue(/*Object*/ obj, /*String*/ name, /*String*/ value){ // Skip it if there is no value
if(value === null){
return;
}
// 如果name存在,转化成数组,不存在直接赋值给obj
var val = obj[name];
if(typeof val == "string"){ // inline'd type check
obj[name] = [val, value];
}else if(lang.isArray(val)){
val.push(value);
}else{
obj[name] = value;
}
}
同时并不是所有在表单中的元素都能够转化成为表单字段,比如:"file|submit|image|reset|button"和没有name的元素;在处理的时候也要把他们排除掉。
fieldToObject将单个元素转化成字段值,这里有三种情况:普通input、radio与checkbox、select(多选、单选),同时没有name的、上文提到的file|submit|image|reset|button、disabled为true的元素都应该排除:
fieldToObject: function fieldToObject(/*DOMNode|String*/ inputNode){
var ret = null;
inputNode = dom.byId(inputNode);
if(inputNode){
var _in = inputNode.name, type = (inputNode.type || "").toLowerCase();
//没有name的元素、disabled为true的都应该排除
if(_in && type && !inputNode.disabled){
if(type == "radio" || type == "checkbox"){
//radio和checkbox只有选中状态才有意义
if(inputNode.checked){
ret = inputNode.value;
}
}else if(inputNode.multiple){//这部分是深度优先搜索的一种实现,目的在于找到select中的option元素
ret = [];
var nodes = [inputNode.firstChild];
while(nodes.length){
for(var node = nodes.pop(); node; node = node.nextSibling){
if(node.nodeType == 1 && node.tagName.toLowerCase() == "option"){
if(node.selected){
ret.push(node.value);
}
}else{
if(node.nextSibling){
nodes.push(node.nextSibling);
}
if(node.firstChild){
nodes.push(node.firstChild);
}
break;
}
}
}
}else{
ret = inputNode.value;
}
}
}
return ret; // Object
}
dojo中实现判断type时并没有排除不合适的type,这是一个缺陷。
toObject,将整个表单转化为Object类型。思路简单:便利所有有效的表单元素,利用fieldToObject取出字段值,将所有的字段放入一个对象中,这里要利用上文提到的setValue方法。
toObject: function formToObject(/*DOMNode|String*/ formNode){
var ret = {}, elems = dom.byId(formNode).elements;
//依次便利表单元素,取出字段值
for(var i = 0, l = elems.length; i < l; ++i){
var item = elems[i], _in = item.name, type = (item.type || "").toLowerCase();
//没有name的、不合适的元素、disabled状态的元素排除掉
if(_in && type && exclude.indexOf(type) < 0 && !item.disabled){
setValue(ret, _in, form.fieldToObject(item));
//<input type="image" src="....">对于图片按钮的处理
if(type == "image"){
ret[_in + ".x"] = ret[_in + ".y"] = ret[_in].x = ret[_in].y = 0;
}
}
}
return ret; // Object
}
toQuery与toJSON都是利用toObject转为为对象后,进行进一步操作。其中toQuery方法利用了io-query模块的objectToQuory方法,这个下篇文章在解释。而toJSON只是简单的调用了JSON.stringify方法。
json.stringify(form.toObject(formNode), null, prettyPrint ? 4 : 0);
dojo/dom-form的更多相关文章
- dojo/dom源码学习
dojo/dom模块作为一个基础模块,最常用的就是byId方法.除此之外还有isDescendant和setSelectable方法. dom.byId(myId)方法: 各种前端类库都免不了与D ...
- dojo/dom源码
dojo/dom源码学习 dojo/dom模块作为一个基础模块,最常用的就是byId方法.除此之外还有isDescendant和setSelectable方法. dom.byId(myId)方法: ...
- DOJO DOM 功能
In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...
- dojo/dom dojo/domConstruct dojo/query
dom.byId require(["dojo/dom", "dojo/domReady!"], function(dom) { var one = dom.b ...
- dojo 七 DOM dojo/dom
官方教程:Dojo DOM Functions对dom的使用,需要引用包dojo/dom.1.获取节点,dom.byIdbyId中既可以传递一个字符串,也可以传递一个节点对象 require([&qu ...
- dojo下的dom按钮与dijit/form/Button
众所周知,在dojo里存在dom和widget两个类型,dom指的是普通类型的HTML元素,包括各种类型的标签.按钮.输入框等等,而widget指的是dojo自身所带的模板,同时也包括按钮.输入框等等 ...
- Dojo - 操作Dom的函数
DOM Manipulation You might be seeing a trend here if you have gotten this far in the tutorial, in th ...
- Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作(基于dojo1.11.2版本)
前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...
- 【Dojo 1.x】笔记3 等待DOM加载完成
有的web页面总是得等DOM加载完成才能继续执行功能,例如,待页面DOM加载完成后,才能在DIV上进行渲染图形. Dojo提供了这个功能的模块,叫domReady,但是由于它很特殊,就在结尾加了个叹号 ...
- Dojo操作dom元素的样式
1.使用dom-style的set方法,可以直接设置dom元素的样式属性,这和使用dom元素的style属性效果一样. 2.使用dom-class的replace方法可以替换某个dom元素的样式,ad ...
随机推荐
- Charles
1. charles使用教程指南+客户端弱网测试:http://blog.csdn.net/anualday/article/details/51423457 2.使用Charles对Https请求进 ...
- 结合阿里云服务器,设置家中jetson tk1随时远程登陆
前提条件: 1.路由配置dmz主机为tk1的ip ,设置路由器中ssh 端口22的访问权限 2.有一台远程服务器,服务器安装了php可以运行php文件(我使用的是阿里云) 家中tk1配置: 脚本pyt ...
- 读Windows核心编程-5-作业
作业(Job) 有时候需要把一些进程集中管理,如终止一个进程以及它产生的子进程,但由于Windows并没有维护进程间父子关系,所以除非进程本身以某种方式记录这些信息,否则很难做到管理这种父子进程树.而 ...
- linux环境下部署tomcat
服务器环境:Red Hat Enterprise Linux Server release 6.5 安装部署包:apache-tomcat-8.0.30.tar.gz.jdk-8u66-linux-x ...
- js性能优化
使用局部变量(尽量缩短作用域链)JavaScript引擎对变量的解析时间跟作用域链的深度有关.局部变量由于处于链尾,存取速度是最快的,因此,一个好的经验是:任何非局部变量使用超过一次时,请使用局部变量 ...
- JAVA 异常类
1.Exception(异常) :是程序本身可以处理的异常. 2.Error(错误): 是程序无法处理的错误.这些错误表示故障发生于虚拟机自身.或者发生在虚拟机试图执行应用时,一般不需要程序处理. 3 ...
- Android Sqlite数据库相关——实现将 Sqlite 数据库复制到SD 卡
确定 sqlite 数据库所在位置(一般在data/data/com.pagename/databases/ 下,其中 com.pagename为当前项目包名) 确定 sqlite 数据库名称,拼接到 ...
- ReStart
ACM开始了?……重新启用Blog~
- py2exe 打包scipy时遇到的问题
最近写了个小程序,用PyQt5做的界面,写完之后用py2exe打包成独立的exe文件,运行正常. 后来由于需要,调用SciPy.io.loadmat,改写setup.py,打包之后运行错误,提示: T ...
- 1.本周的作业请参照此文:http://www.ruanyifeng.com/blog/2015/12/git-workflow.html 制定本组项目的GitHub版本更新流程---答题者:徐潇瑞
首先,介绍一下gitflow,它是最早诞生.并得到广泛采用的一种工作流程.如果采用git flow开发流程,那么项目存在两个常设分支,一个叫主分支master,另一个叫开发分支develop.mast ...