2015年2月

关于JQuery中动画重复触发滞后的解决方案

在交互中,鼠标触发事件的动画很常见
比如一个商品清单,当鼠标移入时显示商品的详细信息,鼠标移出时恢复初始
在使用JQuery的mouseover和mouseout事件时,若只是show()和hide(),这个过程瞬间完成,不会遇到动画滞后的问题
如果想要添加一些效果,比如使用slideDown()和slideUp()做交互,那么动画执行完成需要一定时间

当鼠标不停快速滑入滑出事件就会重复触发,但是每次触发的动画又必须执行完毕,就导致了动画滞后的问题
这里有两种解决方案

  1. 在触发元素上的事件设置为延迟处理,使用 setTimeout()
  2. 在触发事件时先停止动画,再执行相应的动画事件,使用 stop()

显然第二种方法体验更优

jQuery stop() 方法用于停止动画或效果,在它们完成之前
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false
因此,默认地,stop() 会清除在被选元素上指定的当前动画

所以,一个简单的商品清单的示例如下

$(document).ready(function(){
    $('li').mouseover(function(){
        $(this).children('dl').stop(true,false).slideDown();
    })
    $('li').mouseout(function(){
        $(this).children('dl').stop(true,false).slideUp();
    })
})

Read More »

Node.js Echo Server

用Node创建一个Echo Server非常简单
利用on方法响应事件,当读取到新数据时就可以触发事件

echo_server.js

var net = require('net');

var server = net.createServer(function(socket){
    socket.on('data',function(data){
        socket.write(data);
    });
});

server.listen(8888);
console.log('SERVER RUNNING...');

用这条语句运行

node echo_server

服务器运行起来之后,通过telnet命令连接上去

telnet 127.0.0.1 8888

我用的Win7系统,Telnet服务默认是关闭的,需要在 控制面板-程序 打开telnet服务
连接上去之后,就可以在当前模式下把数据发送给服务器,数据也会传回到telnet会话中

如果看不见任何字符,是因为 Telnet Client 是默认关闭本地回显的
Press ' Ctrl+] ' 退出当前模式
在Telnet Client上输入

set localecho //打开本地回显

打开成功之后再按下 'Enter' ,数据就可以正常显示了

Read More »

CSS书写规范及顺序

CSS 编码规范

接触 CSS 已经有将近两年的时间了,写的 CSS 也不少,现在越来越会追求代码的质量与可读性,在写 CSS 代码时,如若能按照一个规范来写,那么不管是你自己或者是团队里的其他成员,都会觉得舒畅

以下是来自 Bootstrap 的编码规范 http://codeguide.bootcss.com/

  • 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。

  • 为选择器分组时,将单独的选择器单独放在一行。

  • 为了代码的易读性,在每个声明块的左花括号前添加一个空格。

  • 声明块的右花括号应当单独成行。

  • 每条声明语句的 : 后应该插入一个空格。

  • 为了获得更准确的错误报告,每条声明都应该独占一行。

  • 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。

  • 对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。

  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。

  • 对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。

  • 十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。

  • 尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。

  • 为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。

  • 避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。

书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

1.png

书写规范

使用CSS缩写属性

Read More »