一些小技巧的总结

@youngwind 2016-03-10 20:49:41发表于 youngwind/blog 其他

最近项目中用得比较多的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下拉框中也实现类似的功能呢?答案是可以的。
demo

<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