原生与组件

　　框架用的越多越觉得繁琐,是没有理解代码还是需求更新的太快?谁知道呢,写一个form感叹下

原生form

        <form action="next.html" method="get">
            <input type="text" name="name" value="" />
            <input type="text" name="pass" value="" />
            <input type="submit" value=""/>
        </form>

不知道还有没有人使用这种代码,他用起来很简单,不用js,是的,那个时候也没什么js,只要你点击submit按钮,就会自动跳转到下一个页面,很棒很酷,传递的参数也是最为标准的

复杂对象-->数据结构的改变

数据量的提升(我是说一个页面中的form的属性),严格来说这不是问题,form属性不管变得多多,都可以在后台接受,转换并处理,问题就在于后台希望前端传过去的数据是一种直接区分好的方式,比如

        <form action="next.html" method="get">
            基础信息
            <input type="text" name="user.name" value="" />
            权限信息
            <input type="text" name="role.name" value="" />
            地址信息
            <input type="text" name="address.name" value="" />
            <input type="submit" value=""/>
        </form>

后端在处理时会根据.来将数据处理成不同的model,以方便后台的调用,复杂对象中,数组传递的格式绝逼是千奇百怪我见过温顺点的,重名变数组(需要对接受数据进行判断),也见过暴躁点的,数据必须[],里面填写index,当然更著名的方式就是json

既然传递json格式form的写法就变得复杂,必须搭配动态收集数据的方式(而非原生),比如js/jquery,jq中的$("form").serialize()可以很好的将表单序列化,但是并没有转换为json,我也是在这个地方写了我第一个jq方法,serializeJSON/serializeObject,偶尔会换着名字玩,这个方法我会不断的变更,不同的程序猿的数组的理解不一样,可能会要求在json中的其他数组使用,.|甚至@@@来分割数组的

复杂需求-->action的无奈

表单验证+无刷新

无刷新的请求流行之后,action的实现基本被淘汰,至此这个属性已经可以被遗忘(我用这个属性好多年,通过他修改url,好方便的,偶尔也会用action='',配合路由用来刷新页面),至于表单验证,当年也是找了好久验证的组件...

至此一个form可能会长成这样

        <form id="form">

            <input id="user" type="text" name="user" value="" />

            <input id="name" type="text" name="pass" value="" />

            <input id="submit" type="button" value="" />
        </form>
        <script type="text/javascript">
            $("#user").validation({
                //    ...
            })
             $("#name").validation({
                //    ...
            })
             $("#submit").on("click", function() {
                var formdata = $("#form").serializeJSON();
                $.post("login.do", formdata).done(function() {
                    //...
                })
            })
        </script>

如果你做过,你会发现这就是我们的工作,很难维护,也很恶心...

再往下走就是两条道了

js整合-->ext

form中的组件过于分散,觉得不好维护,不好找,对吧,很简单,写一个$.form,由$.form去创建里面的input,这样所有相关组件都在form当中

        <form id="form"></form>
        <script type="text/javascript">
            $("#form").form({
                items: [{
                    label: "",
                    type: "input",
                    name: "name"
                    validation: ""
                }, {
                    label: "",
                    type: "input",
                    name: "user"
                    validation: ""
                }],
                buttons: [{
                    icons: 1,
                    onCilck: function() {
                        var formdata = $("#form").serializeJSON();
                        $.post("login.do", formdata).done(function() {
                            //...
                        })
                    }
                }]
            })
        </script>

至此,html就是为了创建form而生,其他全是js,其实仔细想想,html中的form好像也没用存在的必要了,比如

        <form id="form"></form>
        <script type="text/javascript">
            create("form")({
                render:"#form",
                items: [{
                    label: "",
                    type: "input",
                    name: "name"
                    validation: ""
                }, {
                    label: "",
                    type: "input",
                    name: "user"
                    validation: ""
                }],
                buttons: [{
                    icons: 1,
                    onCilck: function() {
                        var formdata = $("#form").serializeJSON();
                        $.post("login.do", formdata).done(function() {
                            //...
                        })
                    }
                }]
            })
        </script>

将render改成window,在运行到render时,直接在window中创建form,所有功能全由js生成。。。

特点是简单,至少识别起来很简单,唯一的问题就是太长了,一行能解决的事情,写个5,6行,如果你喜欢这种风格或者你们公司计算代码量,可以尝试一下

html增强-->mv*

如果你怀念当年有爱的原生form,可以尝试着修改html解析引擎,或者在html中定义自己的属性,做完之后大概是这样的

        <form id="form">

            <input id="user" validation="" type="text" name="user" value="" />

            <input id="name"  validation="" type="text" name="pass" value="" />

            <input id="submit" type="button" value="" />
        </form>
        <script type="text/javascript">
        
             $("#submit").on("click", function() {
                var formdata = $("#form").serializeJSON();
                $.post("login.do", formdata).done(function() {
                    //...
                })
            })
             
             $("[validation]").each(function(){
                 $(this).validation({
                     //...
                 })
             })
        </script>

submit不太好弄,他有一个回调,而这个回调并非原生的,我们很难定位(因为分散),统一起来就舒服多了,比如这样

        <form id="form" ajax="url">
            <input id="user" validation="" type="text" name="user" value="" />

            <input id="name"  validation="" type="text" name="pass" value="" />

            <input id="submit" type="submit" aftersubmit:"aftersubmit" value="" />
        </form>
        <script type="text/javascript">
             $.cy={
                 aftersubmit:function(){
                     //...原来的done
                 }
                 
             }
             
             //----------------------变成<script src="" type="text/javascript" charset="utf-8">
             $("[validation]").each(function(){
                 $(this).validation({
                     //...
                 })
             })
             
             $("form[ajax]").each(function(){
                 var submit=$(this).find("[type=submit]"),url=$(this).attr("ajax"),
                 formdata=$(this).serializeJSON(),fnName=submit.attr("aftersubmit");
                 var fn= $.cy[fnName];
                 submit.on("click",function(){
                     $.ajax(url,formdata).done(fn)
                 })
                 
             })
        </script>

简单来说定义一个作用域,而所解析的所有html都会从此作用域中获取数据,

污染html是必须的,html的属性会爆炸式的增长,像原生的一样使用,很适合有初恋情怀的你