专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

2012年2月

  • 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兼容代码补全)

  • TortoiseGit GitHub 使用小计

    / 分类: 开发,工具 / 4 Comments

    装了GIT很久了,最近也没时间鼓捣,今天提交GitHub时发现不太会用了,所以查查资料,简单记录下git的安装和使用。

    1. msysgit

    TortoiseGit依赖msysgit,下载:http://code.google.com/p/msysgit/downloads/list
    有Portable版,我用的就是这个。比如解压.7z到:D:\WebDevelopment\Git\PortableGit

    2. 配置TortoiseGit

    下载:http://code.google.com/p/tortoisegit/downloads/list
    安装TortoiseGit,全部保持默认即可。

    配置git的路径:
    桌面右键 -TortoiseGit - setting - General - MSysGit路径,指定:
    D:\WebDevelopment\Git\PortableGit\bin。

    创建ssh key:
    开始菜单-TortoiseGit-Puttygen, Generate,然后Save private key到本地 (无需key passphrase),比如保存到:D:\WebDevelopment\Git。保存的key下次比如重装系统, 可以继续使用。复制对话框里生成的ssh key,类似:
    ssh-rsa
    .....
    .....
    .....= rsa-key-20120218

    TortoiseGit - setting - Git - Config,填写 name、email。
    新版的默认是只读的, 可以通过右键-git bash里添加配置:
    git config --global user.name 'xxx'
    git config --global user.email "[email protected]"

    3. 使用GitHub

    GitHub功能类似googlecode,方便储存代码。主页,进入Edit Your Profile,找到SSH Keys,Add New SSH Key或edit现有的SSH Key。title随便取,把上面复制的ssh key粘贴到key一栏。

    创建项目:
    主页,New repository创建项目,填写项目名称之类的。创建好后,可以看到一些说明,找到里面的[email protected]:yourName/test.git,复制这个URL。

    本地创建个文件夹,比如test,右键-Git Clone,URL中粘贴刚才复制的URL。Load Putty Key选择上面保存到本地的ssh key。OK,弄完了。

    提交code到github

    右键-Git Commit,然后Push,就可以推到GitHub里面了。

    查看全文 »