Js,jQuery版Zencoding之webstorm & phpstorm

简介: zencoding自从2009年因html,css的扩展而风靡业界,而webstorm自从2.0之后就已经集成。 无意中被不断输入的console.log,console.dir搞的很恼火,所以才有了今天的js之webstorm。

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');
复制代码

 

 

 

本文转自豪情博客园博客,原文链接:http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html,如需转载请自行联系原作者
目录
相关文章
|
12天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
12天前
|
JavaScript 前端开发 开发者
介绍如何在WebStorm中调试JavaScript文件
介绍如何在WebStorm中调试JavaScript文件
12 1
|
4天前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
6天前
|
JavaScript 前端开发
js,jq,jquery删除css属性
js,jq,jquery删除css属性
8 0
|
11天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
15 0
|
2月前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
27 0
|
2月前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
2月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
Web App开发 JSON JavaScript
JavaScript及jQuery入门 【下】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入
|
存储 JavaScript 前端开发
JavaScript及jQuery入门【上】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入