利用函数的惰性载入提高javascript代码性能

在javascript代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题。例如,我们最常见的为dom节点添加事件的函数:

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        element.addEventListener(type, fun, false);
    }
    else if(element.attachEvent){
        element.attachEvent('on' + type, fun);
    }
    else{
        element['on' + type] = fun;
    }
}

每次调用addEvent函数的时候,它都要对浏览器所支持的能力进行检查,首先检查是否支持addEventListener方法,如果不支持,再检查是否支持attachEvent方法,如果还不支持,就用dom 0级的方法添加事件。这个过程,在addEvent函数每次调用的时候都要走一遍,其实,如果浏览器支持其中的一种方法,那么他就会一直支持了,就没有必要再进行其他分支的检测了,也就是说,if语句不必每次都执行,代码可以运行的更快一些。解决的方案就是称之为惰性载入的技巧。

Read More

javascript连连看。

之前看到一位朋友说她妈妈喜爱连连看,就想着不如把身边的朋友头像拿来做个连连看游戏吧。次连连看的特点就是不但本人头像可以连,家属,情侣之间也可以联通。寻路径算法是传统的枚举算法,原理如下,每次建立四个点,分别检查是否两两联通,如果两两联通,就说明头尾可以连。首先横向扫描,然后纵向,详细可以看注释。
DEMO:/wp-content/uploads/linkgame/linkgame.html

Read More

jQuery1.9中被删除的API

jQuery1.9删除了一些在1.8中已经过时的api,想要把那些不够安全的、缺乏效率的、用处不大的,以及带有误导的特性统统去掉。如果你想升级你的jquery版本,但又使用了如下被删除的api的话,可以引入Migrate迁移插件,被删除的api可以在Migrate插件中修复。

.toggle(function, function, … )
toggle()方法可实现点击一个元素来执行指定函数。此方法被删除以减少混乱和提高潜在的模块化程度。

jQuery.browser()
jQuery.browser()通过UA信息来检测浏览器。此方法在1.3版本中已不赞成使用,并在1.9版本中被删除,jquery团队更建议通过特性检测来时您的代码兼容浏览器。

.live()
live()方法可以为未来生成的元素添加事件,此方法在1.7版本中已不赞成使用,并在1.9版本中被删除,您可以使用on()方法来代替。

.die()
die()方法可以移除live()添加的事件,此方法在1.7版本中已不赞成使用,并在1.9版本中被删除,您可以使用off()方法来代替。

.sub()
sub()方法可以可创建一个新的jQuery副本,不影响原有的jQuery对像,但用例的数量已经不足以证明它存在的价值。

通过onhashchange优化“锚链接”

锚链接是大家再熟悉不过的了,它允许用户通过一个链接跳转到当前页面的指定内容。一般创建一个锚链接的方法就像下面这样,用户点击a标签,浏览器将跳转的id为content的div来显示其内容。。

<a href="#content">跳到id为content的标签</a>



<div id="content">

</div>

存在的问题:
当用户没有鼠标,而是使用tab键+回车键的方式触发锚链接时,页面焦点仍然停留在a标签,并没有相应转到

上。这种情况带来的问题是:如果用户继续按tab键,焦点会转移到a标签的下一个可获取焦点的元素,这可能是挨着a标签的另一个链接,反正不是
的下一个可获取焦点的元素。而屏幕可视区域就有可能回滚回其他地方。按照常理,用户更希望按下tab键,焦点应该跳转到
的下一个可获取焦点的元素。

Read More

Retina屏幕与CSS4

随着越来越多Retina技术的普及,越来越多的设备开始配置了Retina屏幕。w3c也在css4草案中加入了适配Retina屏幕的属性image-set,目前支持此属性的浏览器有chrome和safari。记得在今年冬天的webrebiuld交流会上,QQ的前端大湿曾经介绍过,并且在QQ.com的logo中用到了此属性。
在不支持image-set的浏览器:他会支持background-image图像,也就是说不支持image-set的浏览器下,他们解析background-image中的背景图像;
支持image-set的浏览器下:在普通显屏下,此时浏览器会选择image-set中的@1x背景图像,在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像。
写法:

{
    background-image: url(default.png);
    background-image: -webkit-image-set(url(no-retina.png) 1x, url(retina.png) 2x);
}

