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);
  • 相关阅读:
    将行政区域导入SQL SERVER
    wpf 使用Font-Awesome图标字体
    Visual Studio Code用户设置文件
    vue2+webpack 开发环境配置
    Bootstrap datepicker 在弹出窗体modal中不工作
    English Training Material
    FIJ Jobs – 2013/8/12
    English Training Material
    English Training Material
    位操作(求[a, b] 中二进制位为1的个数最多的数)
  • 原文地址:https://www.cnblogs.com/dojo-lzz/p/4964784.html
Copyright © 2011-2022 走看看