我想网 » 前端开发

HTML5未来发展的六大趋势

seasun — Tue, 20 Dec 2011 12:43:54 +0000

HTML 5从根本上改变了开发商开发Web应用的方式，从桌面浏览器到移动应用，这种语言和标准都正在影响并将继续影响着各种操作平台。

在移动领域，大家争论不休的一个问题就是开发Web应用还是原生应用？而随着HTML 5标准的发展，两者之间的差异已经逐渐变得模糊，今天各大媒体都争相报道与HTML 5有关的东西，那么，HTML 5未来的发展趋势到底是什么？

1）移动优先

前天，appMobi获选ReadWriterWeb2012最具前途的的公司，作为一家初创公司，这个奖公司首先专注于在移动平台上如何实现HTML 5的简单易用和无处不在。

从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。

如上文所说，此前一直困扰移动领域的问题就是开发Web应用还是原生应用。而如今，我们看见一些大型企业如《金融时报》在冲着HTM L5进军移动市场过程中，从App Store撤掉iPad原生应用而开发Web应用，同样表现出色。

许多游戏开发商也将在移动Web应用中扮演中重要角色，移动Web应用优先的趋势将会持续到移动设备统治信息处理领域。其实用户根本不在乎你用什么工具开发了什么应用，不管是Web应用还是原生应用，只要好用就可以了。

2) 游戏开发者领衔“主演”

其实移动游戏开发商是从HTML5获益最多的一方，他们可利用这个平台逃脱付费游戏须向苹果支付的30%提成。在某种程度上，游戏就是移动平台销量最好的应用，也是吸引人们购买移动设备的一个重要因素。

许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML 5平台开发出游戏非常困难，但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式，Facebook差不多就这么干的——基于Web应用及浏览器，但却将之打包整合进原生应用。

3) 响应式设计&自动变化的屏幕尺寸

在HTML 5真的改变移动开发平台之前，必须要迈出重要一步，那就是“响应式设计”，也就是屏幕可以根据内容而自动调整大小。

响应式设计最好的一个例子就是今年上线的BostonGlobe.com（观看视频），其屏幕能够根据任何内容而调整尺寸大小，在访问过其开发商Filament Group后才了解到，响应式设计也并非易事，一些基本概念设计必须从头开始，比如处理媒体库的RespondJS，而且处理来自第三方的图片和广告也是恼人的问题。

要想做好响应式设计，就必须洞悉内容与屏幕之间的反馈关系，一家来自硅谷的响应式设计公司ZURB称，其实在过去的16年中，开发商就意识到响应式设计就要完全离开“流”，转而注重内容是如何在网页和移动设备中被处理的，这一过程还在继续，HTML 5会让它最终成为可能。

4 )设备访问

消除Web应用与原生应用界限的最大障碍就是浏览器访问移动设备基本特性的能力，比如照相机，通讯录，日历，加速器等，利用HTML5实现此能力方面，上文中提到的appMobi算是行业翘楚，在感恩节后开源了所有API。Mozilla也一直在努力通过移动浏览器Fennec来将强设备访问能力。

对许多移动开发商来说，提高设备访问能力是HTML5最令人激动的革新，这意味着Web应用能够登陆移动设备而无需做任何PhoneGap式打包，游戏开发商当然最开心，因为某些特性对他们来说是封锁的，比如能整合到游戏中的加速器。

这就开启了另一个可能的世界，比如能与云更好地整合（这有利于应用内购买，消息推送等）并提高游戏可玩性，有了HTML5这个平台，开发商可以不再依赖于Java语言，CSS3，HTML及其它程序语言。

5) 离线缓存

这个概念相当新潮，离线情况下，app也能照常运作，算是HTML 5充满魔力的一面，今年最好的离线缓存例子就是亚马逊Kindle的云阅读器，可以通过Firefox6以上版本，Chrome11以上版本，Safari5以上版本及iOS4以上版本浏览器将内容同步到所有Kindle系列设备，并能记忆用户在kindle图书馆的一切。

亚马逊就这么实现了离线使用Web应用，许多专家人声称原生应用的末日即将到来，因为Web应用的使用变得简单，无摩擦，适用于任何一个平台或者无需平台。当然Mozilla的触角也伸到了这里，实际上，Mozilla想涉足任何一个HTML 5能渗透的领域，从Mozilla的移动蓝图，可以了解更多。

6) 开发工具的成熟

在今年八月份，Brian Fling曾写过一篇博文叫HTML5 Web应用开发剖析，提出了几点建议供从事HTML 5应用的开发者参考：
要耐心，HTML5项目可能比开发其他任何项目好是都要长
做好预算，这不像建网站那么简单，可能会耗费你大量资金
找对开发者，你要记住，这对许多经验丰富的专家来说都非常难的事，那么你的团队也会觉得困难，所以一定要找对人，找到正确的方向
要自食其力，你要知道，开发HTML 5项目，许多工具都要自制，不是现成的
在技术界，按部就班的教条风格在这里行不通，会花掉许多不必要的资金，在移动领域，没有对与错，只有是否适合，一切以用户体验为重。

在工具方面，除了appMobi提供的工具以外，还有Sencha及Appcelerator提供的框架及IDE供应用开发商们使用，虽然这些工具现在算不上成熟，也不如Android和iOS上的开发商框架及工具那般简单强大，但至少它们在演进，将会变得越来越好用。

总结

HTML 5的其它功能，如表单和新标准还在快速演进，而随着标准化工作的进行，HTML 5有可能变回HTML。HTML 5开发领域的领军人物包括Sencha，Adobe，Appcelerator，appMobi及Facebook，亚马逊，Google三大巨头。

不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud，不论是桌面应用还是移动应用，HTML 5都是创新的主旋律。

Feed enhanced by Better Feed from Ozh

7 项 Web 开发者需要了解的新技术

seasun — Sun, 25 Sep 2011 09:15:45 +0000

Web 开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的 Web 开发技术，作为一个 Web 开发人员，你需要了解、熟悉并学会的技术。

1、CSS3 media queries

目前，大量智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对 Web 开发带来了前所未有的挑战，如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

例如，下面的代码只在屏幕显示区域大小为 767px 的时候才有效：

    @media screen and (max-width:767px){
        #container{
            width:320px;
        }   

        header h1#logo a{
            width:320px;
            height:44px;
            background:url(image-small.jpg) no-repeat 0 0;
        }                             

    }

2、Font resizing with REMs

CSS3 引入新的字体尺寸单位 rem (root rm)

em 单位是相对于父节点的 font-size ，会有一些组合的问题，而 rem 是相对于根节点（或者是 html 节点），意思就是说你可以在 html 节点定义一个单独的字体大小，然后所有其他元素使用 rem 相对于这个字体的百分比进行设置。

    html { font-size: 62.5%;}
    body { font-size: 1.4rem;}/* =14px */
    h1   { font-size: 2.4rem;}/* =24px */

3、Cache pages for offline usage

HTML5 引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。

要缓存页面非常简单，首先在你网站的 .htaccess 文件中添加如下一行：

AddType text/cache-manifest .manifest

然后你可创建一个文件如 offline.manifest ，包含如下内容：

    CACHE MANIFEST
    CACHE
    index.html
    style.css
    image.jpg

最后，在 html 节点中增加：

4、Server-side JavaScript

JavaScript 现在已经是非常流行的 Web 客户端编程语言了，但 JavaScript 也越来越多的出现在服务器端了，通过强大的 JavaScript 服务器端环境：Jaxer、Node.js 和 Narwhal。

下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序：

var sys = require("sys");
    sys.puts("Hello World!");

5、HTML5 drag & drop

HTML5 让网页上的拖放变得非常简单，我们只需要简单的定义 draggable=”true” 属性即可，如下所示：


      A
      B
      C

有了这些 draggable=true 的元素，我们只需要编写一些简单的 JavaScript 代码来处理拖放，这里不再详细描述处理过程。

提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：

    [draggable] {
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }

6、Forms, the HTML5 way

HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）。

下面代码显示了一些新的表单元素：


        Slider
          

        Numeric spinner
          

        Date picker
          

        Color picker
          

        Text field with placeholder
          

        Url field
          

        Email field

7、CSS animations

很多现在的浏览器都支持 CSS 动画，是的，CSS 已经允许你创建一些简单的动画，而无需 JavaScript 的支持。

下面代码显示如何让背景色改变：

    #logo {
        margin: 15px 15px 0 15px;
        background: red;
        float: left;  

        /* Firefox 4+ */
        -moz-animation-name: colour-change;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
        -moz-animation-duration: 30s;  

        /* Webkit */
        -webkit-animation-name: colour-change;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 30s;
    }  

    @-moz-keyframes colour-change {
        0% {
            background: red;
        }
        33% {
            background: green;
        }
        66% {
            background: blue;
        }
    }  

    @-webkit-keyframes colour-change {
        0% {
            background: red;
        }
        33% {
            background: green;
        }
        66% {
            background: blue;
        }
    }

Feed enhanced by Better Feed from Ozh

如何写出高质量的Javascript代码

seasun — Tue, 17 May 2011 12:24:37 +0000

优秀的Stoyan Stefanov在他的新书中(《Javascript Patterns》)介绍了很多编写高质量代码的技巧，比如避免使用全局变量，使用单一的var关键字，循环式预存长度等等。

这篇文章不仅仅从代码本身来考虑如何优化编码，也从代码的设计阶段来考虑，包括书写API文档，同事的review，使用JSLint。这些习惯都能帮助你编写更加高质量的、更易于理解的、可维护的代码(让你的代码在多年之后仍使你引以为傲)。

编写可维护的代码
软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后，随着时间的增长，维护的成本愈发的高。当你一发现BUG的时候，就立即去修复，这时候你的代码还是热乎的，你也不需要回忆，因为就是刚刚写好的。但是当你做了其他任务，几乎完全忘记了这份代码，这时候就需要：

重新学习和理解问题
理解代码是如何解决问题的
另外一个问题是，在大项目或者大公司里面，经常是解决BUG的人不是产生BUG的人，而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题，无论这个代码是你自己以前写的还是团队中的其他成员写的，因为我们都想去搞搞新的有意思的东西，而不是去维护那些个陈旧的代码。

还有一个开发中的普遍问题就是，往往读代码的时间比写代码的时间还要多。有时候你钻研一个问题，可以花整整一个下午的时间来考虑代码的编写。这个代码当时是可以工作的，但是随着开发的进行，其他东西发生了很大的变化，这时候也就需要你自己来重新审查修改编写代码。比如：

还有BUG没有解决
添加了新的功能
程序需要在新的环境中运行(比如一个新上市的浏览器)
代码有问题
代码需要重写因为修改了架构甚至要使用另一个语言
因为这些原因，也许你当时一个下午写好的代码，后面需要花费几周的时间来阅读。所以编写可维护的代码对于软件的成功至关重要。

可维护的代码包括：

可读性
连续性
预见性
看起来是一个人写的
有文档
最少化全局变量
Javascript使用函数来约定作用域。一个在函数内部声明的变量在外部是不可见的。所以，全局变量也就是声明在任何函数之外的或者没有被声明的变量。

Javascript中，在任何函数之外有个可访问的全局对象，每一个你创建的全局变量都是这个对象的一个属性。在浏览器中，为了方便，通常用 window来指代这个全局变量。下面的代码就是说明如何创建一个全局变量：

myglobal = “hello”; // antipattern
console.log(myglobal); // “hello”
console.log(window.myglobal); // “hello”
console.log(window["myglobal"]); // “hello”
console.log(this.myglobal); // “hello
全局变量的问题
全局变量的问题在于，他在你的所有代码或者一个页面中都共享。他们在同一个命名空间下面，这通常会造成变量名冲突-两个同名的变量，但是确实不同的用处。

通常在一些页面中需要引入一些其他人的代码，比如：

第三方的JS库
广告伙伴的脚本
第三方的用户行为分析或者统计脚本
不同的组件、按钮等等
加入其中一个第三方组件定义了一个全局变量：result。然后在你的程序中，也定义了一个全局变量result。最后的这个result会覆盖点之前的result，这样第三方的脚本就会停止工作。

所以，为了对其他的脚本友好，在一个页面中使用越少的全局变量越好。在后面会有一些方法来告诉你如何减少全局变量，比如使用命名空间，或者自执行的匿名函数，但是最好的避免全局变量的方法就是使用var关键字来声明变量。
因为javascript的两个特性，创建一个全局变量非常的简单。第一，你可以使用一个甚至没有声明的变量，第二，在 javascript中，所有未声明的变量都会成为全局对象的一个属性(就像一个声明了的全局变量一样)。看看这个例子：

function sum(x,y){
result = x + y;
return result;
}
在这个代码中，result在没有被声明的情况下就被使用了，这个代码也能很好的工作，但是在调用了这个函数之后，就会多一个名为result的全局变量，这是所有问题的根源了。

解决这个问题的办法就是使用var：

function sum(x,y){
var result = x + y;
return result;
}
两外一个不好的习惯就是在声明变量的时候使用链式的方法来赋值，这时候，a是局部变量，但是b就成为了全局变量。

function foo(){
var a=b=0;
….
}
这是因为，b = 0这个表达式先执行，执行的时候b并没有被声明，所以b就成为了全局变量，然后返回这个表达式的值0，给声明了的变量a，换句话说，就好像你输入的是：

var a = (b=0);
如果你已经声明变量，那么这种链式的赋值没有问题：

function foo(){
var a,b;
…
}
另外一个避免使用全局变量的原因是考虑到程序的可移植性。如果你想让你的代码在不同的环境中都可以工作，那么使用全局变量就很可能会与新的系统中的全局变量冲突(或许在之前的系统中没有问题)。

