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);


目录
相关文章
|
9月前
|
监控 供应链 搜索推荐
不同行业DTC业务模型的差异化分析
DTC营销模式通过直接面向消费者,整合产业链、打造极致单品、培养超级用户等策略,实现利润快速增长。本文深入探讨DTC的定义、特点、优势、适用场景及实施策略,强调数据驱动和品牌与消费者紧密连接的重要性。
409 14
|
11月前
|
关系型数据库 MySQL API
MySQL 历史数据迁移到 Elasticsearch
MySQL 历史数据迁移到 Elasticsearch
419 4
|
9月前
|
人工智能 自然语言处理 安全
谷歌版贾维斯即将问世,最强Gemini 2.0加持!AI自主操控电脑时代来临
谷歌发布的Gemini 2.0标志着AI新时代的到来,被誉为“谷歌版贾维斯”。该系统在自然语言处理、图像识别及自主操控电脑等方面取得重大进展,尤其在多模态数据处理上表现出色,能更准确理解用户需求并执行复杂任务。尽管存在对AI自主操控可能带来的负面影响的担忧,谷歌强调Gemini 2.0旨在辅助而非替代人类工作,且已采取多项措施保障其安全性和可靠性。
209 5
|
存储 前端开发 Java
基于java考研线上自习室 App 的设计与实现附完整代码
基于java考研线上自习室 App 的设计与实现附完整代码
626 0
基于java考研线上自习室 App 的设计与实现附完整代码
|
数据安全/隐私保护
企业邮箱怎么注册流程(图)
企业邮箱怎么注册流程(图),阿里云企业邮箱购买流程,企业邮箱分为免费版、标准版、集团版和尊享版,阿里云百科分享企业邮箱版本区别,企业邮箱收费标准价格表,以及阿里企业邮箱详细购买流程
418 0
|
边缘计算 城市大脑 人工智能
智慧城市当中的新型测试手段: 赛马机制、AB测试和混沌工程
随着智慧城市如火如荼地建设,城市管理的智能化程度越来越高,诸如城市大脑、边缘计算、数字孪生等新技术的融入,给城市管理者带来了新的工具,也为市民的生活带来了极大的便利。在城市智能化建设过程中,总不可或缺的涌现多种新技术新思路。这些用于城市治理领域的新技术、新思路,和互联网领域的新技术有着异曲同工之妙,为智慧城市的评测提供了有利的武器。
1536 2
|
存储 缓存 算法
cookie是什么意思?如何清除cookie?
Cookie,有时以复数形式使用cookies,意味着网站在本地存储用户浏览信息,以识别用户的身份。比如你输入一次网站的用户名和密码,浏览器会提示是否保存,但确认后就不需要下次再输入了。那我们就多说说Cookie是什么意思吧。如何清除Cookie?
1153 0
cookie是什么意思?如何清除cookie?
|
机器学习/深度学习 算法 前端开发
前端代码是怎样智能生成的-组件识别篇
作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考,本次 《前端代码是怎样智能生成的》 系列分享,将与大家分享前端智能化项目中技术与思考的点点滴滴。
前端代码是怎样智能生成的-组件识别篇
|
机器学习/深度学习 人工智能 监控
【云周刊】第141期:阿里正式发布《Java开发手册》终极版!绝对珍藏!
阿里正式发布《Java开发手册》终极版!绝对珍藏!业务实时监控的最佳实践:从前端监控、到大盘数据全解析,十张机器学习和深度学习工程师必备速查表!【重磅开启】云栖社区首届博主招募大赛,大奖等你来!...更多精彩技术资讯,尽在云周刊!
7257 0

热门文章

最新文章