框架用的越多越觉得繁琐,是没有理解代码还是需求更新的太快?谁知道呢,写一个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的属性会爆炸式的增长,像原生的一样使用,很适合有初恋情怀的你