忘记var的影响
使用var声明的全局变量和没有使用var生成的全局变量还有一个区别在于删除：

使用var声明创建的全局变量不能被删除
没有使用var声明的全局变量可以被删除
这说明没有使用var声明生成的全局变量不是真正的变量，他们只是全局对象的属性。属性可以通过delete删除，但是变量不行：

// define three globals
var global_var = 1;
global_novar = 2; // antipattern
(function () {
global_fromfunc = 3; // antipattern
}());

// attempt to delete
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true

// test the deletion
typeof global_var; // “number”
typeof global_novar; // “undefined”
typeof global_fromfunc; // “undefined”
在 ES5的严格模式下，给一个为声明的变量赋值会报错。

读取全局对象
在浏览器中，你可以通过window变量来读取全局对象(除非你在函数内部重新定义了window对象)。但在有的环境中，可能不叫window，那么你可以使用下面的代码来获取全局对象：

var global = (function(){
return this;
})();
这样可以获取到全局对象的原因是在function的内部，this指向全局对象。但是这在ES5的严格模式下会不起作用，你需要适配一些其他模式。当你开发自己的库的时候，你可以把你的代码封装在一个立即函数中，然后将this作为一个参数传进来。

单个var模式
在你的代码的顶部只是用一个var关键字，会有以下的好处：

对于所有需要的变量，在一个地方就可以全部看到
避免使用一个未定义的变量
帮助你记忆声明的变量，减少全局变量
更精简的代码
书写很简单：

function func() {
var a = 1,
b = 2,
sum = a + b,
myobject = {},
i,
j;
// function body…
}
通过一个var和逗号来声明多个变量。在声明的时候给变量赋默认值也是不错的做法，可以避免一些逻辑错误，提高代码的可读性。而后你阅读的代码的时候也可以根据变量的默认值来方便的猜测变量的用途。

你也可以在声明变量的时候做一些实际的工作，比如sum = a + b;另外，在操作DOM元素的时候，你也可以把DOM元素的引用保存在一个变量中：

function updateElement() {
var el = document.getElementById(“result”),
style = el.style;
// do something with el and style…
}
滥用了的var
JavaScript允许你在函数内部有多个var语句，但是却都表现的如同在函数的顶部声明一样。这个特性在你使用一个变量然后在后面又声明了这个变量时会导致一些奇怪的逻辑问题。对于 JavaScript来说，只要变量在同一个作用域，那么就认为是声明了的，就算是在var语句之前使用也一样。看看这个例子：

myname = “global”; // global variable
function func() {
alert(myname); // “undefined”
var myname = “local”;
alert(myname); // “local”
}
func();
在这个例子中，或许你期望第一次会弹出global，第二次弹出local。因为第一次的时候没有还没有使用var声明myname，这是应该是全局变量的myname，第二次声明了，然后alert之后应该是 local的值。而事实上不是这样的，只要你在函数中出现了var myname，那么js就认为你在这个函数中声明了这个变量，但是在读取这个变量的值的时候，因为var语句还没有执行，所以是undefined，很奇怪的逻辑吧。上面的代码相当于：

myname = “global”; // global variable
function func() {
var myname; // same as -> var myname = undefined;
alert(myname); // “undefined”
myname = “local”;
alert(myname); // “local”
}
func();
我们来解释一下这个现象，在代码的解析中，分两个步骤，第一步先处理变量函数的声明，这一步处理整个代码的上下文。第二步就是代码的运行时，创建函数表达式以及未定义的变量。实际上，我们只是假设了这个概念，这并不在ECMAScript的规范中，但是这个行为常常就是这样解释的。

for循环
在for循环中你会去迭代一些数组元素或者一些HTML元素。for循环常常如此：

for (var i = 0; i < myarray.length; i++) {
// do something with myarray[i]
}
这样写的问题在于，每一次迭代的时候都会计算数组的长度，尤其在这个参数不是一个数组而是一组HTML元素的时候会降低你的程序的性能。

HTML元素的集合在页面上，这样每次都会去再页面上查找相应的元素，这是非常耗时的。所以对于for循环，你需要预先保存数组的长度，这样写：

for (var i = 0, max = myarray.length; i < max; i++) {
// do something with myarray[i]
}
这样缓存了参数的长度，在每次迭代的时候就不用再去查找计算了。

在查找HTML元素集合的时候，缓存参数长度可以带来可观的性能提升，Safari下面提高两倍的速度，在IE7下面提高190倍的速度。

需要注意的是，当你需要操作修改DOM元素的数量的时候，你肯定希望这个值是随时更新的而不是一个常量。

使用下面的单一var模式，你也可以把var提到循环之外：

function looper() {
var i = 0,
max,
myarray = [];
// …
for (i = 0, max = myarray.length; i < max; i++) {
// do something with myarray[i]
}
}
这个模式可以增强整个代码的连续性，但是不好的一点是当你重构代码的时候复制粘贴就没那么容易了。例如：如果你想在其他函数中也使用这个循环，那你需要确定在新的函数中处理好了i和max(或许还需要删掉这个)。

这个函数还有两个点可以优化的：

可以少一个变量(不需要max)
递减到0，一个数字与0比较比这个数字与另外一个数字比较更快
所以就可以写为：

var i, myarray = [];
for (i = myarray.length; i–;) {
// do something with myarray[i]
}
针对第二点：

var myarray = [],
i = myarray.length;
while (i–) {
// do something with myarray[i]
}
这是两个比较微小的点的优化。另外，JSLint可能对于i-会有意见。

for-in循环
for-in循环用来迭代非数组的对象。使用for-in循环通常也成为枚举。

从技术上来说，你也可以用for-in来循环数组，因为数组也是对象，但是不推荐。如果数组有一些自定义的扩展函数，那么就会出错。另外，对象属性的顺序在for-in循环中也是不确定的。所以最好还是用普通的循环来循环数组用for-in来循环对象。

在循环对象的过程中，使用hasOwnProperty()方法来检验是对象本身的属性还是原型链上的属性很重要。

看看下面的这个例子。

// the object
var man = {
hands: 2,
legs: 2,
heads: 1
};

// somewhere else in the code
// a method was added to all objects
if (typeof Object.prototype.clone === “undefined”) {
Object.prototype.clone = function () {};
}
在这个例子中，我们有一个简单的称作man的对象字面量。在其他man定义之前或之后的地方，对象原型有一个很有用的clone()方法。因为原型链的原因，所有的对象都自动获得了这个方法。为了在枚举man对象的时候出现clone方法，你需要使用hasOwnProperty方法来区别。如果没有区别来自原型链的方法，那么就会有一些意想不到的事情发生：

// 1.
// for-in loop
for (var i in man) {
if (man.hasOwnProperty(i)) { // filter
console.log(i, “:”, man[i]);
}
}
/* result in the console
hands : 2
legs : 2
heads : 1
*/
// 2.
// antipattern:
// for-in loop without checking hasOwnProperty()
for (var i in man) {
console.log(i, “:”, man[i]);
}
/*
result in the console
hands : 2
legs : 2
heads : 1
clone: function()
*/
另外一种使用方法如下：

for (var i in man) {
if (Object.prototype.hasOwnProperty.call(man, i)) { // filter
console.log(i, “:”, man[i]);
}
}
这样写的好处是可以防止man重新定义了 hasOwnProperty方法导致的冲突。如果不想写这么长的一串，你也可以这样：

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
if (hasOwn.call(man, i)) { // filter
console.log(i, “:”, man[i]);
}
}
严格意义上讲，不适用hasOwnProperty也不是什么错误。根据任务的难度和你对代码的自信程度，你也可以不用这个直接循环。但是当你不确定的时候，最好还是使用这个方法检测一下。

另外一种格式上的改变(不会通过jsLint的检查)，去掉for的大括号，然后把if放在同一行。这样做的好处可以让循环体更加突出，缩进也就少一些：

// Warning: doesn’t pass JSLint
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // filter
console.log(i, “:”, man[i]);
}
不要扩展内建的原型
扩展原型的构造函数，可以提供一些很强大的功能，但是有时候他太强大了。

有时候你会去扩展Object(),Array(),Fucntion()的原型方法，这样会导致可维护性的问题，因为这会让你的代码的移植性变差。其他的开发人员使用你的代码的时候，可能只需要原生的方法，并不需要额外的功能。

另外，你添加进去的方法，如果在循环的时候没有使用hasOwnProperty方法就会被遍历出来，这会让人很迷惑。

所以，最好还是不要扩展基本的对象。除非是下面的情况：

你确定在将来根据ECMAScript规范，浏览器会添加相应的原型方法，那么是可以的，你只不过是提前实现了这个功能。
你确定的你要实现的方法不存在-或许有时候在代码的其他的地方实现了，或者有的浏览器支持，这都是不行的。
有非常清晰的文档，并且与团队成员沟通过
如果在这些情况之下，那么你就可以添加，最好是下面这种形式：

if (typeof Object.protoype.myMethod !== “function”) {
Object.protoype.myMethod = function () {
// implementation…
};
}
switch模式
按照下面的风格写switch的话，可以提高你的代码可读性和健壮性：

var inspect_me = 0,
result = ”;
switch (inspect_me) {
case 0:
result = “zero”;
break;
case 1:
result = “one”;
break;
default:
result = “unknown”;
}
需要注意下面几个方面：

将case和switch对齐。
case的内容缩进
每一个case之后都有一个清晰的break
避免顺序往下执行 case，非要如此的话，文档一定要写清楚
最后使用default，保证在没有命中case的情况下也有反馈
避免隐藏的类型转换
Javascript 在你比较两个变量的时候会进行类型的转换，这就是为什么 false == 0或者”” == 0会返回true。

为了避免这种隐藏的类型转换带来的迷惑，最好使用===或者!==操作符来比较：

var zero = 0;
if (zero === false) {
// not executing because zero is 0, not false
}

// antipattern
if (zero == false) {
// this block is executed…
}
还有另外一种流派持这样的观点：当==够用时使用=== 就是多余的。比如，当你使用typeof的时候你知道会返回string，所以没必要使用严格的检验。然而，JSLint要求严格检验；他最大程度使代码在阅读的时候减少歧义，(“这个==是故意呢还是疏漏？”)。

避免使用eval()
如果你在你的代码中使用eval()，那么要记住”eval() is evil”。这个方法会将传入的字符串当做js代码来执行。如果代码是在运行前就确定的，那么没有必要使用eval()。如果代码是在运行时动态确定的，那么也有其他更安全的办法。例如使用方括号形式访问元素的属性：

// antipattern
var property = “name”;
alert(eval(“obj.” + property));

// preferred
var property = “name”;
alert(obj[property]);
使用eval()还有安全问题，比如你运行网络上的一段代码，而这段代码又被别人篡改了。在处理Ajax请求返回的JSON数据的时候，最好还是使用浏览器内建的处理方法，如果对于低端的浏览器不支持的，可以从JSON.org上下载对应的处理库。

另外还要记住使用setTimeout、setInterval以及Function的构造函数的是，传入的字符串的参数，js的处理方法跟 eval()类似，所以也要注意。因为，js会把你传入的字符串解析执行：

// antipatterns
setTimeout(“myFunc()”, 1000);
setTimeout(“myFunc(1, 2, 3)”, 1000);

// preferred
setTimeout(myFunc, 1000);
setTimeout(function () {
myFunc(1, 2, 3);
}, 1000);
使用Function的构造函数，跟eval()差不多，也要注意。这是个非常有用的功能，但是常常被错用。如果你必须使用eval()，那么可以考虑new一个Function来替代。另外的一个好处就是，使用Function的构造函数，函数的作用域在本方法内，这样你使用var声明的变量就不会变成全局的。另外一个防止eval()生成全局变量的办法就是使用匿名函数。

看看下面这个例子，只有un变量最终是全局的：

console.log(typeof un); // “undefined”
console.log(typeof deux); // “undefined”
console.log(typeof trois); // “undefined”

var jsstring = “var un = 1; console.log(un);”;
eval(jsstring); // logs “1″

jsstring = “var deux = 2; console.log(deux);”;
new Function(jsstring)(); // logs “2″

jsstring = “var trois = 3; console.log(trois);”;
(function () {
eval(jsstring);
}()); // logs “3″

console.log(typeof un); // number
console.log(typeof deux); // undefined
console.log(typeof trois); // undefined
eval() 和Function构造函数的另一个区别就是eval()会影响到作用域，而Function则相当于一个沙盒。例如：

(function () {
var local = 1;
eval(“local = 3; console.log(local)”); // logs 3
console.log(local); // logs 3
}());

(function () {
var local = 1;
Function(“console.log(typeof local);”)(); // logs undefined
}());
使用parseInt()转换处理数字
使用parseInt()你可以将字符串转为数字。这个方法支持第二个表示进制的参数，常常被忽略。问题常常在处理一段以0开始的字符串的时候。在ECMAS3标准中，以0开始表示八进制，但是在ES5中又改了，所以为了避免麻烦，最好还是标明第二个参数。

var month = “06″,
year = “09″;
month = parseInt(month, 10);
year = parseInt(year, 10);
在这个例子中，如果你使用parseInt(year)，就会返回0，因为09被认为是8进制数字，然而9是非法的八进制字符，所以返回0。

其他的可以把字符串转为数字的方法有：

+”08″ // result is 8
Number(“08″) // 8
这些通常都比parseInt()快一些，因为 parseInt并不只是简单的转换。但是如果你的输入是”08 hello”这样的，那么parseInt()也会返回8，但是其他的方法就只能返回NaN。