世界十大经典presentation

1. Steve Jobs【1984年介绍Macintosh的演说】 斯蒂夫·乔布斯,苹果CEO,无人不知的IT教父级人物,他的演说也是超一流,他很多的演说奉为经典,尤其是在运用幻灯片演说绝对的一流,就连PPT演说大师Garr对斯蒂夫·乔布斯佩服的五体投地。看看1984年的Steve Jobs是如何进行Macintonsh介绍演说的。
http://video.google.com/videoplay?docid=8631701936876784775

Read More

通过ime-mode属性控制文本字段的输入法编辑器的状态

ime-mode是CSS3中最新添加的属性,更准确点说,是CSS Basic User Interface Module Level 3 (CSS3 UI)规范新添加的属性,该属性可以控制文本字段的输入法编辑器的状态。IE浏览器从IE5开始就支持该属性,FireFox浏览器从FireFox3.0开始也支持该ime-mode属性。不过chrome、opera、Safari浏览器还没有开始支持该属性。

名称: ime-mode
值: auto | normal | active | inactive | disabled | inherit
初始值: auto
应用元素: text fields(文本字段)
继承性: no

下面是ime-mode各个值的说明:
auto : 默认值,不影响当前输入法编辑器的状态
normal : 输入法编辑器的状态应该是normal,这个值可以用于用户样式表来覆盖页面的设置。IE浏览器不支持该属性
active : 输入法编辑器的状态初始时是激活的;输入将一直使用该输入法直到用户切换输入法。该属性在Linux下不支持
inactive : 输入法编辑器的状态初始时是非激活状态;除非用户激活输入法
disabled : 禁用输入法编辑器;该输入法编辑器也许不会被用户激活

<html>
 <head>
  <title> New Document </title>
 <style type="text/css">
    input {ime-mode: disabled; }
 </style>
 </head>

 <body>

<form action="" name="form1" method="post">
    <input type="text" name="textfield">
</form>
 </body>
</html>

上面的例子在IE5+或者FireFox3+浏览器中运行,不允许输入中文。

这个属性虽然很强大,但是在最新版的chrome、opera、safari浏览器中都不支持该属性,所以在这些浏览器中还需要通过javascript来实现当用户输入中文时无法输入到文本框中。

避免css中文字体在浏览器中解析成乱码

许多童鞋在写CSS的时候,设置中文字体常常使用中文字符,例如font-family:”黑体”,这样我们在浏览器中看到的是什么样子的呢 ?


如果不想自己写的界面在浏览器字体声明上有异常,建议在书写css样式规则的时候避免中文字符,使用Unicode编码集,对中文字符进行转码。常见的中文字符集转码如下表:

中文名
UNICODE

新细明体

\65B0\7EC6\660E\4F53

细明体

\7EC6\660E\4F53

标楷体

\6807\6977\4F53

黑体

\9ED1\4F53

宋体

\5B8B\4F53

新宋体

\65B0\5B8B\4F53

仿宋

\4EFF\5B8B

楷体

\6977\4F53

仿宋_GB2312

\4EFF\5B8B_GB2312

楷体_GB2312

\6977\4F53_GB2312

微软正黑体

\5FAE\x8F6F\6B63\9ED1\4F53

微软雅黑

\5FAE\8F6F\96C5\9ED1

如果你不知道某个中文字体的Unicode编码,可以使用通过JS如下方法进行转化:

function toUnicode (str) {return escape(str).toLocaleLowerCase().replace(/%u/gi, '\\');}
console.log(toUnicode ('微软雅黑')); // '\5fae\8f6f\96c5\9ed1'

使用WebStorm/Phpstorm实现remote host远程开发

如果你的开发环境是在远程主机上,webstorm可以提供通过ftp/ftps/sftp等方式实现远程同步开发。这样我们可以就抛弃ftp、winscp等工具,通过webstorm编辑远程文件以及部署,本文基于WebStorm5.04编写, Intellij IDEA或者PHPStorm使用方法基本相同,可参考之。并且还要感谢因特里基友群群主大猫的帮助。

1、首先我们来创建一个基于远程主机的project,点击file>new project from existing sources,打开了创建project的对话框,我们选择第四项,例如我们的远程主机通过ftp/sftp/ftps等方式传输文件,点击next。

Read More