Archive for the ‘前端’ Category

别用Express.Less.Compile

Friday, December 16th, 2011

创建项目的时候,传入 -c less

$ express -c less sampleproject 

在app.js里面, configure  里面会多出来一行,

app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));

用这个Middleware模块, 可以自动解析less了。

当你请求 abc.css文件时,会自动找到同目录下的 abc.less, 编译成CSS传给浏览器。

 

没这么简单。。。

目前已知的问题有:

1. import 路径

@import 时的路径相对于应用根路径。所以,导入Less时候必须 这样子

@import "/public/css/file.less";
2. rebuild
由于less 自动打包是根据目标文件的最后修改时间来判断是否重新打包的。
当被import的文件修改的时候而主文件没有修改, 不会自动重新编译。
又一个硬伤啊!
3。无法时候另一个文件里面的less变量。。。。。
结论:
所以说,目前 LESS compile 几乎无法使用。

低碳的 Notepad++

Wednesday, July 7th, 2010

藉由加強與優化許多函數及演算法,Notepad++ 致力於減少世界二氧化碳的排放。

—— Notepad++  官方网站

我对 Notepad++ ( 以下称 NPP ) 一见钟情已经快1年,在这1年中了,发现随着了解的深入,对NPP越来越有爱了,对我来说 notepad++ 吸引点如下

  • 平易近人,容易上手, 而且上手后可挖掘程度也很高
  • 时时会发现令人惊喜的插件
  • 做的多吃的少,打开大文件时效率高
  • 有插件 可扩展

缺点:

  • Windows Only
  • 可以设置自定义快捷键来满足个性化。 不过快捷键设置界面比较让人蛋疼

一些好用的插件

一、 NPPEXEC

能运行外部的脚本,执行命令,还有一个控制台,可以方便的在NotePad内部去执行外部的命令。 用好这个插件,几乎能做到任何你能想的到的事情。

我用的最多的几个脚本,如 脚本压缩, jslint检查, svn操作等。还可以用nppexec 配合 [ruby....]等脚本语言,做文件同步,等等。 真是一切皆有可能。

二、Zen-Coding

Zen-Coding是写HTML&CSS的利器。 大家也许不陌生。 起码用了之后,能大大减少前端编码量。有效缓解脖酸背疼。而且写的快了,就可以按时下班,少用电脑几小时,可谓低碳。

安装好插件后。输入

html:5

Ctrl+E展开成:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
|
</body>
</html>

输入

div#page>div.logo+ul#navigation>li.o-$*5>a

展开成

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li class="o-1"><a href=""></a></li>
		<li class="o-2"><a href=""></a></li>
		<li class="o-3"><a href=""></a></li>
		<li class="o-4"><a href=""></a></li>
		<li class="o-5"><a href=""></a></li>
	</ul>
</div>

啊呜~~ 很爽。

如何安装

到  http://code.google.com/p/zen-coding/ 下载插件NPP插件。下载后将zip 文件解压到安装目录下的plugin文件价里,重启NPP 就可以生效了。

一个小问题:目前我发现的 如果采用ANSI编码的文件,只要输入中文,在中文后面Zencoding插件 就会失效。所以,在编码阶段,最好把文件编码改成UTF-8的。

关于IE的 window.event

Friday, January 8th, 2010

如下代码在IE下面运行

<html>
<head>
</head>
<body>
<button onclick="fn()">btn</button>
<script>
var fn = function(){
var o = window.event;
var b = window.event;
alert(o === b);
alert(o === window.event);
alert(window.event === window.event);
}
</script>
</body>
</html>

请问代码中3个alert 分别是什么;

window.event === window .event 这是假的

o === window.event 这也是假的

o === b 这个呢? 也是假的

这是为什么呢~?

在回调函数中 window.event 不是一个对象。。。 更确切的说 window.event 是一个get函数。是的没错,他是一个函数。

window.event 等价于 function(){ return new Event()  }();

每次调用它都返回一个新的Event对象。 所以,即使在同一个时间里面 window.event 返回两个不同的对象 。 所以当然 window.event != window.event;

下面两条就好解释了, o 指向一个Event对象,而window.event 返回一个新的对象,自然不同。

o===b 为什么为假 不需要解释了吧?

仅仅是猜测,是不是真的 有待验证。

页面跳转提示,防止用户误操作丢失编辑数据

Wednesday, January 6th, 2010

用window.onunload 只能侦测到unload 事件,但这是已经晚了,不能在阻止页面的跳转。

window.onbeforeunload = function(){
return “你要走吗?”
}
可以很方便完成这个任务。可以设置
window.onbeforeunload = null
来清除这个事件侦听

单选框的change事件

Wednesday, December 16th, 2009

项目中发现,单选框的 “change”事件极不可靠。主要有以下几点需要注意:

  • change 事件发出的时间
  • change事件发出时,单选框的checked属性

实验

请看事件慢动作回放来了。

FF:
17: change:1-----true
16: document CLICK:INPUT------true
15: click:1-----true
14: document UP:INPUT------false
13: up:1-----false
12: document DOWN:INPUT------false
11: down:1-----false
10: document CLICK:INPUT------false
9: document UP:INPUT------true
8: document DOWN:INPUT------true
7: change:1-----true
6: document CLICK:INPUT------true
5: click:1-----true
4: document UP:INPUT------false
3: up:1-----false
2: document DOWN:INPUT------false
1: down:1-----false

在火狐里面,当单选框的”click”事件发出时,其选中状态已经为true了(5)。此时“change”事件发出(7),事件发出时,checked 状态为true;继续,当我们在相邻的单选框点击时,(8-10),完成Click动作时,单选框选中状态变成”true”, 但此时,并没有发出“change”事件。

IE:
12: document UP:HTML------false
11: document DOWN:HTML------false
10: document CLICK:INPUT------false
9: document UP:INPUT------true
8: change:1-----true
7: document DOWN:INPUT------true
6: document CLICK:INPUT------true
5: click:1-----true
4: document UP:INPUT------false
3: up:1-----false
2: document DOWN:INPUT------false
1: down:1-----false

在IE下,从(1-6)为选中单选框的动作,当发出“click”事件时,单选框的checked 由”false”->”ture”,但此时,并没有change事件产生。注意7-10,当鼠标在别的控件上按下时(7),该单选框马上发送“change”事件(8),但此时,单选框的值并没有改变。然后鼠标释放连续触发“mouseup”,”click”事件。我们可以看到,在“click” 发送时,单框的checked值才改变了,从”true”变成了”false”。

类似的发现,在IE下面,表单元素的change事件也不会冒泡。也就是说,你无法通过侦听父元素来侦听其中表单元素的Change事件。

结论

  • IE当侦听的单选按钮由选中变为非选中时,产生”change”事件,FF是当单选按钮由非选中变为选中时,产生该事件
  • IE中当捕捉到“change”事件时,其checked属性的值还未变化,当捕捉到”chick”事件时,checked值才变。FF是change事件发出时,checked的值已经发生变化。
  • 事件编程中慎用”change”事件。