编码规范
编码的时候遵循一定的规范，可以让你的代码增强可移植性，并且更加便于阅读和理解。加入团队的新人，在阅读了代码规范之后，可以更加快速的溶入团队，并理解其他人员开发的代码。

在一些讨论会议上，规范往往都是争论的焦点(比如缩进的形式)。所以如果你打算为你团队的编码规范提一些建议，那就准备好一场激烈的辩论和反对意见。要记住，建立和实施规范是非常重要的。

缩进
代码如果没有缩进，那基本上没法阅读了。比这更糟的是不规范的缩进，看着好像缩进了，但是乱七八糟摸不着头脑。所以缩进的使用必须规范。

有些开发人员喜欢使用tab键来缩进，因为在每一个编辑器里面都可以自己设置想要的tab值。有的人喜欢四个空格。如果团队遵循统一的规范，这也不是什么问题。比如本文就是四个空格，这也是JSLint推荐的。

那么什么该缩进呢？很简单，大括号。这样就是说包括函数体，循环，ifs，switch，以及对象字面量的属性。看看这个例子：

假设你的for循环只有一句。你可以不用大括号，也不会有什么错误。

// bad practice
for (var i = 0; i < 10; i += 1)
alert(i);
但是假如你以后要在这个循环里面添加其他东西呢？

// bad practice
for (var i = 0; i < 10; i += 1)
alert(i);
alert(i + ” is ” + (i % 2 ? “odd” : “even”));
这时候，虽然第二个alert有缩进，但他还是在循环之外的。所以，无论何时，都应该是用大括号。if语句一样：

// bad
if (true)
alert(1);
else
alert(2);

// better
if (true) {
alert(1);
} else {
alert(2);
}
大括号位置
开发人员也经常争论大括号的位置，放在同一行还是下一行呢？

在具体的例子中，这是个见仁见智的问题。但也有例外，假如程序根据不同的位置做不同的解析呢？这是因为插入分号机制，js对此并不挑剔，他会在你没有添加分号的行之后帮你添加。这在函数返回一个对象字面量然后大括号写在下一行的时候出问题：

// warning: unexpected return value
function func() {
return
// 下面的读取不到
{
name : “Batman”
}
}
如果你想让这个函数返回一个有name属性的对象字面量，这个函数是做不到的，因为插入的分号，返回的应该是一个undefied值。

所以，最后的结论是，必须使用大括号，并且写在同一行。

function func() {
return {
name : “Batman”
};
}
关于分号：跟大括号一样，必须写。这不只是推行严格的写程序的规范，更是在必要的时候解决一些不清楚的地方，比如前面的例子。

空格
正确的使用空格也可以增加程序的可读性和连贯性。写句子的时候你会在逗号和句号之后有一些停顿。在js中可以模仿这样的逻辑。

应该使用空格地方有：

循环中的分号之后
循环中的变量初始化for (var i = 0, max = 10; i < max; i += 1) {…}
数组中的逗号分隔符之后var a = [1, 2, 3];
对象字面量中的逗号var o = {a: 1, b: 2}
函数参数间myFunc(a, b, c)
在函数声明时候的大括号前面function myFunc() {}
匿名函数var myFunc = function () {};
另外一些使用空格比较好的地方就是在那些操作符的两边，比如+, -, *, =, <, >, <=, >=, ===, !==, &&, ||, +=,等等。

// generous and consistent spacing
// makes the code easier to read
// allowing it to “breathe”
var d = 0,
a = b + 1;
if (a && b && c) {
d = a % c;
a += d;
}

// antipattern
// missing or inconsistent spaces
// make the code confusing
var d = 0,
a = b + 1;
if (a && b && c) {
d = a % c;
a += d;
}
最后一个关于空格要注意的，大括号前面的空格。最好使用空格：

在函数定义，id-else，case，循环以及对象字面量的大括号前面使用空格
在大括号}与else、while之间使用空格
反对增加空格的一个说法是增加文件体积，但是在压缩之后并不存在这个问题。提高代码可读性经常被忽视的一个方面就是垂直的空格，你可以使用空行来分开代码，就好像写文章时候的段落一样。

命名规范
可以提高代码移植性和可维护性的一个方面是命名规范。也就是说，在取变量名的时候总是采取一贯的做法。

无论采用什么样的命名规范，其实都不是很重要，重要的是确定下来这个规范，然后遵守它。

构造函数首字母大写
javascript中没有类，但是可以使用new来达到同样的目的。

因为构造函数也是函数，如果能从名字上就能区别它是构造函数还是普通函数，对于开发者是非常有用的。所以将构造函数的首字母大写，普通函数的首字母小写作为提示。这样一眼就能区别。

单词的分隔
当你的变量名或者函数名是由好几个单词构成的时候，如果能顺利区分变量名由那几个单词构成，也是非常不错的体验。这种命名规范成为驼峰式。所谓驼峰式就是以小写字母开始，后面的每个单词第一个字母大写。

对于构造函数第一个字母大写，MyConstructor()，对于普通的函数，就采用驼峰式myFunction(), calculateArea()。

那么变量怎么办呢，有的人使用驼峰式，但是更好的办法是使用下划线来区分。first_name,favorite_bands, 以及 old_company_name。这也可以让你一眼就能区分函数和变量。

其他命名规范
有时候，开发人员也会使用命名规范来替代和弥补一些语言的特性。

例如，在javascript中，并没有提供定义常量的办法(虽然有Number.MAX_VALUE)，所以开发人员使用全大写的名称来表示不可更改的常量。var PI = 3.14, MAX_WIDTH = 800。

另外一种规范是使用全局变量名的首字母。这样做可以强化开发者使全局变量最少，并且容易辨认。

另外一种规范是在函数中模拟私有成员。虽然可以在javascript中实现私有变量，但是开发人员为了更加容易区别，所以给他加一个下划线的前缀。例如：

var person = {
getName: function () {
return this._getFirst() + ‘ ‘ + this._getLast();
},

_getFirst: function () {
// …
},
_getLast: function () {
// …
}
};
在这个例子中，getName是一个公有函数，是API的一部分，_getFirst，_getLast本意是私有的。虽然仍然是公有函数，但hi加上了这个前缀，表示在以后的版本中不保证能运行，所以不应该被直接使用。注意在JSLint中不推荐这样做，除非你设置nomen选项为false。

还有其他几种表示私有成员的规范：

在末尾使用下划线，比如name_以及getElements_
使用一个下划线表示保护成员_protected，两个下划线表示私有成员__private
在firefox中，有些不是语言原生的变量，以两个下划线开始，两个下划线结束__proto__以及 __parent__
写注释
必须给你的代码写注释，就算它看起来不会被别人接手。有时候，你研究完一个问题，然后你看着代码觉得那是显而易见的，但是过一两周之后回头再看，你也会摸不着头脑的。

当然，也不能过分的注释：每个变量每一行代码都注释。但是通常都需要对函数的功能，参数，返回值写文档，以及一些其他的复杂的逻辑和算法。想想，你的代码的阅读者，只需要读注释就能大体上了解你的代码在做什么需要什么，这比直接读代码理解要快的多。当你有五六行的代码是做一个具体的任务，那么阅读者就可以通过一行代码了解你的目的，然后跳过这些代码。关于注释，没有硬性的比例说是多少代码需要多少注释。有时候，有些代码(比如正则表达式)注释的内容肯定比代码本身多。

写注释是必须遵守的规范，而且要保持注释的更新，一个过时的注释带给人的迷惑还不如不写注释。(译文)

Feed enhanced by Better Feed from Ozh

Web开发人员应当知道的15个开源项目

seasun — Thu, 17 Mar 2011 16:07:00 +0000

如今，构建网站和开发Web应用程序已经不仅要求开发人员是一名优秀的程序员，更需要聪明的程序员。这也就是说，在可能的情况下，重复使用已有的代码和应用程序，而不是自己重头开始。开源由来已久，并且很多网站的构建也使用了开源。开发人员都知道Linux、Apache、MySQL及 PHP （LAMP）。但是除那些之外的其他开源项目呢？作为一名Web开发人员，你可以借助诸多可用的项目，以节省开发时间，或提高程序性能。

下面让我们看一下哪些开源项目可供大家免费使用。

可供使用的新型数据库

传统上讲，你可能习惯使用MySQL。尽管MySQL是一个非常棒的数据库，但诸多试图解决MySQL存在的问题的新型数据库已经问世。

1. MongoDB

MongoDB就是的“非关系型”数据库之一。它扩展性强、性能高。

2. Apache Cassandra

与MongoDB相似，Apache Cassandra也是一种“非关系型”数据库，它亦扩展性强、性能高。并且能够很好地处理庞大而活跃的数据集。（编注：Facebook用 Cassandra来做邮箱搜索。）

更多

根据需要，你还有更多的选择。请参阅维基百科的这个列表。

缓存数据

因为需要频繁使用一些数据，所以相比每次去数据库中查询，把这些数据存放在内存中更加合理。这能够大大提高Web应用程序的运行速度。

3. Memcached

Memcached是一种在内存中缓存小型数据块的简单但强大的解决方法。（编注： Facebook运行着成千上万的Memcached服务器，借以及时处理TB级的缓存数据。）

4. Redis

Redis的作用与Memcached相同，但包含更多的特性。例如，它也可以存储本应当永久性保存在磁盘上的数据。

加快网络请求的速度

大多数网站使用Apache的网络服务器来提供服务。它能够很好地服务于大多数网站，但是一旦网站的访问量增大，就需要做进一步优化。

5. Nginx

Nginx是一种与Apache非常相像的网络服务器，但它的速度相当快。作为负载平衡器，它常用于处理静态内容，如图像文件。

6. Varnish

Varnish是位于常规网络服务器之前的高速缓存器。它将所有热门内容放入内存，直接对其处理，无须将所有内容都传给网络服务器。（编注： Facebook用Varnish 处理图片和用户照片，每天都要处理十亿级的请求。Facebook所用到的其他开源项目，请参阅《揭秘Facebook背后的那些软件》一文。）

轻松管理内容

如果你在构建一个允许用户添加及编辑内容的网站，那么你可能需要一个内容管理系统（CMS）。CMS能够帮助开发人员轻松地管理博客及网站，并且提供大量的能够扩展网站功能的插件。

7. WordPress

虽然WordPress是个博客平台，但它也能用于管理大大小小的网站。

8. Drupal

Drupal是一个可用于构建强扩展性、高灵活性网站的完整平台。

还有很多可用的内容管理系统。请参阅维基百科的这个大型列表。

交互式的网络UI

如今，你可以使用JavaScript和AJAX技术，开发一个类似桌面应用程序那样的以多种方式运行的网络应用。使用JavaScript框架，能够轻松地开发大型的网络应用程序。

9. JQuery

JQuery是一个带插件的框架，这些插件有主构建包含AJAX交互及动画的动态网站。

10. MooTools

MooTools就和jQuery一样，是一个使用JavaScript构建强大网络应用程序的框架。

如果你想尝试一下其他选择，请参考维基百科的这个列表。

其他比较炫的资源

当你开始开发一个复杂的网络应用程序时，很多软件、库及模型能够帮你解决难题，如果不参考这些资源，你可能会花费大量的时间。以下是两个入门的例子。

11. Node.js

Node.js是一个事件驱动的输入/输出框架，支持用JavaScript编写应用程序，并在V8 JavaScript引擎上运行。这是一种开发快速、可扩展网络程序的很棒的方式。

12. RabbitMQ

RabbitMQ是一种可靠的、可扩展的信息传送系统，它能够处理高吞吐量。如果需要在系统之间或应用程序之间交换数据，比起传统的解决方案或直接将数据存储在数据库中，信息传送系统的更能胜任这一工作。

使用框架来加快开发进程

不管你是使用PHP还是其他的编程语言，有很多不同的可用框架能够帮助你加速开发进程，并能够更加轻松地管理代码。

13. Symfony

Symfony是一个PHP框架，它包含很多能够加速开发复杂网络应用程序的组件及工具。同时它包含社区提供的1000多个插件。

14. Ruby on Rails

对Ruby语言而言，Ruby on Rails是最流行的可用框架。

15. Django

Django是一个Python网络框架，它用来帮助快速开发高性能、优秀的网络应用程序。

维基百科上有一份更完整的列表，这个列表包含不同语言的可用网络应用框架。

后话 – 合理利用时间

开发人员有必要花费时间不断了解哪些新软件是可用的，这样对轻松地解决复杂的任务大有裨益。

而且在项目开发之初，花费一些时间做计划和调查也是非常有必要的，因为这样可以明确即将面临的问题，并确定其最佳解决方案。

自己编程来解决每个问题的时代已经结束，如今更多的是灵活使用现有技术来解决问题。

不知正在看本文的Web开发人员，在上述这些开源项目中，你用到了哪些？欢迎你在评论中分享你的使用经验和心得。

Feed enhanced by Better Feed from Ozh

Firebug的Console的用法

seasun — Mon, 07 Feb 2011 15:57:40 +0000

Firebug对于Web开发人员来说，已经成为了不可或缺的工具，但是在我日常的工作中，常常感觉还没有能够深刻的挖掘出她的潜力，今天花了点时间仔细研究了Console和命令行的使用在提高工作效率方面的作用，
记下来和大家分享一下.

Firebug一共有Console,HTML,CSS,Script,DOM,NET六个Tab，今天着重说一下Console的用法。

其实我们对于Console应该非常熟悉，因为这里是Firebug给出各种信息的窗口，而这也正是Console的主要用途，日志记录(Logging)。
除此之外，Console还提供了通过命令行方式来调试Javascript的方法。下面就来学习一下Console的用法。

1、Firefox的日志记录(Logging in Firefox)。

