Yuguo.us

学用代码片段

Introduction

user

余果

全栈工程师,《Web全栈工程师的自我修养》作者。


Featured

back-end

学用代码片段

Posted by 余果 on .

之前写过一篇文章《EmEditor代码片段插件介绍》,现在项目越来越多,越来越大,不再用EmEditor,而用IntelliJ IDEA。这个IDE能管理项目,而且也有类似的代码片段功能——Live Template。本文主要就是关于Live Template(模版)。

自定义变量

Live Template最核心的思想是通过一个字段(Abbreviation)来展开一个模版(Template),这样我们输入很少字符的字段,就能输出很多字符的模版,从而节省时间和精力。

模版中包含纯文本和变量。变量是两个美元符号$中间包含字符,比如$<variable name>$这样的格式。

举个例子,在设定字体大小的时候,往往需要同时设置px和rem两种单位,为了节省时间,我就创建了这个叫做fs的模版。

在IDEA中Ctrl+Alt+S打开设置,然后搜索Live Template,之后我们会看见很多group,比如html、css、zen css等,我这个模版是在css中触发,所以我在css group里新建一个模版。Group只是用来管理Live Template,跟在什么环境下触发没关系,还可以自己建一些group比如“项目” css group里新建一个fs模版

我设定的缩写是fs,属于css这个Group,描述是css中的font-size这个属性。

Template text中的文本我写的是

font-size:$v1$px;font-size:$v2$rem;

展开快捷键是默认的(Tab),最后只有在CSS上下文(注意,是CSS上下文,不是CSS文件,这样在HTML中的<style>里也是能展开这个Template的)中输入:fs(Tab)之后,就会出现下面的截图: 我随便设置了两个变量$v1$和$v2$,只是作为用户输入的一个placeholder,也可以是任何其他值。除了两个预设变量。

预设变量

IDEA自带两个变量,用户无法修改,一个是$SELECTION$。

$SELECTION$被用于“环绕模版”中,所谓环绕模版,就是当模版被展开的时候,被选择的文字会包含在模版之中。比如我创建一个模版如下:

这时候有两种方法来展开模版,方法一是通过缩写+指定快捷键,方法二是Ctrl+Alt+T,然后选择对应的模版,这个时候所有的包含了$SELECTION$的。

另一个预设变量是$END$,它表示模版结束的地方。

Expression

在编辑模板的对话框中点击Edit varibles按钮的时候,会出现一个对话框,其中可以编辑每一个变量的Expression。 Express中可以有3种值:

  • 预设的函数,可能有参数,也可能没参数。Predefined functions with possible arguments.
  • 双引号包围的字符串常量。String constants in double quotes.
  • 其他变量的名字。The name of another variable defined in a live template.

预设的函数有一些会很有用,比如用time()输出当前的时间。

例子

以下是我用代码片段来给项目带来快捷的一些例子。从这些例子中主要可以看出使用代码片段的几个优势:

  1. 一致性
  2. 便捷性
  3. 规范性

html

/[tab]——【说明】HTML注释

<!-- $END$ -->

a[tab]

<a href="##" title="$text$">$text$</a>$END$

ai[tab]

<a href="##" title="$title$"><img src="pic/sample.jpg" alt="$title$" /></a>

b[tab]

<b class="btn_$value$"></b>

div[tab]——【说明】div基本上都是有class的

<div class="$end$">

</div>

dl[tab]——【说明】节省输入

<dl>

	<dt></dt>

	<dd></dd>

	<dt></dt>

	<dd></dd>

</dl>

i[tab]——【说明】项目中约定用i标签做图标

<i class="ico_$end$"></i>

img[tab]——【说明】避免忘记alt文字

<img src="http://placehold.it/70x53" alt="$alt$" />$END$

jquery[tab]——【说明】在项目中经常需要做一些简单的动态演示,给前台开发使用,简单 演示我就用jquery来做

<!-- 前端演示脚本 开始 -->

<script src="http://qzonestyle.gtimg.cn/qzone_v6/html/api/js/jq.js" type="text/javascript"></script>

<script type="text/javascript">

</script>

<!-- 前端演示脚本 结束 -->

la[tab]——【说明】list里面包含一个a,这是常用的一种结构

<li><a href="#">$text$</a></li>$END$

CSS

CSS的代码片段更多的是为了浏览器兼容而设置。

/[tab]——【说明】简单注释

/* $VALUE$ */$END$

//[tab]——【说明】复杂注释,用来分页

/* ====  page: $start$ ==== */

db/di/dn[tab]

display:block;display:inline;display:none;

ib[tab]——【说明】跨浏览器的inline-block

display:inline-block;*display:inline;zoom:1;

radius[tab]——【说明】可以通过一个变量,一次输出数值

-moz-border-radius: $num$px; -webkit-border-radius: $num$px; border-radius: $num$px;

fs[tab]——【说明】设置正文的文字大小的时候,除了用px单位,最好还用rem单位来设置

font-size:$v1$px;font-size:$v2$rem;

lo[tab]——【说明】通过line-height和overflowhidden的方法来隐藏文字

line-height:900px;overflow:hidden;font-size:0;

opacy[tab]——【说明】参考资料<pre>filter:alpha(opacity=$n$0);-moz-opacity:0.$n$;-khtml-opacity: 0.$n$;opacity: 0.$n$;</pre> nowrap——【说明】不换行<pre>white-space:nowrap;width:100%;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-wrap:normal</pre><h3>总结</h3> 更多的代码片段我没有列出来,每个人需求不同,如果每次在完成某个任务、获得某种灵感的时候,把完成细节用代码片段总结出来,一定能越来越快越来越好。有的时候不知道如何把握代码片段复杂度,以下原则作为参考:

  1. 很多情况下,冗余的代码就是健壮的代码。它是能够最大化容忍外部因素的不确定性的一种模式。
  2. 代码片段应该保持较小的粒度。拿建筑学做比喻,代码片段是砖和三合板,而不是细小的沙子,也不是成型的小房子。
user

余果

https://yuguo.us

全栈工程师,《Web全栈工程师的自我修养》作者。