玩转EditPlus

2009-12-23 20:55

EditPlus（EP）帮助手册中列出了EP的主要功能：

  • 语法高亮
  • Internet功能
  • HTML工具栏
  • 文档选择器
  • 用户工具和帮助文件
  • 自动完成
  • 素材文本窗口
  • 文档模板
  • 其他功能

其中“语法高亮”，“自动完成”和“文档模板”在EP中非常灵活，用户皆可根据自己需要进行配置。EP默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript 和 VBScript的语法高亮显示，基本上无需再做过多设置。而“自动完成”和“文档模板”默认支持有限，而且可能并不符合个人日常的一些编码习惯，那么则需要我们自己根据习惯进行配置，才能得心应手。

自动完成

自定义自动完成功能可分为两步：1.编写自动完成文件；2.指定关联路径。

#TITLE=CSS
;EditPlus Auto-completion file v1.0 written by wondger(http://omiga.org).
;This file is provided as a default auto-completion file for CSS.
#CASE=n
#T=reset
/*reset*/
body,h1,h2,h3,h4,h5,h6,ul,ol,p,dl,dt,dd,th,td{margin:0; padding:0;}
table{border-collapse:collapse;}
li{list-style:none;}
em{font-style:normal;}
img{border:none;}
a img{vertical-algin:top;}
/*reset*/
#T={
{^!}
#T=m
margin:^!px;
#T=ma
margin:0 auto;^!
#T=mt
margin-top:^!px;
#T=mr
margin-right:^!px;
#T=mb
margin-bottom:^!px;
#T=ml
margin-left:^!px;

以上为一段CSS自动完成文件代码。自动完成文件每个语句必须以“#”开头。

  • #TITLE – 为自动完成文件标题
  • #CASE – 指定是否区分大小写。‘y’表示是，‘n’表示否。默认值是‘n’。
  • 每个自动完成片段以“#t=title”形式的开始。title是你要你扩展的缩写词，换行后开始匹配自动完成文本，直到遇到“#”符号。如：
#T=m
margin:^!px;
  • ^! – 指定每一次自动完成后光标的停留位置。
  • ^ – 转义字符，如果需要在自动完成文本中插入“^”或“#”则需要先进行转义：“^^”，“^#”。

自动完成文件编写完成后，保存为.acp文件在任一文件目录即可。

随后打开“工具”菜单-“首选项”-“文件”-“设置和语法”，为相关文件类型设置自动完成文件，“确定”完成设置。

ep_acp

自此自动完成功能配置完成，在对应类型的文件编码中，空格触发自动完成功能。当然，你可以通过Shift 键或Window徽标键来暂时禁止此功能。

文档模板

我们日常处理的不论是HTML文档，还是CSS,JavaScript文档，都存在一定的文档规范，比如版权信息，title，keywords，description，或者一些固定的文档结构。我们显然不希望每次新建这些文档的同时，都需要重新录入这些代码，即使是“Ctrl+v”也还是有损效率。那么EP的“文档模板”则可帮助我们完成所有的工作。

自定义“文档模板”也分为两步：1.编写文档模板，2.关联模板

编写文档模板非常简单，无任何语法。比如，我需要一个HTML文档模板，那么新建一个HTML文档如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>title | wondger@gmail.com/</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<meta name="author" content="wondger" />
<style type="text/css">

</style>
</head>
<body>

</body>
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
</html>

根据个人需要编写模板完成后，保存为.html在任一文件目录。

随后打开“工具”菜单-“首选项”-“文件”-“模板”，在模板列表中选择相应模板关联模板文件即可。模板可以是默认模板，也可以新建模板（MY_PAGE）。

ep_tp

这样便完成“文档模板”设置，现在文件新建菜单中便可选择新建该模板文档。（其实你还可以自定义新建文档快捷键，稍后介绍）

ep_new

其他功能

自定义快捷键

EP所有操作的快捷键皆在“工具”菜单-“首选项”-“工具”-“键盘”中进行设置。我们以新建模板文档为例。

ep_hotkey

在“文件”菜单的“命令”中并不存在新建的“MY_PAGE”模板，那么如何自定义“新建MY_PAGE文档”的快捷键？其实这里存在一个对应关系，在“文件”菜单的“命令”列表中存在一个“模板1”-“模板20”的选项列表，这就对应于我们的自定义模板。

ep_md

在EP的模板列表中默认的HTML和XHTML模板无法删除，那么我们自定义的模板则按照从上到下的顺序为“模板1”、“模板2”…（其实我在想第21个自定义模板怎么办？-_-!）。这里“MY_PAGE”对应于“模板5”，在设置快捷键的时候会提示该快捷键是否已定义，如果分配已定义的快捷键，那么较早的定义会被覆盖。一个命令可以定义多个快捷键。

自动保存

EP具有定时自动保存的功能，保存间隔时间可在“工具”菜单-“首选项”-“文件”中进行设置。

保存时创建备份

EP默认会在保存时自动创建一个.bak备份文件。备份文件存放目录，后缀名皆可自定义。

HTML工具栏

ep_toolbar

EP具有强大的HTML工具栏，具有插入图像、选择颜色、插入特殊字符、表格、段落、列表、注释、表单等丰富功能。这个HTML工具同时也是可以在“工具”菜单-“首选项”-“工具”-“工具栏”自定义。

OK，以上内容为个人认为是在EP使用中较多涉及的一些功能。除此之外关于软件本身的一些设置，如字体，颜色，背景，布局等，大家就慢慢折腾吧！

Tags: ,,,,
Posted in: front-end|No Comments »

ExternalInterface

2009-07-23 17:16

ExternalInterface是一个外部的用于实现Actionscript和Flash Player容器之间通信的应用程序接口（诸如AS与JS的通信）。推荐对所有 JavaScript 与 ActionScript 之间的通信使用 ExternalInterface，替代较旧的fscommand()，getURL()方法。

ExternalInterface类有两个公共属性：

  1. available : Boolean　[static][read-only]　指示此播放器是否位于提供外部接口的容器中。
  2. objectID : String　[static][read-only]　在 Internet Explorer 中，返回标签的 id 属性；在 Netscape 中，返回 name 属性。

同时具有两个公共方法：

  1. addCallback(functionName:String, closure:Function):void　[static]　将 ActionScript 方法注册为可从容器调用。
  2. call(functionName:String, … arguments):*　[static]　调用由 Flash Player 容器公开的函数，不传递参数或传递多个参数。

ActionScript调用JavaScript demo

AS:

import flash.events.MouseEvent;
import flash.external.ExternalInterface;
bt.addEventListener(MouseEvent.MOUSE_UP,alert);
function alert(e:MouseEvent):void{
 ExternalInterface.call("alert","a demo for call \n http://omiga.org");
}

直接调用即可,当然,最好检查一下当前容器是否支持外部接口通信。

bt.addEventListener(MouseEvent.MOUSE_UP,alert);
function alert(e:MouseEvent):void{
 if(ExternalInterface.available){
 ExternalInterface.call("alert","a demo for call \n http://omiga.org");
 }
}

JavaScript调用ActionScript demo

AS:

import flash.external.ExternalInterface;
function setText(s){
 i_txt.text = s;
}
ExternalInterface.addCallback("setText",setText);

HTML:

<object id="mySWF"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="300" height="22">
 <param name="movie" value="addCallback.swf" />
 <param name="quality" value="high" />
 <param name="allowScriptAccess" value="always" />
 <embed src="addCallback.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="22"></embed>
</object>
<button onclick="set()">设 置</button>
<script type="text/javascript">
function getFlash(id){
 if(document.all) return document.getElementById(id);
 else return document.getElementById(id).getElementsByTagName("embed")[0];
}
function set(){
 var s = prompt('请输入：');
 getFlash("mySWF").setText(s);
}
</script>
Tags: ,,,,,,
Posted in: front-end|No Comments »

性能，还是性能！

2009-05-28 21:17

很简单的一个应用，实现方式当然也是多种多样，最直接的，通过<img>的src属性，但我想这是最废材的方法了，这样一个效果，你至少需要两张图片，然后是更多的DOM操作，你还要面对图片下载延迟的问题。还有啥性能（1，2）可言？

于是我写了以下的实现方式（DEMO）：

function star(id){
	var star = $(id);
	var stars = $(id).getElementsByTagName("li");
	for(var i=0; i<stars.length; i++){
		stars[i].starNum = i+1;
		stars[i].onmouseover = function(){
			star.star = this.starNum;
			star.style.backgroundPosition = 'left '+(-parseInt(this.starNum)*30)+'px';
		}
		stars[i].onclick = function(){
			alert(star.star);
		}
	}
	star.onmouseout = function(){
		star.star = 0;
		this.style.backgroundPosition = 'left top';
	}
}
function $(id){return document.getElementById(id);}

当然要依据特定的DOM，这种方式通过改变背景图片的位置来实现，看起来似乎已经很完美了，可惜这只是较之于src的实现方法而言。

再看一个TZ的改进的版本（DEMO）：

    function $(element){
      return document.getElementById(element) ;
    }
    var obj = $('outter').getElementsByTagName("li") ;
    for (var i=0,k;k=obj[i];i++ ) {
      k.no = i ;
      k.onmouseover = function () {
        for (var i=0;i<=this.no;i++ ) {
          obj[i].style.backgroundPosition = 'left -30px' ;
        }
      }
      k.onmouseout = function () {
        for (var i=0;i<=this.no;i++ ) {
          obj[i].style.backgroundPosition = 'left top' ;
        }
      }
    }

很显然，这个写法比我的又更优化了一些。虽然都是通过改变背景图片的坐标来实现，但是，我使用了一个30K的jpg图片，TZ使用的却是一个只有599B的gif图片，但即使不使用gif，他的图片也会比我的小很多，大概是15倍左右～···，因为具体的实现方式决定了。虽然他的方法增加了更多的DOM操作，但是最大限度地优化网络传输方面的性能，总体性能是最佳的！

只有一个感概：只要有可能，就要最大限度的减少页面下载量，就要最大限度的提升代码性能！

Tags: ,,
Posted in: front-end|5 Comments »

逻辑AND(&&)运算符

2009-03-03 15:49

先看下面这段代码，注释有运行结果。

var t = true;
var f = false;
var i = 1;
var s = "hello";
var a = [1,10,100];
alert("t&&i: " + (t && i)); //1
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //true
alert("i&&f: " + (i && f)); //false

alert("i&&s: " + (i && s)); //"hello"
alert("i&&a: " + (i && a)); //1,10,100

alert("s&&i: " + (s && i)); //1
alert("a&&i: " + (a && i)); //1

再看来自w3school的一段文字：

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

  • 如果一个运算数是对象，另一个是 Boolean 值，返回该对象。
  • 如果两个运算数都是对象，返回第二个对象。
  • 如果某个运算数是 null，返回 null。
  • 如果某个运算数是 NaN，返回 NaN。
  • 如果某个运算数是 undefined，发生错误。

第一条：如果一个运算数是对象，另一个是 Boolean 值，返回该对象。如果这种说法成立，那么先前测试中的以下代码都应输出i。

alert("t&&i: " + (t && i)); //1
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //true
alert("i&&f: " + (i && f)); //false

但实际并非如此。再看规则第二条：如果两个运算数都是对象，返回第二个对象。对先前的测试代码稍作修改，把0赋值给i：

var t = true;
var f = false;
var i = 0;
var s = "hello";
var a = [1,10,100];
alert("t&&i: " + (t && i)); //0
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //0
alert("i&&f: " + (i && f)); //0

alert("i&&s: " + (i && s)); //0
alert("i&&a: " + (i && a)); //0

alert("s&&i: " + (s && i)); //0
alert("a&&i: " + (a && i)); //0

i与另外一个不是boolean类型的运算数的AND运算都返回了i，并不是规则中所说的第二个对象。

再看如下代码，将字符串s赋值成空字符串，将数组a也赋值为空数组：

var i = 0;
var s = "";
var a = [];

alert("i&&s: " + (i && s)); //0
alert("i&&a: " + (i && a)); //0

alert("s&&i: " + (s && i)); //""
alert("a&&i: " + (a && i)); //0

于是，我的结论是：AND(&&) 运算不论运算数的类型是什么，如果运算结果为true，那么返回第二个运算数；如果运算结果为false，那么返回第一个布尔值等于(==)false的运算数。似乎这个结论是正确的，但是仔细看看最后一条测试语句的结果，并不遵循所得出的结论。

其实这里又涉及到另外一个typeof为object的值的布尔运算问题，如果object类型的值为空那么等于运算符(==)会视其为false，但是其他运算符则会视其为true。所以也才有了下面的现象：

alert([]==false); //true
if([]) alert("ok"); //ok

所以AND(&&)运算符测试中的最后一句a&&i其结果为false，但是a为true，所以有结果0。

如此看来，我们得出的结论也是完全正确的。

Tags: ,,,
Posted in: front-end|No Comments »

setTimeout，setInterval参数传递

2009-01-15 15:12

可能你曾经试着这样去给setTimeout()或setInterval()传递参数：

setTimeout('func("'+'hello,world!'+'")',2000);

这种方式存在两个明显的弊端：

  1. 无法传递object类型的参数
  2. 代码混乱，增加维护难度

事实上你完全可以使用闭包来解决这个问题。

function msg(s){
	return function(){alert(s)};
}
var m = msg("hello,world!");
setTimeout(m,2000);

当然你还可以使用curry化的思想，进一步完善代码：

function delayMsg(s){
	function msg(){
		alert(s);
	}
	setTimeout(msg,2000);
}
delayMsg("hello,world!");
Tags: ,,,,
Posted in: front-end|No Comments »
Page 1 of 512345