通过Console的记录方法，我们可以不再使用烦人的alert或者document.write方法来进行调试。
Firebug提供了五种日志的类型：

console.log: 记录一行信息，无任何图标提示； console.debug:记录一行信息，带超链接，可以链接到语句调用的地方； console.error():向控制台中写入错误信息，带错误图标显示和高亮代码链接； console.info():向控制台中写入提示信息，带信息图标显示和高亮代码链接； console.warn():向控制台中写入警告信息，带警告图标显示和高亮代码链接；

consle打印字符串支持字符串替换，使用起来就像c里面的printf(“%s”,a),支持的类型包括：

%s string，字符串 %d,%i 整型 %f 浮点 %o 对象

如果使用%o的话，对象就会用绿色的超链接表示出来，单击后会将你带到DOM视图。

2、分组(Grouping)。

如果某一类的信息特别多时，分组就有利于逻辑的划分。
使用上很简单，参见代码。

function consoleGroup(){
var groupname = “Group 1″;
console.group(“Message group %s”, groupname);
console.log(“This is the 1 message in %s”, groupname);
console.log(“This is the 2 message in %s”, groupname);
console.log(“This is the 3 message in %s”, groupname);
console.groupEnd();

goupname = “Group 2″;
console.group(“Message group %s”, goupname);
console.log(“This is the 1 message in %s”, goupname);

var subgroupname = “Sub group 1″;
console.group(“Message group %s”,subgroupname);
console.log(“This is the 1 message in %s”, subgroupname);
console.log(“This is the 2 message in %s”, subgroupname);
console.log(“This is the 3 message in %s”, subgroupname);
console.groupEnd();

console.log(“This is the 2 message in %s”, goupname);
console.groupEnd();
}

3、console.dir和console.dirxml

console.dir可以将一个对象的所有方法和属性打印出来，这个方法无疑是非常有用的，我们不再需要object.toString这样的方法支持了，只要有firebug，查看对象也变得很轻松同时，我们也可以将页面中的元素作为一个对象打印出来，但是你要小心，因为这将输出众多的信息，可能你会迷失在繁杂的信息中而找不到自己需要的条目。我们可以通过分组将这些大量的信息放入一个分组中，这样可以在逻辑上更清楚一些。

function consoleDir(){
function Car(){
this.Model = “Old Model”;
this.getManu = function(){
return “Toyota”;
}
}

var objCar = new Car();
console.dir(objCar);
console.dir(zoo);

var groupname = “Css Style”;
console.group(“The button Style”, groupname);
console.dir(document.getElementById(‘consoledir’).style, groupname);
console.groupEnd();
}

console.dirxml 打印出HTML元素的XML表示形式.

4、断言(console.assert())。

console.assert()可以用来判断一个表达式是否正确，如果错误，他就会打印错误信息在控制台窗口中。

5、追踪(console.trace())。

console.trace()是一个非常有趣的功能。我们先来看看官方的解释：打印Javascript执行时刻的堆栈追踪。

这个函数可以打印出程序执行时从起点到终点的路径信息。

比如如果我们想知道某个函数是何时和如何被执行的，我们将console.trace()放在这个函数中，我们就能够的看到这个函数被执行的路径。

这个函数在调试其他人的源代码时非常有用。

6、计时(Timing)。

console.time(timeName)可以用来计时，这个在我们需要知道代码执行效率的时候特别有用，就不用自己造轮子了。

function consoleTime(){
var timeName = “timer1″;
console.time(timeName);
var a = 0;
for(var i = 0; i < 100; i++){
for(var j = 0; j < 100; j++){
// console.log(‘Hello world’);
a = a + 1;
}
}

console.log(“a = %d”, a);
console.timeEnd(timeName);
}

7、Javascript分析器(Javascript Profiler)。

我们可以通过代码console.profile(‘profileName’)或者单击Profiler标签来进行Javascript代码执行的分析。这个功能有点类似于console.time()，可以帮助我们评估代码的表现，但是能够提供比console.time()更详细的信息。

有三种方法可以调用Javascript profiler。一种是在代码中写入分析脚本，一种是单击profile标签，最后还可以在命令行下输入命令来执行。

执行后，可以看到详细的输出结果，下面对各项进行一些说明：

Function Column：显示调用的函数名称； Call Column：显示调用次数； Percent Column：显示消耗的时间比； Own Time：显示函数内部语句执行的时间，不包括调用其他函数的时间； Time Column：显示函数从开始到结束的执行时间； Avg Column：平均时间。Avg = Own / Call; Min & Max Column：显示最小和最大时间； File Column：函数所在的文件；

8、其他的一些选项。

在Console Tab的最右侧有一个Options的选项，在这里可以自己定义需要显示的错误，其内容很好理解，这里就不多说了。有一点就是Firebug1.3以后，多了Show Chrome Errors、Show Chrome Message等几个选项，这几个选项还没有验证过其具体的作用，哪位知道的可以共享一下。

[参考资料]

Firebug Tutorial
http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i Firebug Tutorial

http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii

转载请注明:破洛洛

Feed enhanced by Better Feed from Ozh

iframe自适用高度代码

seasun — Mon, 07 Feb 2011 15:49:08 +0000

有不少wBox的用户反映iframe时候不可以自动撑开高度，今天在无意中看到了司徒正美的一片关于iframe自适用高度的js代码，感觉不错，转载来了。

var adjustIframe = function (id) {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}

HTML代码如下所示：

web" width="80%" frameborder="0" scrolling="no" allowTransparency="true" src="http://www.cnblogs.com/rubylouvre/archive/2009/09/15/1566722.html">

使用代码：

window.onload = function(){
     adjustIframe("js_sub_web");
}

推荐几篇关于Iframe的文章：

Feed enhanced by Better Feed from Ozh

跨域资源共享的10种方式

seasun — Mon, 07 Feb 2011 14:18:08 +0000

在客户端编程语言中，如javascript和ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？

同源策略

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.example.org)，那么我们就可以认为它们是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是同域，而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

受到同源策略的影响，跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步，目前在跨域请求的技巧上，有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种，一种是单向的数据请求，还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式，以下跨域实例的源代码可以从这里获得。

单向跨域

JSONP

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

flash URLLoader

flash有自己的一套安全策略，服务器可以通过crossdomain.xml文件来声明能被哪些域的SWF文件访问，SWF也可以通过API来确定自身能被哪些域的SWF加载。当跨域访问资源时，例如从域www.a.com请求域www.b.com上的数据，我们可以借助flash来发送HTTP请求。首先，修改域www.b.com上的crossdomain.xml(一般存放在根目录，如果没有需要手动创建) ，把www.a.com加入到白名单。其次，通过Flash URLLoader发送HTTP请求，最后，通过Flash API把响应结果传递给JavaScript。Flash URLLoader是一种很普遍的跨域解决方案，不过需要支持iOS的话，这个方案就无能为力了。

Access Control

Access Control是比较超越的跨域方式，目前只在很少的浏览器中得以支持，这些浏览器可以发送一个跨域的HTTP请求（Firefox, Google Chrome等通过XMLHTTPRequest实现，IE8下通过XDomainRequest实现），请求的响应必须包含一个Access- Control-Allow-Origin的HTTP响应头，该响应头声明了请求域的可访问权限。例如www.a.com对www.b.com下的 asset.php发送了一个跨域的HTTP请求，那么asset.php必须加入如下的响应头：

header("Access-Control-Allow-Origin: http://www.a.com");

window.name

window 对象的name属性是一个很特别的属性，当该window的location变化，然后重新加载，它的name属性可以依然保持不变。那么我们可以在页面 A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，iframe加载完成之后，页面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出window.name的值了。这个方式非常适合单向的数据请求，而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本。

server proxy

在数据提供方没有提供对JSONP协议或者 window.name协议的支持，也没有对其它域开放访问权限时，我们可以通过server proxy的方式来抓取数据。例如当www.a.com域下的页面需要请求www.b.com下的资源文件asset.txt时，直接发送一个指向 www.b.com/asset.txt的Ajax请求肯定是会被浏览器阻止。这时，我们在www.a.com下配一个代理，然后把Ajax请求绑定到这个代理路径下，例如www.a.com/proxy/, 然后这个代理发送HTTP请求访问www.b.com下的asset.txt，跨域的HTTP请求是在服务器端进行的，客户端并没有产生跨域的Ajax请求。这个跨域方式不需要和目标资源签订协议，带有侵略性，另外需要注意的是实践中应该对这个代理实施一定程度的保护，比如限制他人使用或者使用频率。

双向跨域

document.domain

通过修改document的domain属性，我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域，比如www.a.com和 sub.a.com是不同的域，这时，我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript方法。但是当我们把它们document的domain属性都修改为a.com，浏览器就会认为它们处于同一个域下，那么我们就可以互相调用对方的method来通信了。

FIM – Fragment Identitier Messaging

不同的域之间，JavaScript只能做很有限的访问和操作，其实我们利用这些有限的访问权限就可以达到跨域通信的目的了。FIM (Fragment Identitier Messaging)就是在这个大前提下被发明的。父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为frag，就是#号及其后面的字符，它一般用于浏览器锚点定位，Server端并不关心这部分，应该说HTTP请求过程中不会携带frag，所以这部分的修改不会产生HTTP请求，但是会产生浏览器历史记录。FIM的原理就是改变URL的frag部分来进行双向通信。每个window通过改变其他 window的location来发送消息，并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录，而且有些浏览器不支持onhashchange事件，需要轮询来获知URL的改变，最后，URL在浏览器下有长度限制，这个制约了每次传送的数据量。

Flash LocalConnection

页面上的双向通信也可以通过Flash来解决，Flash API中有LocalConnection这个类，该类允许两个SWF之间通过进程通信，这时SWF可以播放在独立的Flash Player或者AIR中，也可以嵌在HTML页面或者是PDF中。遵循这个通信原则，我们可以在不同域的HTML页面各自嵌套一个SWF来达到相互传递数据的目的了。SWF通过LocalConnection交换数据是很快的，但是每次的数据量有40kb的大小限制。用这种方式来跨域通信过于复杂，而且需要了2个SWF文件，实用性不强。

window.postMessage

window.postMessage是HTML5定义的一个很新的方法，这个方法可以很方便地跨window通信。由于它是一个很新的方法，所以在很旧和比较旧的浏览器中都无法使用。

Cross Frame

Cross Frame是FIM的一个变种，它借助了一个空白的iframe，不会产生多余的浏览器历史记录，也不需要轮询URL的改变，在可用性和性能上都做了很大的改观。它的基本原理大致是这样的，假设在域www.a.com上有页面A.html和一个空白代理页面proxyA.html, 另一个域www.b.com上有个页面B.html和一个空白代理页面proxyB.html，A.html需要向B.html中发送消息时，页面会创建一个隐藏的iframe, iframe的src指向proxyB.html并把message作为URL frag，由于B.html和proxyB.html是同域，所以在iframe加载完成之后，B.html可以获得iframe的URL，然后解析出 message，并移除该iframe。当B.html需要向A.html发送消息时，原理一样。Cross Frame是很好的双向通信方式，而且安全高效，但是它在Opera中无法使用，不过在Opera下面我们可以使用更简单的 window.postMessage来代替。

总结

跨域的方法很多，不同的应用场景我们都可以找到一个最合适的解决方案。比如单向的数据请求，我们应该优先选择JSONP或者window.name，双向通信我们采取Cross Frame，在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

Feed enhanced by Better Feed from Ozh

40个UI设计工具和资源

seasun — Mon, 07 Feb 2011 09:52:05 +0000

用户界面设计在持续的基础上不断成长和演变。要跟上时代，你需要关注趋势、新资源和正被实施和谈论的新技术。同时，你也要亲身尝试，并提出原创的见解和应用。下面列举的这些工具能帮你做到这些。尽情分享下面这些我找到的注释出的资源中你认为有用的部分。

看看这些其他人已经想出的对一般用户界面挑战的解决方案，它不仅能帮助你找到正确的现有解决方案，还能作为你提出新的和原创的东西的基础。

一个在线文字和图形目录是常见解决的UI设计问题的方案。使用非常宽松的分类，同时也让你用标签或颜色分类：

Pattern Tap

一个能找到平常被使用的设计模板精神的好资源。Pattern Tap将UI元素分类集合，同时也将个别项目以标签形式在新窗口打开：

Patternry

Patternry 将重点放在寻找常见UI问题的解决上，而不只是提出简单的建议：

Mephobox

是另一个能找到的提出常见设计模板启示的好资源。你能够以用户身份游览网站，或者查证基于个人设计元素的集合：

原型开发、模型构建和设计反馈工具

Lumzy

你在创建新的UI技术任何时候，在创建网站之前，你会需要创造出一个作为概念根据的原型或模型。当然，你也要测试这些新构想。

Lumzy是一个方便的UI界面模型构建和原型开发的小型在线工具。它能让你创建具有工作功能的原型，而不只是线框：

Mockingbird

另一个界面模型构建和原型开发工具，同时拥有在线团体合作开发工具：

UI Design Framework for Illustrator

一个为AI服务的用户界面元素和风格设置网站：

Android Asset Studio

一个为开发Android应用提供UI元素的网站：

Unique Mobile UI Design Elements

自由设置UI设计元素：

Android UI Elements Set

自由设置Android OS的UI元素：

OSX Leopard GUI Set

OSX Leopard的GUI元素：

ALL In One Web Elements Kit

提供你的网站的所需的一切PSD分层文件：

iPad GUI Set

提供你所需的任何iPad应用程序的主题的分层矢量PSD文件：

The Pencil Project

火狐的GUI原型构建插件：

Concept Feedback

发布你的设计和概念，并得到免费反馈的设计社区：

