zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    给出两个 非空 的链表用来表示两个非负的整数。其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字。
    11
    实战 迁移学习 VGG19、ResNet50、InceptionV3 实践 猫狗大战 问题
    tx2系统备份与恢复
    如何在Ubuntu 18.04上安装和卸载TeamViewer
    bzoj 3732 Network (kruskal重构树)
    bzoj2152 聪聪可可 (树形dp)
    牛客 216D 消消乐 (二分图最小点覆盖)
    牛客 197E 01串
    Wannafly挑战赛23
  • 原文地址:https://www.cnblogs.com/dojo-lzz/p/4964784.html
Copyright © 2011-2022 走看看