一些小技巧的总结

[youngwind]

最近项目中用得比较多的ejs渲染和表单，有些小问题比较有趣，值得记录下来。

1. 表单自动提交

在form表单中有且只有一个input框的前提下，当你在这个唯一的input框下按下enter键的话，表单会自动提交，url上会带上表单参数，页面会自动刷新 奇怪的是，当页面的input框多于1个就不会出现这样的情况。有个人专门对此作了试验，参考这里

2. ejs后端渲染的时候前端js如何拿到数据

我承认，在用ejs后端渲染的时候前端js想要拿到渲染变量值得方法真的不太优雅，不过有时候也是没有办法的事儿。因为ejs解析完成之后只可能传输纯文本，所以想要接收Object类的对象需要进行一些转换。

// 后端渲染的时候先将变量字符串化
var tempDemo = '<%= JSON.stringify(demoObject) %>';

// 前端js执行的时候再把字符串转化成JSON
var demo = JSON.parse(tempDemo);

3. ejs渲染逻辑是否过重？

以前做某个项目的时候就用过ejs，当时把很多的判断逻辑都写在ejs当中去，代码长得像这样。

<%if(myData.testArr){%>
    <%for(var i=0;i<myData.testArr.length;i++){%>
        <input type="checked"<%if(myData.testArr[i].checked){%> checked<%}%>/>
    <%}%>
<%}%>

代码中存在大量的if和片段冗余，可读性真的非常差！！比js字符串拼接还差！修改起来也非常麻烦。 所以这次做项目的时候我特意将这些复杂的判断逻辑交给js去处理，ejs只完成类似for循环输出之类的功能，感觉这样用模板渲染比较合理一些。 参考资料：http://www.toobug.net/article/how_to_design_front_end_template_engine.html

给你的select添加上placeholder

我们都知道input和textarea都有placeholder属性，那么能不能在select下拉框中也实现类似的功能呢？答案是可以的。

<select name="source" id="source">
   <option value="" disabled="" selected="" hidden="">请选择来源</option>
   <option value="1">个人</option>
   <option value="2">学校</option>
   <option value="3">平台</option>
</select>

参考资料：http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box/5859221#5859221

[cagen]

关于问题1，最近正好有看到相关文章，原因在于隐式提交这一HTML规范 分情况讨论：

1. 如果表单中有提交按钮（且不为disabled状态），则在input框中回车可以触发隐式提交，不论有多少个field，在特定的field中就能够触发。
2. 如果表单中没有提交按钮
   • 表单只有一个field的话，回车触发隐式提交。
   • 多于一个field的话，回车不能触发隐式提交。能够阻止隐式提交规则的field类型也有固定，只能是input ，且type有所限定。

我觉得这种规则就是为了类似搜索框这种单个输入域而出现的