Landing Page Optimization

获得他人关于你目标页面5秒钟的真实印象反馈的网站：

框架

框架已经成为了几乎所有复杂的UI的主干了。这里的是极少数的框架，不像Moo tools和jquery那些你可能熟悉的工具。

DHTMLX

一个提供了大量的UI部件的javascript UI资料库和 jquery的替代品：

Dojo

另一个拥有强大API设置以及丰富UI控件的javascript工具包。

Echo 3

是一个不仅能让开发者创造组建驱动和事件驱动API和javascript客户端应用程序的UI工具包：

Midori

一个超轻量级Javascript框架，它集合了很多常用的UI技术。而且即使包括缩进语言，Midori也只有51K：

Scripty 2

另一个支持最新版Webkit游览器的css过渡和转换的框架。

ZK包括超过200个Ajax组件，一切准备就绪：

jQTouch

一个用于手机iPone应用开发的jQuery插件：

代码片段和脚本

为什么我们要白费力气呢？如何这里有一个存在的片段，而它正是你所需要的，你就可能在下面的这些网站中找到。

jQuery Labs

一个为你网站预制jQuery组件的庞大的资料库：

Snippet Library

一个由用户提交审查的各种程序语言的片段和代码教程的资料库：

The Javascript Source

一个常用javascript和Ajax片段的便捷的向导：

roScripts (beta)

可以被用户投票的脚本、片段和资源：

Snipplr

一个有许多先进脚本和jQuery技术的好资源：

Code Sucks

有关于Javascript片段如何工作的极其详细的评论的网站：

HTML Goodies

另一个有优秀的步骤记录文件的jQuery资源：

WebResources Depot

包括在它们的设计资源的大型目录中的是大量非常有用的脚本和片段：

Ajax Rain

出色的以分类和标签的形式表现的片段资源库，它能使你很容易找到你这在寻找的东西：

Open Source Scripts

提供截止于2004年的Javascript片段和代码：

Mini Ajax

非常优美程序片段的集合：

Webappers

大量的包括非常好的图片编辑片段集合的jQuery组件：

Javascript Kit

原创在线javascript片段资源库之一：

Webcodr.com

一些对你网站非常有用的程序片段：

HTML Assets

基础javascript片段的小集合：

其他杂项资源

这里有方便的并不适合下面任一类别的UI资源，但是我们仍旧感到是值得提及的：

Slidenote

一个简单的能使你创建滑动通知（sliding notification）的jQuery插件：

Editable Grid

只要几行简单代码，就能将html表格转换为可以用高级选项操作的组件：

Placehold.it

为你排版简易创建占位符的服务器：

Fillerati

一个独特的Lorem Ipsum的替代品。为你网站模型创建真实文字块，帮你从所能接收到的各种公共域文字中做出选择。

qTip2

一个qTip的提示窗口插件的jQuery升级。使得为你网站制作风格化提示窗口变得容易：

Feed enhanced by Better Feed from Ozh

HTML中的IE条件注释

seasun — Mon, 07 Feb 2011 09:28:25 +0000

IE条件注释是一种特殊的HTML注释，这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注释是：

而只有IE可读的IE条件注释是：

“非IE条件注释”：

 non-IE HTML Code

“非特定版本IE条件注释”（很少用到）：

Code for browsers that match the if condition

简而言之，除了“Windows上的IE”之外的所有浏览器都会认为条件注释只是一段普通的HTML注释。你不能在CSS代码中使用条件注释。IE 条件注释是很有用的对IE隐藏或者展现特定代码的方法，比起在CSS中用诡异的_/制造bug，利用IE条件注释来写CSS “hacks”是更合理的方法。通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的。

条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。

从语法上看这是相当合法的普通HTML注释。任何浏览器都会认为之间的部分是注释从而忽略它。但是IE也会看到其中[if IE]>，从而开始解释接下来的代码直到遇到

通过“比较操作符”可以更灵活地对IE版本进行控制，用法是在IE前面加上“比较操作符”。合法的操作符如下：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

示例:

/ 如果IE版本大于5.5 /
/ 如果IE版本小于等于6 /
/ 如果浏览器不是IE /

虽然看上去当你第一次使用条件注释的时候会更费时，但当你以后调试你的CSS的时候，就会发现非常方便。用条件注释你只需要写一遍HTML注释，而用bug你需要为每一条规则都写上又长又丑的代码，而且还经常是为了改变其他的hacks而写的hacks。除此之外条件注释对于不支持它的任何浏览器而言都是合法的HTML注释。以下为条件注释与CSS hacks的一些区别：

Hacks是基于浏览器的bug，而这些bug最终可能会被修复。
条件注释是基于IE特定代码，这种识别机制任何时候都不会被移除。
每一个浏览器都能看见你的hacks，或许下一个版本或者一个新的浏览器会在你的hacks代码上出错。
只有IE才能看到条件注释，通过额外的“IE文件”来影响页面，其他浏览器根本就不会下载它。
Hacks不能确保对哪些浏览器生效而对哪些不，用的hacks越多，代码越混乱。
条件注释利用版本匹配使得作者可以容易地对特定版本写代码。

参考资料：http://haslayout.net/condcom

Feed enhanced by Better Feed from Ozh

10个给力的jQuery图片插件

seasun — Sun, 06 Feb 2011 14:06:06 +0000

jQuery越来越流行，也就越来越多的开发者制作各种各样的jQuery插件。它们当中的一些非常的酷，例如之前介绍的“2010年最佳jQuery插件”和现在有介绍的10个给力的jQuery图片插件：

如果你也想让你的博客上的图片让人眼前一亮，不妨试试WDL博客推荐的10个jQuery图片插件。

Slides

Slides是一个灰常简单的幻灯片 jQuery插件。包括的功能有循环，自动播放，渐变和幻灯片过渡效果包括淡出淡入，图像预装载和自动生成分页等。

Face Detection

Face Detection，插件如其名，它检测照片中的人脸，就像照相机那样自动对焦。

AviaSlider

AviaSlider这个 jQuery 幻灯片插件最大的亮点在于它的过渡效果，神马过渡效果，自个儿去看不就知道了。

Fullscreenr

想自己的网站用一张大图作背景，而且长宽比例不变？而且必须在中间的位置，而不只是指图像的左上角部分？那么Fullscreenr插件做到了。

Slidy

jQuery Slidy 是一个可自动生成并可定制的幻灯片转换插件。

MobilyNotes

MobilyNotes是一个轻量级的jQuery插件（只有2KB），可以堆叠的形式显示你的图片集或者HTML内容集。

jQuery Easy Slides

Easy Slides是一个非常容易上手的幻灯片制作插件。它还有轻量级的优势，加上 Javascript和CSS才不超过2.1KB。

Booklet

想你的图片幻灯片转换效果像翻转一本书那样？Booklet这个 jQuery插件是你不二的选择。

MobilySelect

MobilySelect又一轻量型 jQuery插件（仅2KB）。可以实现两种图片分类选择特效，个人觉得这个插件很不错。

Pikachoose

Pikachoose是一个轻量级的jQuery插件，轻松实现图片集的幻灯片演示，还有图片导航和自动播放选项设置。

赶着去喝喜酒，草草翻译，质量欠佳，况且英文水平本来有限，望见谅。实在不行，请观摩原文或者直接去体验插件演示demo。（注：这是一篇预发布文章）

MobilySelect又一轻量型 jQuery插件（仅2KB）。可以实现两种图片分类选择特效，个人觉得这个插件很不错。

Feed enhanced by Better Feed from Ozh

2010年最佳jQuery插件

seasun — Sun, 06 Feb 2011 14:05:22 +0000

在2010年，JavaScript框架继续日渐普及，这使得大量的插件被开发出来。满目琳琅，难以选择心头之好。WDL的作者从大量的优秀jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best。

2010年最佳jQuery插件（排名不分先后）：

Nivo Slider

一个加载设置拥有9种过度效果的超级smooth slider，它还支持如链接图像和键盘导航等内容。

Quicksand

通过一个非常不错的洗牌动画实现选项内容重新排序，只需要指定源容器和替换源的目标collection 。新元素将会以奇特缩放+阿尔法效果出现，消失的元素(non-existant in destination collection)平滑地消失或重新排位，移动到它们的目标位置。

Spritely

Spritely 是一个由Artlogic开发的 jQuery插件，用于使用纯HTML和JavaScript创建动态物体和背景动画。

Lettering.js

Lettering.js是一个轻量经的、易于使用的 jQuery插件，可创造出极具个性的网页排版。

Colortip

Colortip可转换你的页面元素的标题属性为一系列色彩丰富的提示（当你的鼠标移动到不同的标题上会出现不同颜色的字体文本提示）。支持六种色彩主题，这样你可更加容易融合到你的个人网页中去。

Masonry

Masonry是一个 jQuery布局插件. 你可以将它看作CSS floats的另一面。浮动元素的排列是先水平后垂直，Masonry排列内容是根据一个网格先垂直后水平的。

gvChart

gvChart是一个使用Google Charts了的jQuery插件，可通过HTML table tag的数据实现交互可视化。它非常容易上手，此外它支持创建五种风格的图标。

Animated table sort

这是一个用于创建表格的jQuery插件，所创建的表格可以根据不同的列项目进行A-Z，升序排列，切换效果非常不错。

jQuery Image Scale Carousel

网站图片保持完整的纵横比比什么都重要。这个jQuery插件可以完美地在slider展示你所有的图片，而不需担心产生变形。 jQuery Image Scale Carousel插件自动改变你所有图片到适合大小，一切都是那么的简单。

YoxView

YoxView是一个免费的多媒体播放jQuery插件。它易于使用，功能丰富。你可以用它来展示各种媒体，如图像，视频，内嵌的内容，iframes，Flash等等。

Feed enhanced by Better Feed from Ozh

jQuery 1.5 正式版发布

seasun — Thu, 03 Feb 2011 09:23:58 +0000

jQuery 1.5正式版于1月31日如期发布！ jQuery是一个JavaScript库，它简化了HTML文档遍历，事件处理，动画和为网络快速发展的Ajax交互。变化包括一个重写的Ajax模块，划分 jQuery子类的能力，以及许多其他功能增强，修复各种内存泄漏，性能改进和加强跨浏览器的兼容。鼓励测试该版本的用户提供反馈和报告他们遇到的任何错误。 Right on schedule jQuery 1.5 is ready for consumption!
This release has been a long time coming and has been a real team effort. Please take this opportunity to thank members of the jQuery Team and the jQuery bug triage team for their help in getting this release out the door.

下载地址：
jQuery Minified (29kb Gzipped)
jQuery Regular (207kb)

Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js

关于jQuery 1.5

该版本修复了83个bug，解决了460个问题。

针对下列浏览器进行了测试：
Safari 5.0.3 / 4.0.5 / 3.2.3 / 3.1.2
Opera 11.01 / 11 / 10.63 / 10.54 / 10.10 / 9.64
IE 6 / 7 / 8
Firefox 4.0b9 / 3.6.13 / 3.5.11 / 3.0.19 / 2.0.0.20
Chrome 8.0.552.215 / 8.0.552.237 / 9.0.597.67 Beta / 10.0.642.2 Dev

jQuery 1.5 API文档：http://api.jquery.com/category/version/1.5/

重大改进

1. 重写了Ajax模块：

a) 提供了更高级的统一的API；

b) Ajax请求会返回一个封装不同浏览器XMLHttpRequest的jXHR对像，可以完成以前不可能完成的任务，比如：放弃JSONP请求，详见jQuery.ajax()文档；

c) 更好的扩展性，可以方便地扩展Ajax的发送与接收，管理Ajax请求，详见Extending Ajax文档。

2. 新增延缓对像(Deferred Objects)

a) 直接使用没有立即返回的返回值，比如异步Ajax请求的返回结果；

b) 附加多个事件处理器（这在以前是不可能的），示例代码：
// Assign handlers immediately after making the request,
// and remember the jxhr object for this request
var jxhr = $.ajax({ url: “example.php” })
.success(function() { alert(“success”); })
.error(function() { alert(“error”); })
.complete(function() { alert(“complete”); });

// perform other work here …

// Set another completion function for the request above
jxhr.complete(function(){ alert(“second complete”); });

了解更多内容，请阅读Deferred Object文档。

推荐教程：Using Deferreds in jQuery 1.5

3. jQuery替身——jQuery.sub()

可以方便地创建jQuery副本，不影响原有的jQuery对像，避免jQuery冲突。示例代码如下：

(function(){
var sub$ = jQuery.sub();

sub$.fn.myCustomMethod = function(){
return ‘just for me’;
};

sub$(document).ready(function() {
sub$(‘body’).myCustomMethod() // ‘just for me’
});
})();

typeof jQuery(‘body’).myCustomMethod // undefined

了解更多，请阅读jQuery.sub()文档。

4. 增强了遍历相邻节点的性能

增强的遍历方法：.children(), .prev(), .next()，究竟增强多少，请看下图：

5. jQuery开发团队构建系统的改进

现在jQuery的构建基于服务端JavaScript环境——NodeJS，以前用的是Java/Rhino。编译器用的是来自Google Closure Compiler的UglifyJS，编译后的js文件更小。

Feed enhanced by Better Feed from Ozh

关于网络爬虫的

seasun — Tue, 01 Feb 2011 02:42:56 +0000

由于搜索引擎的泛滥，网络爬虫如今已经成为全球互联网的一大公害。除了专门做搜索的Google，Yahoo，微软，百度以外，几乎每个大型门户网站都有自己的搜索引擎，搜狐，腾讯，网易。再加上十分流氓的社区搜索奇虎等等，国内大大小小叫得出来名字得就几十家，还有各种不知名的几千几万家，另外还有国外各种奇奇怪怪的搜索引擎。只要你做的网站是内容丰富的网站，就避免不了被几千几万个爬虫每天爬来爬去。

