Kairyou's Blog

专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]
  • doT.js 模板引擎的使用

    / 分类: 开发,实践 / 47 Comments

    模版引擎之前在介绍mustache时已经提到了。doT、mustache各有优势吧,如果用于JS环境,doT的性能更胜一筹,并且套语句更方便些。现在公司的mobile页面已经被我替换成doT了。

    doT source: https://github.com/olado/doT
    Docs: http://olado.github.com/doT/

    doT上手比较容易,但之前熟悉了mustache,改用doT时有点不习惯,但用两次就好了。

    下载doT.js(里面有个doU.js不要用,doU.js是为了测试遗留问题的)。举个简单的使用例子:

    HTML部分:

    <script id="j-tmpl" type="text/template">
    {{ if(it.success){ }}
    	<h2>results:</h2>
    	<ul>
    		{{ for (var i = 0, l = it.data.length; i < l; i++) { }}
    			<li>
    				<h5>{{=it.data[i].title}}</h5>
    				<p>{{!it.data[i].message}}</p>
    			</li>
    		{{ } }}
    	<ul>
    {{ }else{ }}
    	<h2>暂无数据</h2>
    {{ } }}
    </script>
    

    JS部分:

    <script>
    var obj = {
    	success: true,
    	data:[
    		{title:'item1',message:11},
    		{title:'item1',message:22}
    	]
    }
    var tmpl = document.getElementById('j-tmpl').innerHTML;
    var doTtmpl = doT.template(tmpl);
    console.log(doTtmpl(obj ));
    </script>
    

    看了例子,就应该会使用了。
    {{=it.xx}} 取obj.xx的值
    {{ }} 里面放if els / for 等表达式
    {{!it.xx}} 取把obj.xx转义后的值
    这些基本够用了,还有复杂的应用,可以看doT主页内的examples、docs。
    并且,可以很容易把doT写成jquery插件:

    $.extend({
    tmpl: function(template, data){
    	return doT.template(template).apply(null,[data]);
    }
    });
    
  • sublime text2/3 插入日期时间插件

    / 分类: 工具,实践 / 13 Comments

    之前在这里已经推荐过sublime text了,整体还是不错的,但自带的menu没有直接插入日期时间的。插入日期时间是比较常用的功能,所以就自己写了个插件。会python的话应该很容易了,之前也没系统学过,所以看看sublime官方论坛,再查查python的资料,一个插件就完成了。
    修改了下源码, 现在也支持ST3了.

    源码我放在github了(地址),可以下载zip来安装插件。如果想用git,也可以看看我前面写的GTI的安装和使用

    安装和使用,源码的readme里面都说了,快捷键:
    F5 : yyyy-MM-dd
    alt+F5 : yyyy-MM-dd hh:mm:ss
    ctrl+F5 : 星期E
    之前考虑用F4的,但貌似被sublime占用了,所以用的F5。

    另外推荐安装"Package Control",很多插件就可以在线安装了,蛮方便的,不另外开篇,直接写在这里好了。

    Sublime Package Control 安装参见:http://wbond.net/sublime_packages/package_control/installation
    一步一步照着来就OK了。

    Package Control 配置:
    因为在线安装,需要设置GIT/HG root,
    Preferences- Package settings - Control - Settings User,加上git/hg路径,比如:
    "git_binary": "D:/Git/PortableGit/bin",
    "hg_binary": "D:/TortoiseHg/"

    然后就可以在Preferences- Package Control - install package 里面安装需要的插件了~
    另外推荐个package:Prefixr(css3兼容代码补全)