Js,jQuery版Zencoding之webstorm & phpstorm

zencoding自从2009年因html,css的扩展而风靡业界，而webstorm自从2.0之后就已经集成。

无意中被不断输入的console.log,console.dir搞的很恼火，所以才有了今天的js之webstorm。由于其它编辑器对zencoding的外延不是做的很好，现下流行的编辑器里边，只有webstorm才可以扩展以下提到的命令。当然，他除了扩展js之后，还可以扩展：xml,php(phpstorm)，xsl,用户也可以自定义添加：JSP,SQL,Haml或者其它的。只是提供一个思路，抛砖引玉，具体的还要看每个人自己的code习惯。webstorm比eclipse,aptana中的更改zencoding方便之处，不用重启。而比其它ide的好处在于，他可以更改。

1. File -> Settings -> Live Templates (即可手动添加， 也可以下载我添加好的文件，下载后放在：C:\Users\用户名\.WebIde10\config\templates)

这里提几个比较重要简单的扩展原则。 

2. 上面文件，左边即为输入部分，右边为扩展后，如果手动添加，还需要在下方 :

No applicable contexts yet. Define

Define中选择你的类型：

//zencoding-js

// C:\Users\jikey\.WebIde10\config\templates
//core
try:
trycatch
ae: addEventListener
at: attachEvent
rn: return null

p: prototype
c: constructor
ag: arguments
ri: return this;
l: length;
v: var
tg: tagName()

rfa: return false;
del: delete
rtr: return true;
re: removeEventListener
det: detachEvent
lh:location.href
lo: location
tr: true;
fa: false;
st: setTimeout()
stf: setTimeout(function(){});
si: setInterval();
sif: setInterval(function(){});
r: return;

// dom相关
w: window
d:  document
db:  document.body
di:  document.getElementById($END$);
dn:  document.getElementsByName($END$);
dw:  document.write($END$);
dct: document.createTextNode
de: documentElement;
gt: getElementsByTagName
df: document.createDocumentFragment()
dc: document.createElement();
qs: querySelectorAll


// function 相关
bb:
(function(){
    $END$
})();
f  function $END$(){
}
fc: // 创建一个对象
function $INDEX$(){
    
}
$INDEX$.prototype = {
    name: function (){
    }
}
mf:
$END$: function(){
}
va:var $END$ = [];
vf:
var $END$ = function(){
}
vo:
var $END$ = {
    name: function(){
        
    }
}
rm: return {
    $end$: function(){
    }
}
// 流程控制
fi:
for (var $VAR$ in $ARRAY$) {
  $END$
}
for:
for(var i=0,len=arr.length; i<len; i++{
    $END$
}
if:
if($END$){        
}
ifel:
if($END$){        
} else {
}
while:
while($END$){
}
ifif: if($end$){
} else if(){
} 
el: else{}
elif: else if(){}
ib: insertBefore
ap: appendChild
dba: document.body.appendChild
// jQuery
#: $('#$END$')
j:  $('$END$')
>:  $('.$END$')
fn:
(function($){
    $.fn.$END$ = function(options){
        var defaults = {
             
        };
        opts = $.extend({}, defaults, options);
        return this.each(function(){

        });
    }
})(jQuery);

ji:$(this)
jfl:$().filter()
t.:that.me = me;
i.:this.me = me;
i: this
t that

jc: $().click
jh: $().hover
jl: $().live('click', function(){ });
jd: $().delegate('click', function(){ });
// 其它
fu:function
wd;width()
h:height();

$src:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

// firebug debug
cl:  console.log($END$);
cti:console.time('1');
cte:console.timeEnd('1');