大的搜索引擎如Google的爬取网页十分智能，爬取频率和爬取压力都没有那么高，对网站资源消耗还比较少，最怕各种各样弱智的爬虫，对网页内容的分析能力很差，经常并发几十上百个请求循环重复抓取，对网站往往是毁灭性打击。

我随便举几个例子：网易有道搜索曾经在一个上午的时间就访问了JavaEye网站60多万次请求，把网站访问拖得很慢，被我们立刻封杀。还比方说雅虎爬虫的爬行也十分弱智，经常循环爬取，爬行频率非常高，也被我们封杀掉了。然而最可怕的还是奇虎的爬虫，他托管在河北廊坊机房的服务器上面的爬虫，经常并发上百个请求同时爬取，我有次解除了对该机房的封锁，几秒钟之内，JavaEye网站就彻底无法访问，观察web servr上面堵塞了几百个来自奇虎爬虫的请求。

除了这些叫得出来名字的爬虫之外，还有很多程序员自己写的山寨爬虫，特别是一些菜鸟程序员，完全没有编写爬虫的经验，写出来的爬虫破坏力极强。曾经有一次我在JavaEye的日志里面发现一个User-Agent是Java的爬虫一天之内爬行了将近100万次动态请求。毫无疑问是个利用JDK类库编写的简单爬网页程序，由于JavaEye网站内部链接构成了回环导致该程序陷入了爬行死循环，而程序没有相应的处理代码，导致网站资源被大量消耗。

对于一个原创内容丰富，URL结构合理易于爬取的网站来说，简直就是各种爬虫的盘中大餐，很多网站的访问流量构成当中，爬虫带来的流量要远远超过真实用户访问流量，甚至爬虫流量要高出真实流量一个数量级。即使像JavaEye这样一向严厉封杀爬虫的网站，只要稍微松懈一段时间，爬虫流量就能轻易超过真实访问流量的2倍以上。对于大型互联网网站来说，有足够的硬件资源来应付爬虫带来的庞大访问压力，也有足够的资源和能力去解决这个问题。但是对于中小型互联网网站来说，爬虫带来的就是毁灭性打击了。

JavaEye网站也一直被网络爬虫问题所困扰，并且不断采用一些新的手段对付网络爬虫，网站和爬虫之间的战争就像此消彼长的拉锯战一样。

一、野蛮型爬虫

在2006年的时候，JavaEye遭遇的网络爬虫基本上都是比较野蛮的爬虫，动不动上百个并发请求一起过来，网站立刻被拖慢或者干脆无法访问，例如奇虎的爬虫就是这样（百度的爬虫早期也是如此，现在已经斯文多了）。这种爬虫是很容易识别出来的，通过netstat信息查看，或者web server提供的并发连接信息，比方说lighttpd的mod_status就可以非常直观的观察到当前每个并发连接的状态，请求的地址和IP，以及连接时间。

对付这种野蛮的爬虫其实没有什么太好的办法，只有一种办法，就是直接封杀。然而爬虫往往并不分布在一台服务器上，而是很多台服务器上面，因此你封掉一个ip地址根本不解决问题，所以我们采取的办法就是直接封杀爬虫所在的C网段地址，例如：

iptables -A INPUT -i eth0 -j DROP -p tcp –dport 80 -s 84.80.46.0/24

除此之外还可以采取一些辅助的解决办法，比方说在web server上面限制每IP并发连接数量，如果超过一定的并发连接数量，就直接返回拒绝请求的页面。例如lighttpd可以这样配置：

$HTTP["url"] =~ “^/topics/download/” {
evasive.max-conns-per-ip = 2
}

限定每IP只能并发一个线程下载。

总的来说，这种蛮不讲理的爬虫相对比较稀少，碰到一个封杀一个C段地址基本可以解决此类爬虫。现在JavaEye已经很少遇到这种爬虫了。

这里要特别说明一点：有很多人提出一种极度脑残的观点，说我要惩罚这些爬虫。我专门在网页里面设计不消耗资源的静态循环链接页面，让爬虫掉进陷阱，死循环爬不出来。能出这种弱智点子的人一看就知道纸上谈兵。根本用不着你设置陷阱，弱智爬虫对正常网页自己就爬不出来，你这样做多此一举不说，而且会让真正的搜索引擎降低你的网页排名。

而且运行一个爬虫根本不消耗什么机器资源，我在自己的笔记本电脑上面跑个Java程序，发起上百个线程，就算死循环了，也消耗不了多少CPU，根本不消耗我什么。相反，真正宝贵的是你的服务器CPU资源和服务器带宽，谁消耗谁阿？做程序员最可怕的不是弱智，而是自己不知道自己弱智，总以为自己很明智。

二、爬虫的海量抓取和海量的各种小爬虫

有很多智能程度比较低的爬虫，比方说雅虎和网易有道的爬虫，它虽然并不会以很高的并发连接爬取你的网站，但是它会以较低的频率持续不间断爬取网站，一天下来至少爬取几十万页面，极大消耗了服务器资源，拖慢服务器的响应速度。而且由于它爬取的并发不高，一般不容易暴露自己，特别是雅虎的爬虫，分布很广，来自大约二十几个C段地址，狡兔n窟，你很难找全它所有的C段地址，因此通过简单的封杀IP地址段，对这种爬虫基本无效。

另外还有很多各种各样的小爬虫，特别是以国外的各式各样稀奇古怪的搜索引擎为主，它们都在尝试Google以外创新的搜索方式，每个爬虫每天爬取你几万的网页，几十个爬虫加起来每天就能消耗掉你上百万动态请求的资源。由于每个小爬虫单独的爬取量都很低，所以你很难把它从每天海量的访问IP地址当中把它准确的挖出来，因此也没有办法通过直接封杀IP的方式对付它们。

怎么解决这个问题呢？其实这些爬虫都有一个共同的特点，在爬取网页的时候，会声明自己的User-Agent信息。我们知道每个浏览器都有自己独一无二的User-Agent 信息，比较正规的爬虫，特别是来自国外的爬虫都比较规矩，会声明自己的User-Agent信息，因此我们就可以通过记录和分析User-Agent信息来挖掘和封杀这些爬虫。

首先我们需要记录每个请求的User-Agent信息，对于用rails开发的JavaEye网站来说这很简单，我们在 app/controllers/application.rb里面添加一个全局的before_filter，来记录每个请求的User-Agent信息：

logger.info “HTTP_USER_AGENT #{request.env["HTTP_USER_AGENT"]}”

这样就会把每个请求的User-Agent信息记录到production.log里面去。

然后我们统计每天的production.log，抽取User-Agent信息，找出访问量最大的那些User-Agent。但是这里要注意的是我们只关注那些爬虫的User-Agent信息，而不是真正浏览器User-Agent，所以我们还要排除掉浏览器User-Agent，最后我们就可以得到一个访问量最多的爬虫列表。要做到这一点仅仅需要一行shell：

这行shell命令从production.log里面抽取包含User-Agent的日志，然后排除真实浏览器的User-Agent，再统计访问量，然后按照访问量从大到小排序，最后挑选排名前100的记录到日志文件里面去。或者你也可以直接把输出内容发送到你的邮箱里面去。

最终的爬虫统计结果类似下面这样：

