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');