57335 HTTP_USER_AGENT Baiduspider+(+http://www.baidu.com/search/spider.htm)
56639 HTTP_USER_AGENT Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
42610 HTTP_USER_AGENT Mediapartners-Google
19131 HTTP_USER_AGENT msnbot/2.0b (+http://search.msn.com/msnbot.htm)
8980 HTTP_USER_AGENT Mozilla/5.0 (compatible;YoudaoFeedFetcher/1.0;http://www.youdao.com/help/reader/faq/topic006/;1 subscriber;)
8034 HTTP_USER_AGENT Sosoblogspider+(+http://help.soso.com/soso-blog-spider.htm)
7847 HTTP_USER_AGENT msnbot/1.1 (+http://search.msn.com/msnbot.htm)
4342 HTTP_USER_AGENT Mozilla/5.0 (compatible; Google Desktop)
3183 HTTP_USER_AGENT
3115 HTTP_USER_AGENT Mozilla/4.0
2900 HTTP_USER_AGENT WordPress/2.7
2096 HTTP_USER_AGENT Apple-PubSub/65.11
1891 HTTP_USER_AGENT Zhuaxia.com 1 Subscribers
1201 HTTP_USER_AGENT Apple-PubSub/65
1154 HTTP_USER_AGENT Mozilla/5.0 (compatible;YoudaoFeedFetcher/1.0;http://www.youdao.com/help/reader/faq/topic006/;2 subscribers;)
1059 HTTP_USER_AGENT FeedBurner/1.0 (http://www.FeedBurner.com)

从日志就可以直观的看出主要是Google，baidu，微软msn,网易有道和腾讯搜搜的爬虫，以及每个爬虫爬取的请求次数。通过这个简单的办法，你就可以有效的窥视每个爬虫的动向，如果哪个爬虫不老实，胆敢疯狂爬取的话，你就可以一眼把它挑出来。

要根据User-Agent信息来封杀爬虫是件很容易的事情，主流的Web Server都支持针对User-Agent信息的设置，JavaEye使用的是lighttpd，因此用以下的lighttpd配置来封杀爬虫：

$HTTP["useragent"] =~ “qihoobot|^Java|Commons-HttpClient|Wget|^PHP|Ruby|Python” {
url.rewrite = ( “^/(.*)” => “/crawler.html” )

Feed enhanced by Better Feed from Ozh

JavaScript 初学者应注意的七个细节

seasun — Fri, 21 Jan 2011 18:26:00 +0000

每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。

（1）简化代码

JavaScript定义对象和数组非常简单，我们想要创建一个对象，一般是这样写的：

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

下面的写法可以达到同样的效果：

var car = {
	colour:'red',
	wheels:4,
　　hubcaps:'spinning',
　　age:4
}

后面的写法要短得多，而且你不需要重复写对象名称。

另外对于数组同样有简洁的写法，过去我们声明数组是这样写的：

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4'
);

更简洁的写法是：

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4'
];

对于数组，还有关联数组这样一个特别的东西。你会发现很多代码是这样定义对象的：

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;

这太疯狂了，不要觉得困惑，“关联数组”只是对象的一个别名而已。

另外一个简化代码的方法是使用三元运算符，举个例子：

var direction;
if(x < 200){
  direction = 1;
} else {
  direction = -1;
}

我们可以使用如下的代码替换这种写法：

var direction = x < 200 ? 1 : -1;

（2）使用JSON作为数据格式

伟大的Douglas Crockford发明了JSON数据格式来存储数据，你可以使用原生的javascript方法来存储复杂的数据而不需要进行任何额外的转换，例如：

var band = {
  "name":"The Red Hot Chili Peppers",
  "members":[
    {
      "name":"Anthony Kiedis",
      "role":"lead vocals"
    },
    {
      "name":"Michael 'Flea' Balzary",
      "role":"bass guitar, trumpet, backing vocals"
    },
    {
      "name":"Chad Smith",
      "role":"drums,percussion"
    },
    {
      "name":"John Frusciante",
      "role":"Lead Guitar"
    }
  ],
  "year":"2009"
}

你可以使用在JavaScript中直接使用JSON，甚至作为API返回的一种格式，这就是所谓的JSON – P，在许多的API中被应用，例如：

这里调用delicious 的Web服务获取最新书签，以JSON格式返回，然后将它们显示成无序列表的形式。

从本质上讲，JSON是用于描述复杂的数据最轻量级的方式，而且直接它运行在浏览器中。你甚至可以在PHP中调用 json_decode（）函数来使用它。

（3）尽量使用JavaScript原生函数

要找一组数字中的最大数，我们可能会写一个循环，例如：

var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i max){
    max = numbers[i];
  }
}
alert(max);

其实，不用循环可以实现同样的功能：

var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);

而最简洁的写法是：

Math.max(12,123,3,2,433,4); // returns 433

你甚至可以使用Math.max来检测浏览器支持哪个属性：

var scrollTop= Math.max(
 doc.documentElement.scrollTop,
 doc.body.scrollTop
);

如果你想给一个元素增加class样式，可能原始的写法是这样的：

function addclass(elm,newclass){
  var c = elm.className;
  elm.className = (c === '') ? newclass : c+' '+newclass;

而更优雅的写法是：

function addclass(elm,newclass){
  var classes = elm.className.split(' ');
  classes.push(newclass);
  elm.className = classes.join(' ');
}

（4）事件委托

事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件，一般的做法是写一个循环，给每个链接对象绑定事件，HTML代码如下：

Great Web resources
resources">
  Opera Web Standards Curriculum
  Sitepoint
  A List Apart
  YUI Blog
  Blame it on the voices
  Oddly specific

脚本如下：

// Classic event handling example
(function(){
  var resources = document.getElementById('resources');
  var links = resources.getElementsByTagName('a');
  var all = links.length;
  for(var i=0;i

更合理的写法是只给列表的父对象绑定事件，这样可行的原理在于事件是支持冒泡的，代码如下：

(function(){
  var resources = document.getElementById('resources');
  resources.addEventListener('click',handler,false);
  function handler(e){
    var x = e.target; // get the link tha
    if(x.nodeName.toLowerCase() === 'a'){
      alert('Event delegation:' + x);
      e.preventDefault();
    }
  };
})();

（5）匿名函数

关于JavaScript的最头疼的事情之一是，它的变量没有特定的作用范围。一般情况下，任何变量，函数，数组或对象都是全局性，这意味着在同一页上的其他脚本可以访问并覆盖它们。解决方法是把变量封装在一个匿名函数中。例如，下面的定义将产生三个全局变量和和两个全局函数：

var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
  // [...]
}
function getMemberDetails(){
  // [...]
}

封装后如下：

var myApplication = function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  return{
    createMember:function(){
      // [...]
    },
    getMemberDetails:function(){
      // [...]
    }
  }
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.

这被称为单体模式，是JavaScript设计模式的一种，这种模式在YUI中用得非常多，改进的写法是：

var myApplication = function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
    // [...]
  }
  function getMemberDetails(){
    // [...]
  }
  return{
    create:createMember,
    get:getMemberDetails
  }
}();
//myApplication.get() and myApplication.create() now work.

（6）代码可配置

你写的代码如果想让别人更容易进行使用或者修改，则需要可配置，解决方案是在你写的脚本中增加一个配置对象。要点如下：

1、在你的脚本中新增一个叫configuration的对象。

2、在配置对象中存放所有其它人可能想要去改变的东西，例如CSS的ID、 class名称、语言等等。

3、返回这个对象，作为公共属性以便其它人可以进行重写。

（7）代码兼容性

兼容性是初学者容易忽略的部分，通常学习Javascript的时候都是在某个固定的浏览器中进行测试，而这个浏览器很有可能就是IE，这是非常致命的，因为目前几大主流浏览器中偏偏IE对标准的支持是最差的。最终用户看到的结果也许就是，你写的代码在某个浏览器无法正确运行。你应该把你的代码在主流的浏览器中都测试一下，这也许很费时间，但是应该这样做。

Feed enhanced by Better Feed from Ozh

强大的网页性能测试工具–Speed Tracer

seasun — Mon, 03 Jan 2011 13:11:39 +0000

Speed Tracer由google开发的一款测试网页性能分析插件<而且开源> (IE下推荐dynaTrace)，包含：

* Javascript parsing and execution
* Layout
* CSS style recalculation and selector matching
* DOM Event handling
* Network resource loading
* Timer fires
* XMLHttpRequest callbacks
* Painting
* and more ..

安装要求：

1、只适用于 Google Chrome Developer版本

2、在Chrome启动命令里需要设置  --enable-extension-timeline-api

具体可查看这里：http://code.google.com/intl/zh-CN/webtoolkit/speedtracer/get-started.html

插件安装地址：https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl?hl=zh-cn

以下截图为实际测试google地图的数据：

IE中推荐使用dynaTrace

这里是百度文库关于dynaTrace ajax的教程

http://wenku.baidu.com/view/565afd1cc281e53a5802ff08.html

一个小视频地址：http://ajax.dynatrace.com/pages/learn/teaser.aspx

图就不截了，更多的搜索引擎直接搜索出来大把大把的…

最后再推荐两个检测IE内存泄露问题的工具：sIEve、IEJSLeaksDetector

不过，我使用后的感觉下来，还是IEJSLeaksDetector要好使一些，因为它只需要点击”Start”和“stop”就可以自动帮我显示 “有可能”产生内存泄露的代码，点击就直接定位有问题的代码，这样方便很多了。

其它工具也是很强大的，比如说Firebug、YSlow、HttpWatch、Fiddler…

还有一个在线测试网页性能的站点：http://www.webpagetest.org/

相信还有更多、更好的工具，但工具毕竟是工具，上面推荐的这里自己也并不是一个个全部都经常用，关键是找到适合自己的工具、能快速定位并解决问题就是最好的工具了

Feed enhanced by Better Feed from Ozh

GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比

seasun — Mon, 03 Jan 2011 13:04:16 +0000

PNG这种文件格式值得科普下,对比GIF来说

PNG和GIF都支持动画
PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴
所以动画图片来说,还是GIF支持最好

第一种PNG叫PNG8(索引色透明),简单说可以理解为静态的GIF
他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明
但是PNG由于算法的优势,体积比较少
所以,静态GIF完全可用PNG8取代

第二种PNG也叫PNG8(Alpha透明),牛逼在可指定像素点的透明度,例如50%透明度
这种优点在于比PNG24/32体积小,但效果一样
缺点在于IE6支持不好,会显示灰底

第三种PNG叫PNG24
和PNG8的区别仅在于体积更大
比较尴尬的存在

第四种PNG叫PNG32
和photoshop的PSD一样,是Fireworks的默认源文件格式,包含图层和通道信息
和PNG24的区别在于有图层

简单的归纳就是

动画:
支持: GIF, PNG只在firefox支持
不支持: 非Firefox的PNG

索引色透明(某像素是全透明还是全不透明):
支持: GIF/PNG都支持
不支持: IE6下的PNG8(Alpha透明)和PNG24/32

Alpha透明(可指定透明度):
支持:PNG8(Aplha透明)/PNG24/PNG32
不支持: GIF/PNG8(索引色透明)

图层
支持: PNG32
不支持: PNG8/PNG24/GIF

颜色
256色：GIF PNG8(2种)
其他的格式颜色数不过来,好多

附加说明:

Photoshop 只能创建GIF、 PNG8(索引透明)和PNG24

Fireworks 能创建任意格式的GIF和PNG

PNG8(索引透明)在创建的时候有个参数叫(PS杂边|FW色板),这个作用就是用杂边色加上像素点的透明度例如50%,生成伪透明的不透明像素点
适用于固定底色的伪半透明,例子里用的杂边是黑色,在白背景下就很明显

PNG8(Alpha透明)在IE6下会有过度裁剪的问题,可能是把半透明的像素都去掉了,所以某些图片会如最上面第一张图所示,被狗咬的感觉
规避方案:

1.用2张图,IE6用PNG8(索引透明),非IE6用PNG8(Alpha透明),在CSS里用_这个IE6hack来区别
2.半透明在作图的时候就要考虑到被去掉后的样子,对设计师有要求,不大现实
3.说服自己接受这坨大便,然后咽下去就这样了你想咋样

静态GIF、PNG 24、PNG32不大推荐在网页上用

实例在

http://code.sh/lab/png/

有兴趣自己去看

如有疑问和补充请留言，有问必答

——补充线 ———————————————————————————–

ytzong says:

规避方案补充一个：
对IE6使用AlphaImageLoader滤镜，用在PNG8(Alpha透明)上，就像对png24用该滤镜一样，就不会有被狗咬的效果了，要平衡下性能进行取舍
http://www.misuisui.com/weblog/?p=2286

alpha透明的png8做渐进增强非常赞，例图
http://docs.google.com/File?id=ddrrtxb_1735hpptpxcm_b
高级浏览器有阴影，IE6木有

大猫对补充的补充:
1.AlphaImageLoader滤镜的缺点在于额外的CPU和内存开销,并且在图片下载失败的情况下会挂死整个页面,优点如涛哥所说
2.例图里因为非半透明区域是边缘平整的所以适合渐进增强,但是有相当一部分图就被狗咬了,具体看情况来取舍,顶渐进增强

==AD make sense============================================

推荐下ytzong的 CSS gaga ,新增自动生成雪碧图功能,强的1B
本文是涛哥认为俺不懂PNG的反击之作,哇哈哈我不是2B

ytzong: AOL有篇文章不错
猫总这里人气不错看有无人要翻译的
http://www.artzstudio.com/2008/07/png-alpha-transparency-no-clear-winner/

Feed enhanced by Better Feed from Ozh

一个网站，5个目标

seasun — Mon, 03 Jan 2011 08:34:07 +0000

这是最近看到的一篇很不错很实用的文章，主要侧重于设计前的思考、思路，看完有很大的启发，所以推荐给大家，因为是翻译的，翻译不准确的地方还请见谅~

在生活中，拥有目标是非常重要的。

特别对于网站设计而言，因为没有目标就没有动力，更无法衡量你的成功与否。目标有助于设计师专注于重要的事情，把握设计方案的走向。目标能帮助设计者设计出令人眼前一亮的网站。

设计任何一个网站，过程都是大同小异的：我完成了一份设计稿，然后把它交给客户。虽然在一开始，我有我的创意，客户有客户的需求，但是我知道我会在最后交出一份令人满意的答卷。之后的步骤大径相同，但每个网站都会因面向的群体不同、定位不同、风格不同而各自产生某些不同的步骤。有时我需要手绘，有时我又必须利用PS、AI等软件的强大功能。尽管不同项目的过程可以有所差异，但至关重要的是做一个网站一定会确立一个目标，无论你把它写下来也好记在心里也罢，你的设计必须把这一目标体现出来。

我在以下列出的5个目标，是在每一次开始网页设计时都必须思考的。

1。力求用户友好和美观

良好的用户界面往往是建立在牺牲掉一个优秀设计的基础上，然而这两者同等重要，应该让他们和平相处。一个设计良好的网站可以帮助用户轻松访问。网站中的每个元素都应该在客户习惯的位置，否则他们的存在就必须有特定含义，而设计师必须对用户进行引导。例如，导航会放在页面顶部不是因为它放在那里比较好看，而是用户不会拖动滚动条到处找它。如果你一定要让用户拖动滚动条去找导航，就给他们一个理由，比如一些更容易被发现的引导用户向下看的设计。

案例：http://www.whitehouse.gov/

该网站是在奥巴马2008年11月就职时改版的。改版前，网站只专注于提供信息，却没有考虑如何把组织信息和提高可读性。改版后的网站力求用户友好与美观，体现了设计对于可用性的专注。以一个柔和的渐变与经典西方建筑的图案为背景，塑造出一个更舒适更赋有现代感的外观。新导航与信息的合理组织使用户更快速、更有效的获取所需。宽敞的布局，也同样是对用户浏览该网站有利的因素。不需要的东西全都去掉，只留下对用户最重要的部分。

2。明确目标用户

我见过很多网站，看上去很华丽却不适用于它的目标群体。对于设计工作室或者音乐人来说，一个复古的网站搭配时尚的色彩会是很棒的结合，您的顾客也乐于见到。但这样的网站并不适合以专业人士和企业用户为主要群体的律师事务所网站。对于这点，您的客户具有良好的洞察力，因为他们的工作就是与这次的目标群体打交道。在你做研究的时候看看跟你同类型的公司都在做什么，你不必做相同的事情，但是网站给人的感受必须的类似的。

案例：http://www.apple.com/

Apple’s site

该网站是一个很好的例子，出色的设计完全符合目标用户的口味。网站用柔和的渐变、大尺寸的图片展现了干净、简约之美。字体非常重要，苹果网站在标题、字号、位置上都精心考量过。现代的风格精确定位于年轻的偏重技术的用户。该网站也并没有严肃的那么彻底，层层细节中不断渗透出轻松的元素，这点也正中年轻白领的下怀。该设计也同样符合他们产品外观的特点–时尚、有圆角而整洁的组合。以上几点都令用户感到舒适，除此之外，还会产生巨大的吸引力，带动用户去看他们旗下所有品牌的产品。

3。让用户界面自由流畅，让用户能快速高效的找到他们需要的信息。

良好的导航是优秀网站的关键。实现做好网站地图有助于分配页面跳转的去向以及哪些模块应该放在一起。许多网站的导航很繁琐，是因为他们根本没有计划过，哪些信息放在哪里最合适。您需要尽量压缩整个页面的容量，而让重要的信息所占比重最大化。不用把所有相关信息都要放在网页上，因为并不是每个用户都有耐心去阅读。精简导航，确定什么是最重要的，丢掉其余的。

案例：http://www.mediatemple.net/

Media Temple’s site

该网站风格偏向沉稳，暗色调的渐变搭配倒影呈现出光滑的质感，突出了高科技的重点。简洁易用的主导航以及前端有标示的二级导航，都让用户很轻松就找到所需信息。网站的整洁清晰，宽屏的设计让视野更加开阔，十分有利于浏览和阅读。点击网页上的介绍后，明显的“查看详情”的按钮引导用户深入网站，最终找到他们的目标网页，即网站希望用户到达的网页。匹配的按钮和有效地知道在整个过程中给予用户有效帮助。

4。给客户他们想要的以及需要的。

正如众多设计师所知，客户往往认为他们才是最清楚的。一般而言，他们肯定比你更了解自己的公司，所以有关客户和产品的描述得听他们的，因为这是在他们的领域。然而，对于如何把信息组织的更加实用以及网页用户有何特点，他们可能并不了解。因此某些重要的事项你必须为你的客户讲解并让他们充分的理解–为什么他们不需要一些看上去很“炫”的东西，例如做一个长达5分钟的尽管看起来很绚丽的网站介绍。

案例：http://mobify.me/

该网站干净、简约而富有现代感，加上在细节上出色的视觉效果，帮助用户浏览网站。该网站的目标人群除了企业用户外，也包括对“手机友好”感兴趣的技术开发人员和网页设计师。浏览该网站的用户很可能本身就是网站方面的专家，而来的目的是为了进一步拓展自己的网站。这个网站的设计，就是一切关于公司销售移动服务的需求。该界面简洁、光滑，正如一个移动设备给我们的感觉。导航简洁易用，在这个现代高科技的网站上清楚明了的给予用户他们所需要的。

5。用增加代码来拓展网站的功能。

一个简单的网站在运用了JS或PHP的一些功能后会变得强大起来。用户会享受这些附加功能，设计师也有机会做一个新的尝试。既然有这么的技能可以学并植入到网站中，为何不针对每项功能都尝试一个新的页面，在设计上也寻找新的突破呢？尝试一个新的JS教程或一个有趣的PHP 脚本。每当你坐下来设计一个页面的时候都有成推的东西要学，只要你在做每个网站的时候多学一样东西，试想一年后你会有多少成长呢。

案例：http://www.authenticjobs.com/

Authentic Jobs

该网站在细节的处理方面做的非常出色，表现在加强了它的使用性和功能性。网站原本非常基本、简单，但一些JS的运用大大提升了网站的价值，而且让用户的使用更生动有趣。你可以改变工作类型，添加或删减类别，以便在你点击按钮时，在他们的工作清单中过滤信息，让你在更短的时间里，找到更精确的结果。这一类的细节，是这个网站的亮点。

总结：确立目标的确是作为一个网页设计师提升设计水平、前端技巧的重要组成部分。你不可能没有目标就能提升技巧，并让你的客户眼前一亮。每当你开始一个新的页面之前，思考一下你希望完成一个怎样的作品。你的目的不是要追求“完美”，而是要最求“优秀”，而且不要放过任何一次机会。

Feed enhanced by Better Feed from Ozh

前端开发人员必须熟悉的10个CSS3属性

seasun — Mon, 03 Jan 2011 07:35:55 +0000

随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。上篇博文提到了《前端必须掌握30个CSS3选择器》，但是对于Css3的新属性，你又了解多少呢？虽然大多数的css3属性在很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说IE显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在文章的最后，我们将显示一个有趣的最终的案例。

1、border-radius

border-radius

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。 border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。
圆
许多读者也许不会意识到我们可以用这个属性来做一个圆。

-moz-border-radius: 50px;
-webkit-border-radius: 50px;
 border-radius: 50px;

圆

如果想再添加点效果，我们可以利用Flexible Box Model（详情在8中）来使得文字在垂直在水平方向都居中。这需要加点代码，但这仅仅是对不同浏览器的补偿。

display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;

2、 box-shadow

box-shadow

接下来是非常普遍的box-shadow，可以使你的元素立即美化，只是记得不要把值设得太离谱。

-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;

box-shadow的四个参数

x-offset x轴偏移
y-offset y轴偏移
blur 模糊值
color of shadow 阴影颜色

现在，许多人不知道可以一次运用多个box-shadows，这样做会产生一些有趣的效果。在下图中，我使用蓝色和绿色阴影来放大一下效果。

box-shadow

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

The CSS

.box:after {
   content: '';
   position: absolute;

   z-index: -1; /* hide shadow behind image */

   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                

   width: 70%;
   left: 15%; /* one half of the remaining 30% (see width above) */

   height: 100px;
   bottom:  0;
}

3、 text-shadow

text-shadow

text-shadow是我们可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：

x-offset 水平位移
y-offest 垂直位移
blur 模糊值
color of shadow 阴影颜色

 h1 {
    text-shadow: 0 1px 0 white;
    color: #292929;
 }

Text-Outline 和box-shadow一样，它可以设置多个阴影通过逗号分隔符。例如，我们创建文本框的轮廓，当webkit不支持stroke效果，我们可以使用下面的代码让更多的浏览器支持（虽然不是很美观）。

body { background: white; }

h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

Text-Outline

4、 Text-Stroke

Text-Stroke

使用这个方法时要注意了，只有webkit（Safari， Chrome， iPhone）在最后的几年内还支持这个属性。其实，虽然我可能是错的，text-stroke还不属于CSS3范畴的一部分。在这种情况下，使用白色字体时，firefox会显示一个空白页面。要解决此问题，你即可以使用Javascript，也可以通过使用一种不同于背景颜色的文字颜色。

h1 {
   -webkit-text-stroke: 3px black;
   color: white;
}

Feature Detection 我们如何为firefox提供一组可用的样式，和为另外的一组Safari或Chrome？解决办法就是多做测试。通过feature detection，我们可以利用JavaScript来测试某属性是否可用，如果不行，我可就要采用备用的。再回到text-stroke的问题上，为不支持此属性的浏览器设定一个备用黑色（目前的除webkit外）。

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
   var heading = document.getElementsByTagName('h1')[0];
   heading.style.color = 'black';
}

首先我们设定一个h1元素，然后执行，通过样式属性以确定-webkit-text-stroke是否支持此元素。如果不支持，我们会把标题由白色设置成黑色。

5、 Multiple Backgrounds

Multiple Backgrounds

Background属性在CSS3样式中已经彻底改革，开始支持多背景图片。举个简单的例子，如果没和合适的图像，我们将使用两个教程的图像作为我们的背景，当然在程序中你可能会用纹理，也许是渐变作为图像。

.box {
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

以上，通过逗号分隔符，插入了两张背景图像，第一个的定位是（0，0），第二个的定位是（100%，0）。要确定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。 对旧浏览器的补偿 要添加一张单独的图像给老浏览器用，像IE7。要定义两遍background，一遍是为老浏览器，另一遍是重写。或者你可以再次查看下 Modernizr。

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;

/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6、 background-size

目前我们已经可以使用这种比较灵活的方式去重定义背景图像的大小。

background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;

上面的代码使得背景图像已经占据了整个可用空间。但是，如果我们使用一个特殊的图片去占据body元素的整个空间而无论窗口有多宽，那又怎么做？

body, html { height: 100%; }

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

对，就是这么做，分别定义background-size的x，y参数。最新版本的Chrome 和 Safari支持此属性，但我们还是要用旧的方法支持旧的浏览器。

body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

7、 text-overflow

浏览器最初开发文本溢出属性可以设定两个值：clip ellipsis 此属性支持切断容器中的文本，而且也给出了一个省略号的特性。

text-overflow

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
   border: 1px solid black;
   width: 400px;
   padding: 20px;
   cursor: pointer;
}

或许你会考虑当鼠标经过时显示全部的文本内容。

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

有点奇怪，这看起来并不像是重置text-overflow属性或是停用它，使之生效，在on:hover中我们可以使得white-space的 normal属性。现在正常了。知道吗？您还可以指定自己的字符串，应使用省略号的位置。这样做来修饰要显示的文本字符串。

8、 Flexible Box Model

Flexible Box Model将最终使我们远离类似float的困扰。虽然是要给你的头部换一个新的属性，但一旦你这么做了，将终身受益。做个演示，创建简单的两列布局。


  Main content here 
  Aside content here

首先我们要设定一个容器，然后指定它的宽和高，即便是没有实质性的内容在里面。

#container {
    width: 960px;
    height: 500px; /* just for demo */

    background: #e3e3e3;
    margin: auto;

    display: -moz-box;
    display: -webkit-box;
    display: box;

接下来分别定义#main和aside的背景色

#main {
   background: yellow;
}   

aside {
   background: red;
}

到目前为了还没有看出什么效果来。

值得一提的是，虽然我们设置了display:box模型，它的子元素会占据整个垂直空间。这就是它的默认box-align属性stretch。看看有什么效果产生，当我们设置了#main的宽度后。

#main {
  background: yellow;
  width: 800px;
}

Flexible Box Model

但是我们仍有个疑问，为什么aside不占据剩余的全部空间呢？我们可以用新属性box-flex来试下。 box-flex 使得元素占据整个空间。

aside {
    display: block; /* cause is HTML5 element */
    background: red;

   /* take up all available space */
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
 }

使用这个属性后，不管#main有多宽，aside都将占据整个可用的空间。同时你也不必担心诸如float等产生的问题，像使得元素被排挤到下一行。

Flexible Box Model

我只是在这儿肤浅的说一下，请参阅保罗爱尔兰优秀文章的详细信息。然而，使用此方法的时候也应注意一下兼容问题，例如老的浏览器应该先测试下，并且提供必要的备注。

9、 Resize

只有Firefox 4和Safari 3支持此属性。Resize是CSS3 UI模型中的一部分，可用于重定义textarea的大小。

默认情况下webkit浏览器和Firefox 4支持水平和垂直方向上的重定义。

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

可能的值：

both：重定义水平和垂直方向
horizontal：水平调整大小限制
vertical：垂直调整大小限制
none：不支持重定义

Resize

10、 Transition

也许CSS3最令人兴奋的增补，就是在没有 JavaScript 的元素的情况下产生动画。好像IE9还不支持此功能，但这并不代表你不能使用这个功能，关键是在于提高技能。现在模仿一个效果，当鼠标滑过右侧链接时，文本向右滑动。
The HTML


   
       Hover Over Me 
   
   
       Hover Over Me 
   
   
       Hover Over Me 
   
   
       Hover Over Me

The CSS

ul a {
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

 a:hover {
    padding-left: 6px;
 }

transition 有三个参数：

The property to transition. （Set this value to all if needed）转换属性。（设置此值为所有如有需要）
The duration 持续时间
The easing type 缓动类型

为什么我们不将transition直接应用到hover上呢？是因为我们只是在mouseover时生效，当mouseout时元素将立即返回到其最初的状态。因为我们对效果做了调整，所有对旧的浏览器不会产生任何影响。接下来是通过文章所学，我们来建立的一个简洁的效果。大家可以通过查看源码来学习来。具体如何创建我就不翻译了。

Feed enhanced by Better Feed from Ozh

精选15个国外最流行的CSS框架

seasun — Wed, 22 Dec 2010 15:18:50 +0000

CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。虽然对于小的WEB开发项目来说，CSS框架并不一定适用，但是对于规模较大的团队开发项目而言，CSS框架不仅能加快设计开发速度，而且还能有效解决网站改版中带来的诸多麻烦和问题。这里推荐的15款CSS框架是现在国外最流行的CSS框架，希望能对你的开发有所帮助！

例如：

typography.css 基本排版规则
grid.css 基于网格的布局
layout.css 通常的布局
form.css for 表单样式
general.css 更多通用规则

1 . Elements CSS Frameworks

CSS Frameworks

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读概述了解更多。

2 . YUI Grids CSS

CSS Frameworks

YUI Grids基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4 卷的区块的功能。这个4KB的文件可提供超过1000中页面布局组合。更多信息

3 . YAML CSS Framework

CSS Frameworks

Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

4 . Blueprint CSS

CSS Frameworks

Blueprint 是一个CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。

5 . Schema Web Design Framework

CSS Frameworks

Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。

6 . CleverCSS

CSS Frameworks

CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。

7 . Tripoli CSS Framework

CSS Frameworks

Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

8 . ESWAT Web Project Framework

CSS Frameworks

ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

9 . Boilerplate CSS Framework

CSS Frameworks

作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

10 . WYMstyle CSS Framework

CSS Frameworks

WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

11 . Content with Style Framework

CSS Frameworks

Content with Style下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板。

12 . Logicss Framework

CSS Frameworks

Logicss 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和 PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用css 代码生成工具。

13 . That Standards Guy CSS Framework

CSS Frameworks

That Standards Guy只能调用单个样式文件，主样式需要取得 CSS认证(WCAG 1.0)；跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac； IE Hacks使用独立文件；快速创建模板；框架中提供少量注释/实例演示，可以节省时间来理解。

14 . 960 Grid System

CSS Frameworks

960 Grid System是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。

15 . Emastic CSS Framework

CSS Frameworks

Emastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

Feed enhanced by Better Feed from Ozh

百度js库tangram开源

seasun — Wed, 22 Dec 2010 15:08:16 +0000

百度js库tangram宣布开源,Tangram是一套简单可依赖的Javascript库，它的特点：
* 体积小巧，性能优良，使用简单。
* 模块化架构，方便定制与扩展。
* 适合团队开发，丰富的中文文档和本地技术优化，适合中国用户。 *多浏览器支持：
IE6、7、8+
Frfox3.x+
傲游2.x+
Opera 10.x
Chrome 4.x+
Safari 4.x+

* 经过专业QA团队的测试以及百度各大产品线的应用，质量有保障。

Tangram Base – 基础库:
http://tangram.baidu.com/tangram/download.html
Tangram Component – 组件库:
http://tangram.baidu.com/tangram/codesearch.html

Feed enhanced by Better Feed from Ozh

我想网 » 前端开发

HTML5未来发展的六大趋势

1） 移动优先

2) 游戏开发者领衔“主演”

3) 响应式设计&自动变化的屏幕尺寸

4 )设备访问

5) 离线缓存

6) 开发工具的成熟

总结

7 项 Web 开发者需要了解的新技术

如何写出高质量的Javascript代码

Web开发人员应当知道的15个开源项目

Firebug的Console的用法

iframe自适用高度代码

跨域资源共享的10种方式

同源策略

单向跨域

JSONP

flash URLLoader

Access Control

window.name

server proxy

双向跨域

document.domain

FIM – Fragment Identitier Messaging

Flash LocalConnection

window.postMessage

Cross Frame

总结

40个UI设计工具和资源

原型开发、模型构建和设计反馈工具

代码片段和脚本

其他杂项资源

HTML中的IE条件注释

10个给力的jQuery图片插件

2010年最佳jQuery插件

jQuery 1.5 正式版发布

关于网络爬虫的

JavaScript 初学者应注意的七个细节

Great Web resources

强大的网页性能测试工具–Speed Tracer

Speed Tracer由google开发的一款测试网页性能分析插件<而且开源> (IE下推荐dynaTrace)，包含：

GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比

一个网站，5个目标

1。力求用户友好和美观

2。明确目标用户

3。让用户界面自由流畅，让用户能快速高效的找到他们需要的信息。

4。 给客户他们想要的以及需要的。

5。 用增加代码来拓展网站的功能。

前端开发人员必须熟悉的10个CSS3属性

1、border-radius

2、 box-shadow

3、 text-shadow

4、 Text-Stroke

5、 Multiple Backgrounds

6、 background-size

7、 text-overflow

8、 Flexible Box Model

9、 Resize

10、 Transition

精选15个国外最流行的CSS框架

百度js库tangram开源

1）移动优先

4。给客户他们想要的以及需要的。

5。用增加代码来拓展网站的功能。