Another Android Show:

1、引入JQuery代码

2、运行如下代码测试：

+function(){
var s = '<h1><em class="a_b c" style="min-height:50px;_height:50px;">x</em></h1>';
var d = $(s);
alert(d.html());
}();

FF中的结果为：

<em class="a_b c" style="min-height: 50px;">x</em>

"_height:50px;" 部分不见了。

IE下的结果为：

<EM class="a_b c" style="MIN-HEIGHT: 50px; HEIGHT: 50px">x</EM>

"_" 不见了。

遇到此BUG的同学可以将inline的style改成className的方式来处理一下。

JQuery Bug Report: http://forum.jquery.com/topic/transform-bug-in-html-string

 在某开心农场做了本次Off-Site的课外活动，对很久木有外出的大家来说，景致真的不错！

本次Off-Site课外活动的集合点

晚上的篝火晚会灰常热闹，不过火焰太大，好热!

苏州真的不错！^_^

在使用Struts或Spring的后端中，使用Freemarker模板作为载体，能够非常有效的实现前后端的分离。

有人或许会认为使用前端模板一样可以实现此效果，而且实现的会更好。

如果单纯从技术和实现的角度去考虑，确实是使用前端模板效果会更好，前后端分离的会更彻底，但如果真的这样做，任何地方都采用前端模板去渲染，那这样的WEB应用将会失去高可靠性及易用性。

我们的建议是，一般的页面由后端模板渲染，页面中的某些特殊模组，可以由前端模板进行渲染，比如，一个具有诸多交互且内容不断变化的数据列表。

在使用过Freemarker模板后，感觉它的语法比较朴实，平易近人，容易上手，于是决定按它的语法风格实现一个前端的模板引擎，这就有了下面的EasyTemplate!

EasyTemplate模板的函数大小为1.34k（未压缩），暂时只实现了list，list index，if elseif else等功能，应该可以满足大部分的使用需求了。

EasyTemplate模板引擎的解析速度测试，渲染1000行数据，在不同的浏览器中，平均速度大约在30毫秒以内（测试机器性能较弱）。

EasyTemplate可用标签：

<#et tname dataname> //模板开始标签，tname为此模板的名称，dataname为此模板中用到的数据名称

<#if (condition)>

<#elseif (condition)>

<#else>

</#if>

${x?a:b} //三元表达式，最后不能加分号"；" 注意：在所有的 {} 中都不能出现分号！

<#list List as list> //遍历一个数组对象

${list_idx} //在此次遍历中的当前索引

${list.xxx} //取值

</#list> //结束遍历

</#et> //模板结束标签

调用方法：

var x = easyTemplate(sTemplate,oData);

EasyTemplate模板引擎函数下载：http://www.easyui.org.cn/easyTemplate.js

EasyTemplate模板引擎在线演示：http://www.easyui.org.cn/easyTemplate.html

DOM Storage

类似http session和cookies的两种全新机制：

Session Storage

• 会话存储是针对用户执行单个事务的方案而设计的。
• 应用于用户在同一时间（同一个会话期）跨多窗口运行同一事务的场景。
• 来自MDC的说法:它常用于临时存储那些需要保存的数据以便当浏览器不小心刷新时能够恢复它们。
• 它含有一个在页面会话有效期内可用的存储区域。
• 只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。
• 打开一个新的标签页或新窗口都会初始化新的会话。
• Internet Explorer 8:不会在浏览器故障得到恢复后继续使用 sessionStorage。
• Firefox也木有实现介个功能，参见：bug 33945 https://bugzilla.mozilla.org/show_bug.cgi?id=339445

Cookies不能很实时的处理这些情形：

如，某个用户在某站点购买机票时打开了两个不同的窗口，如果该站点使用cookies来记录用户的购买信息，那么，该用户在一个窗口中“已购买”的机票信息可能在另一个窗口中就被“漏”掉了，这将导致该用户在另一个窗口中得不到实时通知的情况下购买两张相同航班的机票。

sessionStorage接口的定义正是为了解决此情形，一个站点可以将它的数据添加到session storage，然后，该站点在某窗口中打开的任何页面都可以访问到此数据。

Local Storage

• 本地存储机制跨多个窗口，且持续范围可超过当前会话。localStorage属性可为域提供持久存储区域。
• 它可使得WEB程序能够存储MB级的用户数据，如，存储整个用户签名档或用户的收件箱。
• 它也为客户端性能的优化提供了一种解决方案。

        Cookies还是不能很好地处理这些情形，因为它每次请求时都会将值传送给服务器，而且数据会过期。

每个站点都会有它们各自的存储区域。

Storage对象接口定义

constructor:
    返回Storage对象的构造器引用（Object）

remainningSpace:
    返回Storage对象中剩余的内存数量（Bytes）

length:
    返回当前Storage对象中key/value配对列表的长度，只读，数字类型

key(n):
    返回当前Storage对象中key/value配对列表的第N个元素的key值，如果N>=length，则返回null

getItem(key):
    返回当前Storage对象中给定的key值（复制的）

setItem(key, value):
    复制一份给定的value（不支持包含ImageData的对象，报NOT_SUPPORTED_ERR）
    检测在当前Storage对象list中是否存在指定的key：
    如果不存在，则在该list中插入此key/value的配对。
    如果存在，则更新此key的value。
    如果操作失败，则报空间不足（QUOTA_EXCEEDED_ERR）异常。

removeItem(key):
    从当前Storage对象中移除指定的key值

clear():
    清空当前Storage对象中所有的key/value

sessionStorage对象

• sessionStorage作为Storage对象的实例，存在于浏览器全局作用域中，同源共用。
• 全局对象，可通过sessionStorage或window.sessionStorage访问。
• 生存周期为一个窗口或一个TAB的生存期间所加载的所有同源页面。
• session storage存储的内容只在用户请求的数据被删除或者存储空间不足时才会被设置过期。
• 当sessionStorage调用setItem,removeItem或clear方法并成功执行时，所有打开的窗口中的sessionStorage都会
• 被指向到相同的存储区域，且都会触发Storage对象的相应事件。

localStorage对象

• localStorage对象作为Storage对象的实例，存在于浏览器全局作用域中，同源共用。
• 每个域和子域都具有自己单独的本地存储区域。 域可以访问子域的存储区域，而子域也可以访问父域的存储区域。
• 注意：http://example.com域无法访问https://example.com中的localStorage数据。
• localStorage['example.com']  可由 example.com 及其任何子域访问。
• 子域 localStorage['www.example.com']可由 example.com 访问，但不能由其他子域访问，如 mail.example.com。
• 全局对象，可通过localStorage或window.localStorage访问。
• local storage存储的内容只有在用户提出请求或出于安全因素处理时才会被设置过期。

安全提示

1. 当请求违反存储限制时，抛出SECURITY_ERR异常（如用户设置不允许存储数据）。
2. 磁盘配额限制将施加于设置相应值的页面所在的域，而不是施加于在其中设置相应值的域。 这可防止恶意脚本用尽相关域的存储配额。 同时还可阻止此类脚本使用随机子域来存储无限数量的数据。
3. 如果来自非同源（源由协议、主机名（或 IP 地址）和域的 URL 的端口号确定）的脚本，抛出SECURITY_ERR异常并忽略其他步骤。
4. 如果文档来源不属于HTML5源时，抛出SECURITY_ERR异常并忽略其他步骤。
5. 存储在Storage中的数据未经过任何编码和加密，建议在使用的时候不要将敏感的重要的用户数据存储在Storage中。

当浏览器切换到private模式时（如果可以的话），localStorage存储的数据在浏览器模式改变后将被丢弃。

当localStorage调用setItem,removeItem或clear方法并成功执行时，所有打开的窗口中的localStorage都会被指向到相同的存储区域，且都会触发Storage对象的相应事件。

Storage事件（实现者）

当一个存储区域发生改变时，Storage事件即被触发，所有窗口中的Storage对象都将被影响。

事件定义

initStorageEvent():
    使用类似DOM Events接口的方式初始化事件

key:
    表示key被改变

oldValue:
    key被改变之前的值

newValue:
    key改变之后的值

url:
    表示该地址文档对象中的key被改变

storageArea:
    影响到的Storage对象

DOM Storage Events（IE8+）

当更新存储区域中的数据时，Internet Explorer 将触发相应事件，以便在浏览器或选项卡的多个实例之间能够保持信息同步。

onstorage

• 当存储区域发生更改时，document  中将触发  onstorage 事件。
• 所有共享相同会话上下文的文档，以及当前显示来自相同域或子域（即，本地存储将要提交到的域或子域）的页面的文档，都会接收到该事件。
• 如果目标文档对象当前未处于活动状态，则 Internet Explorer 不会触发任何事件。

onstoragecommit

• Internet Explorer 使用 XML 文件来存储本地存储数据。 将本地存储数据写入到磁盘上时，将触发  onstoragecommit 事件。

   
磁盘空间

每个域默认可以存储 5 MB 的数据，当超过时，需要提醒用户是否增加空间。
IE8+浏览器默认为 10 MB

userData Behavior

IE5+支持，允许对象存储数据在用户端

使用条件，为某对象设置behavior样式

html:
    <ELEMENT  STYLE="behavior:url('#default#userData')" ID=sID>

scripting:
    object.style.behavior = "url('#default#userData')"
    object.addBehavior("#default#userData")

userData对象成员表

expires:
    设置或返回userData的到期时间

XMLDocument:
    返回一个XML引用

load(user):
    加载指定user存储在userData中的数据对象

getAttribute(attr):
    返回指定attr的值

setAttribute(attr):
    设置指定attr的值

removeAttribute(attr):
    移除指定的attr值

save(user):
    保存指定user的数据对象到userData中

磁盘空间

本地：
    document limit:128KB，domain limit:1024KB
局域网：
    document limit:512KB，domain limit:10240KB
可信站点：
    document limit:128KB，domain limit:1024KB
互联网：
    document limit:128KB，domain limit:1024KB
受限站点：
    document limit:64KB，domain limit:640KB

安全提示

1. 为了安全考虑，userData存储的数据只对相同的目录，且使用相同的协议才能访问。
2. 存储在userData中的数据未经过任何编码和加密，建议在使用的时候不要将敏感的重要的用户数据存储在userData中。
3. 将userData行为应用在html,head,title,style等对象上时，使用save和load方法时将会发生错误。

Adobe Flash Player本地存储
存储空间: 100 KB

Cookie
存储空间: 4 KB

简单实现一个兼容新老浏览器的离线存储演示，简单判断是否可用localStorage，否则使用cookie.

在线演示DEMO：http://www.easyui.org.cn/domStorage.html

当一个产品的用户数量达到一个很大 的数量级时，这种情况确实会经常发生，若不能有效的解决，的确让产品工程师们很困扰。

在百 度泛用户体验博客中，百度有啊的同学分享了他们是怎么来处理这种情况的，那就是，提供一个客户端环境诊断的小工具 （页面），让用户配合工程师一起进行诊断，为处理用户遇到的问题提供较有价值，较全面的资料。

原文如下：

作者：Miller

有啊网页诊断工具是一个轻量级的浏览器环境检测工具，基于Javascript以及Flash实现。它的主要 功能包括问题检测以及针对某些问题给予提示性的建议，从而帮助用户自助的解决一些简单的问题。此外还能生成简单的检测报告，通过报告开发人员可是获得更为 详细的环境信息，为解决问题提供有效的支持。

该工具具体的检测项包括以下几个：

1. Javascript版本信息
2. Cookie是否开启
3. 用户的屏幕分辨率
4. Flash版本号以及浏览器是否开启了Flash拦截功能
5. 浏览器字体大小是否正常（某些浏览器缩放后会导致页面布局混乱）
6. 浏览器的Ajax功能是否正常，包括Get方式和Post方式
7. 浏览器的图片浏览功能是否正常
8. 用户的网络速度

通过对以上几个问题的检测，开发人员能够比较全面的了解目标浏览器的整体环境。

一、Javascript版本检测

对于Javascript版本的检测似乎显得不是那么必要，因为通常都可以根据浏览器的版本找到对应关系，不过作为浏览器环境的一部分，还是把该功 能加了进来。具体的实现原理：在页面中嵌入各个版本的script标签，并在每个标签中都给同一个全局变量赋值，最后根据变量的值得到版本号：

     
 JS_VERSION=('1.0');    

     
 JS_VERSION=('1.1');    

     
 JS_VERSION=('1.2');    

      ......
      ......
     
 JS_VERSION=('1.3');    

     
 window.onload = function(){
 if( typeof JS_VERSION != 'undefined' )
 document.getElementById('test').innerHTML = JS_VERSION;
 }    
  

根据W3C规范，script的language属性已经被废弃了，不过经测试该属性的兼容性较好，并能得到比较准确的结果。如果使用type= “text/javascriptN”则在很多浏览器下得不到正确的版本，因此在此依然使用了language属性。另外，关于javascript各个 版本与浏览器的对应关系可以参考如下表格：

相关参考资料：

http://www.w3.org/TR/REC-html40/interact/scripts.html W3C 关于script标签的描述

http://en.wikipedia.org/wiki/JavaScript#Versions 维基百科关于JavaScript中的版本描述

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/JavaScript_Overview JavaScript Versions and ECMAScript Editions

http://hi.baidu.com/jiaozhenqing/blog/item/d8f026380392f22cb9998fc7.html JavaScript版本一览

二、检测Cookie是否开启

先获取window.navigator['cookieEnabled']的值，如果该值非undefined的话则直接使用该值即可判断(经测 试IE7、Firefox3.5、Safari4、Opera10均能支持)。如果为undefined(即不支持该属性）则使用如下的方式：尝试向 Cookie中写入数据（为避免浪费设置1分钟的有效期），写入后检测document.cookie中是否存在刚才写入的数据，如果有则cookie有 效否则cookie无效：

 var cookie = document.cookie;
 var cookieEnabled = window.navigator['cookieEnabled'];

 if(typeof cookieEnabled == 'undefined'){
    var expireDate = new Date();
    expireDate.setTime(expireDate.getTime() + 1000);//Expired after 1 second
    var time = expireDate*1;
    var regExp = new RegExp(time + '=' + time);
    document.cookie = time + '=' + time + ';expires=' + expireDate.toGMTString();
    if( regExp.test(document.cookie) )
       cookieEnabled = true;
    else
       cookieEnabled = false;
 }

三、Flash版本以及可用性检测

Flash检测包含两方面的内容：

1. Flash是否安装、禁用，Flash版本号

对于Flash的版本检测可以通过在页面中引入AC_OETags.js（包含在Adobe官方的Flash Player Detection Kit中），然后通过调用其中的GetSwfVer方法获得具体的版本号，如果Flash未安装或者被禁用 则 GetSwfVer方法将会返回-1，否则返回正确的版本号。查看GetSwfVer的实现，与浏览器版本检测如出一辙，也是通过navigator信息 得到的，感兴趣的可以直接查看其源码。

2. 如果Flash已经安装是否被拦截

做这一步检查的前提是第一步能够获得正确的版本号。具体的检测方法也很简单，在页面中引入一个自定义的swf文件，在该swf文件中只定义 了一个方法checkFlash，并将该方法暴露出来使得JavaScript能够访问到，即 ExternalInterface.addCallback(“checkFlash”,checkFlash);在swf加载完成后通过 JavaScript访问checkFlash方法，如 果存在该方法则说明Flash访问正常，否则Flash可能被拦截了。

以上两步的代码实现大致如下：

HTML代码

Javascript代码

    //获取Flash版本号，如果version为-1则可能未安装Flash或者Flash被禁用
    var version = GetSwfVer();
    if( version != -1 ){
         var isIE = navigator.appVersion.indexOf("MSIE") != -1;
         if( isIE )//IE下取Object元素
            var swfObj = document.getElementById('oCheck');
        else//其他浏览器下取embed元素
            var swfObj = document.getElementById('eCheck');
        if( !swfObj.checkFlash ) {
            //被拦截
        }
        else {
           //未拦截
        }
    }
    else{
        //未安装Flash Player或者Flash Player被禁用
    }

四、Ajax功能检测

该功能的检测比较直接，即分别构造Ajax Get和Ajax Post请求，在请求过程中详细的记录Ajax的实例类型（ActiveXObject 或 XMLHTTPRequest）、请求的各个阶段的状态以及最终的请求结果。

五、检测图片是否被禁用

检测图片是否禁用的原理：新建一个Image对象，并监听其onload事件（IE某些版本中无效，需要监听onreadystatechange 事件）以及onerror事件。

 var img = new Image;
 //监听onload事件，由于在ie的某些版本中onload事件并不会被触发，因此增加onreadystatechange监听器
 img.onload = img.onreadystatechange = function(){
 //加载成功说明图片功能是正常的
 }
 //监听onerr事件
 img.onerror = function(){
 //如果触发了onerror事件，则说明图片功能不正常（在img的src正确的情况下）
 }
 img.src = 'xxx';

以上的实现中，对于加载事件的监听并没有什么问题，不过对于onerror事件还是存在比较大的兼容性问题：经测试发现，在IE下禁用图片后并不会 触发 onerror事件，而在Firefox中禁用图片后则能正常的触发onerror事件，至此的结论是使用onerror来判断图片功能是准确的。取而代 之的是使用超时检测来判断，即假定图片在一定时间内仍未能加载成功则视为失败。

 var img = new Image;
 //监听onload事件，由于在ie的某些版本中onload事件并不会被触发，因此增加onreadystatechange监听器
 img.onload = img.onreadystatechange = function(){
 //加载成功说明图片功能是正常的
 }
 //监听onerr事件
 img.onerror = function(){
 //如果触发了onerror事件，则说明图片功能不正常（在img的src正确的情况下）
 }
 img.src = 'xxx';
 var timer = setTimeout(function(){
 //如果执行到这里则认为图片功能异常
 },TIMEOUT);

六、检测网络速度

实现原理：请求一张已知大小的图片N次，并分别记录每次请求所花费的时间，最后根据图片大小计算出平均的网络速度。这里需要注意的是图片的大小问 题，图片如果太小结果会不准确，需要选择一张合适的图片，另外为防止图片被浏览器缓存需要给图片的src添加时间戳。

/*
 * @param { Integer } times 请求图片的次数
 * @callback { Function } callback 图片请求完成后调用的函数
 */
 function detectNetSpeedWithImage(times,callback){    
 times = times || 1;
 //已完成请求
 var completedImg = 0,
 res = [],
 timer = null,
 done = false;        
 for( var i = 0; i < times; i++){
 (function( index ){
 setTimeout(function(){            
 var img = new Image();
 //开关，在某些浏览器（如IE）会响应两次onreadystatechange
 var loaded = false;
 //请求开始时间
 var tStart = new Date();
 img.onload = img.onreadystatechange = function(){
 if( loaded ) return;
 //请求结束时间
 var tEnd = new Date();
 res.push(tEnd - tStart);
 //已完成请求加1
 completedImg++;
 loaded = true;
 //全部请求完成后调用callback
 if( completedImg == times && callback ){
 callback.call(null,res);
 if( timer ) clearTimeout(timer);
 }
 }
 img.onerror = function(){
 if( done ) return;
 callback([]);
 done = true;
 clearTimeout(timer);
 }
 img.src = Config.NET_SPEED_DETECT_IMAGE_URL + '?t=' + (new Date())*1;
 },index * Config.NET_SPEED_DETECT_IMAGE_REQUEST_INTERVAL);
 })(i);
 }
 //超时操作
 timer = setTimeout(function(){
 if( completedImg != times && !done ){
 callback([]);
 }
 },Config.NET_SPEED_DETECT_TIMEOUT + times * Config.NET_SPEED_DETECT_IMAGE_REQUEST_INTERVAL);
 }

 detectNetSpeedWithImage(Config.NET_SPEED_DETECT_TIMES,function(res){
 //失败
 if( res.length < 1 ){
 _handleError();
 }
 //成功
 else{
 var time = 0;
 for( var i = 0,l = res.length; i < l; i++){
 time += res[i] / ( l * 1000 );
 }
 //计算速度
 var speed = Config.NET_SPEED_DETECT_IMAGE_SIZE / time;
 //取小数点后两位
 speed = speed.toFixed(2);        
 me.isOver = true;    
 }
 });

七、检测客户端分辨率

直接获取window.screen的width与height即可。

八、检测浏览器字体大小是否正常

在IE6下，当使用px作为单位时，元素（字体大小）无法进行缩放，这在很多情况下都会造成页面混乱。另外，对于目前大多数浏览器，在默认字体设置 下，1em恰恰等于16px，于是可以根据这个原理来检测浏览器字体是否正常，具体的方式如下：

1. 创建一个DIV元素1，并设定其高为16px，宽为1px并使用CSS将其定位到可视范围之外（不能通过display或visibility隐藏）

2. 创建另一个DIV元素2，并设置其font-size为medium。在该DIV内部创建一个DIV元素3，并设置其高位1em，宽为1px并使用CSS 将其定位到可视范围之外

3. 比较元素1和元素3的高度，如果相等则字体大小正常否则异常

注意，元素3必须包含在元素2中，并且给元素2设置font-size: medium。因为em是一个相对单位，1em的大小相当于其父元素字体的大小，为了使检测不受其他样式影响，将其放在一个字体大小为浏览器默认值的容器 中。

 //隐藏DIV的CSS
 var hideCSS = 'position:absolute;left:-2000px;';

 //以px为宽度单位的元素
 var pxBlock = document.createElement('div');
 pxBlock.style.cssText = 'width:16px;height:1px;' + hideCSS;
 document.body.appendChild(pxBlock);
 //构建一个字体大小为浏览器默认值的容器
 var emBlockWrapper = document.createElement('div');
 emBlockWrapper.style.fontSize = 'medium';

 //以em为字宽度单位的元素
 var emBlock = document.createElement('div');
 emBlock.style.cssText = 'width:1em;height:1px;' + hideCSS;

 emBlockWrapper.appendChild(emBlock);
 document.body.appendChild(emBlockWrapper);

 //获得固定和变化的div宽度
 var pxBlockWidth = pxBlock.offsetWidth;
 var emBlockWidth = emBlock.offsetWidth;

 if(pxBlockWidth == emBlockWidth){
 //字体正常
 }
 else{
 //字体异常
 }

在看到Nicholas C. Zakas提出的可维护性的代码的观点后，这种感觉越发的强烈！

原文出处：

http://www.nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/

可维护的Javascript代码

当我们在开发WEB程序时，如何保证代码的可维护性？很简单，不要修改不是自己定义的对象。

为什么不可以去修改不属于自己定义的对象？

当我们去修改一个已有的并非我们自己定义的对象时，将发生多么糟糕的事情：

• 不可信任，导致混乱
  
  这样的修改不可信任，很有可能之前使用过此对象的地方发生BUG
   
• 不兼容
  
  在修改这些对象时，我们很可能会将一些新的方法添加进去，而没有考虑到这个对象很可能被应用在并没有实现这些方法的环境中
   
• 维护的梦魇
  
  试想，当这种情形发生在一个大项目，大团队中，对成员间开发的代码维护将会是件多么恐怖的事情。

在WEB开发中，怎样的代码才是可维护性高的代码？

有一段代码，当浏览器发生改变时，它并不需要作出任何修改，这就是可维护性高的代码！

在WEB开发中，这不仅适用于Javascript，同样适用于Css!

IE：

• 链接到一个锚点，如果该锚点在当前页未被定义，则不能产生history
• 页面中的iframe，如果改变其hash，href，或重新写入新的HTML内容，都会产生history
• 对iframe产生的history进行“向前”，“向后”操作时，页面地址栏的值不会改变
• iframe中使用hash change的方式，在操作历史记录时会相应回滚，可以以此作为历史记录改变的触发事件
• 页面hash的改变，无法通过location.hash获取

其他浏览器：

• 链接到一个锚点，如果该锚点在当前页未被定义，也能产生history
• 页面hash的改变，可以通过location.hash获取
• iframe中使用hash change的方式，在操作历史记录时不会相应回滚，没办法以此作为历史记录改变的触发事件

实现方案：

• 定时检测hash的变化

ajax history demo: http://www.easyui.org.cn/ajaxHistory.html

Retrieves a value that indicates whether the object has layout.

Syntax

HTML	N/A
Scripting	[ sHasLayout = ] object.currentStyle.hasLayout

Possible Values

sHasLayout

Boolean that receives one of the following values. false Default. Object does not have layout. true Object has layout.

The property is read-only. The property has a default value of false. The Microsoft Cascading Style Sheets (CSS) extension is not inherited.

Remarks

The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.

CSS property	Value
display	inline-block
height	any value
float	left or right
position	absolute
width	any value
writing-mode	tb-rl
zoom	any value

As of Microsoft® Internet Explorer 6, when the !DOCTYPE declaration specifies strict standards compliance, inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.

Setting the contentEditable property to true will cause an element to have layout.

BODY, FIELDSET, IMG, INPUT, TABLE and TD elements always have layout.

 

当hasLayout为false的元素中包含了hasLayout为true的元素时，该子元素在应 用position类型的样式时将会遇到兼容问题。

当 hasLayout为false的元素应用position类型的样式时，将会遇到兼容问题。

See also:

background与 border的恩怨情仇

http://www.jslab.org.cn/?tag=hasLayoutBug

由谁提出的
    来自Yahoo! Exceptional Performance team

什么时候开始发起的
    2004年开始研究，2007年4月开始，陆续发布,(5月,7月,9月)

为什么
    Yahoo希望对自己的产品性能做出一些测量和改善

成绩
    总结出14条提升WEB产品性能的准则（后续21条）

第一条：最小化HTTP请求(Frontend)

    将CSS文件和JS文件合并（可行性不高）
    CSS Sprites
    Image Maps(很久以前经常使用的“热区”)
    Inline Images,data:URL（浏览器兼容问题）

    每天大概有40-60%的访问者去到我们的站点的时候都是empty cache，所以，
    我们如果能够使得他们在第一次访问时速度更快，那对他们来说将获得很好的体验。

第二条：使用内容分发网络 (Server)

    将静态文件分发到其他独立的服务器上。
    目的：使得用户可以就近获取到静态文件，从而解决动态内容站点网络拥挤的状况，提高用户访问网站的响应速度。
    Performance Golden Rule:
    80-90%的用户响应时间都花费在了下载某个页面上的组件上，
    如：images,stylesheets,scripts,flash等等，而这些文件都是静态的，完全可以分发出去。
       
    CDN很昂贵，可以租用，也可以退而求其次，采用部署多台Server进行反向代理

第三条：设置一个 Expires头(Server)

    静态文件：永不过期
    动态文件：适当设置"Cache-Control"头

    现在的WEB页面设计越来越丰富，这也意味着页面上会有越来越多的script,stylesheets,images,flash等等
    用户在第一次访问我们的站点时，会发出若干请求，但再次访问时或者继续访问其他页面时，
    如果这些文件设置了Expires头，就可以避免再次为它们发出新的HTTP请求，
    从而提高页面加载速度，减轻服务器压力，提升用户体验。

第四条：Gzip压缩静态文件(Server)

    为所有静态文件开启GZip
    压缩文件，节约带宽，提高下载速度

第五条：将样式表放置在源文件的顶部 (Frontend)

    将所有样式文件放置在接近源文件顶部的<head>标签内

    页面按加载进度逐步渲染，给予访问者视觉上的反馈，尤其是内容较大，网速较慢的访问者，尤为明显。

第六 条：将Script脚本放置在源文件底部(Frontend)

    在第二条中提到浏览器在同一主机上平行下载的进程是有限制的，HTTP/1.1规范中指定的是两个。
    如果在页面下载进程中遇到了Scripts的下载，则它会将这种平行下载阻断，导致页面加载更慢。

第七 条：避免使用CSS表达式(Frontend)

    不兼容
    监听评估导致页面性能低下，移动一次鼠标可能导致超过10,000次的评估。

第八条：将JavaScript和CSS全部放置到外部文件 进行调用(Frontend)
    减小主文件大小，加快page加载速度
    对XHTML进行兼容
    可作为静态文件分发到CDN
    可缓存
    可共用

第九条：减少DNS查询 （Frontend）

    Domain Name System，域名系统，它将主机映射到某个IP地址。
    当我们输入一个网址的时候，DNS会分析该网址，然后转换到具体的IP，这个过程大概会花20-120毫秒
    显然，如果DNS的查找能够进行缓存，将会提高站点的访问速度。
    当我们访问一个页面时，该页的URL，images,script,stylesheet,flash等等都会有一个DNS查询的过程
    如果我们能够减少该页面上出现多个不同的主机地址，就可以减少DNS的查询
    这样就会和之前讲到的平行下载有冲突，减少DNS查询会减少页面响应时间，
    但是降低了平行下载数量，则会增大页面响应时间，
    平衡的做法是，将所有静态文件分离到至少1个独立的主机，最多不超过4个。

第十条：最小化 JavaScript和CSS

    将JavaScript和CSS中任何多余的字符移除，如：注释，换行，排版用的空格等等
    减少文件大小，加速下载进度。

第十一条：避免重定向(Frontend)

    重定向将导致用户响应时间增加
    使用具体的URL
    如果一定要重定向，可使用标准的3xx HTTP状态码

第 十二条：移除重复的脚本

    使用外部脚本文件
    引入这些脚本文件时给文件名加上版本号
    <script type="text/javascript" src="menu_1.0.17.js"></script>
    养成提取公共方法，公共类的习惯
    在编码的过程中，如果发现某段代码至少有两个地方用到，而且代码量挺大的，
    就可以考虑将这部分代码提取成为公共的方法，在编写CSS的时候同样适用。

第十三条：配置ETag

    ETag，Entity tags的简称，
    它用来确定在浏览器向服务端请求一个组件时判断缓存的组件与服务器上的是否仍然还是同一份（即没有更改过）。
    Entity，其实就是“组件”的另一种说法，也就是images,scripts,stylesheets等等这些东西。   
    ETag的值由 INode（索引节点）, Size和MTime（最后修改时间）决定。
    由于这个INode在不同的服务器上是不同的，所以导致同一个组件会有不同的ETag，
    这就使得该组件不能发送304的状态，没有办法被用户缓存
    由于这个原因，在大型多服务器的站点，一般建议将ETag配置关闭
    如果可以保证各服务器对同一组件生成相同的ETag，则完全可以使用。

第十四条：缓存AJAX请求

    根据业务类型，为处理AJAX请求的Action文件的设置合适的到期时间
        动态更新AJAX请求的URL，如，给这个URL后面加上一个更新时间，如：
        &t=1190241612，只在请求的数据发生变化时动态修改该URL地址。

后续二十一条下次再过一遍! ^_^

High Performance Web Sites.ppt

ECMA262深入浅出

ECMA-262简述

ECMAScript语言概述

ECMAScript对象概述(原型链Prototype Chain)

ECMA-262主要术语

ECMAScript执行环境(作用域链Scope Chain，闭包机制)

ECMAScript函数(new原理)

ECMAScript内部属性(参考)

ECMAScript执行环境作用域链图示

ECMA-262参考资料

 

 

Agenda

更简洁的用户操作

更细化的领域分工

更低的合作耦合度

用户

WEB2.0因用户创造分享内容而兴起，就前端部分来讲，不得不将用户的感受纳入到考量的范围。

观察互联网发展趋势，为用户提供更简洁，明了的服务（功能）页面是越来越值得重视的。

由论坛到博客，博客到社交网络，社交网络到微博，这是一条很清晰的发展路线。

用户是“懒惰”的，不论我们做什么产品，对和用户直接打交道的前端来讲，保持一个简洁明了的使用方式，是非常重要的。

开发人员

WEB2.0的另一个较为显著的特征就是“快”。

从有一个好点子开始，到推出这个产品，只要非常短的时间；

用户的访问速度也更快，页面加载、数据传输，都可以在很短的时间内完成；

要达到这些要求，对开发人员来讲，他们需要更细致的分工。

DBA，架构师，后端开发，前端开发，用户体验设计，美工设计等等职能部门的细化是必不可少的。

从某个部门内部甚至都可以进行分工的再细化，就如前端部分，在恰当的时机，可以更细化为：更关注语义化的、健壮的HTML架构的部分开发人员 更关注CSS兼容、更新的部分开发人员 更关注JavaScript性能优化的部分开发人员

让每个人做自己最擅长的事，是我们值得学习的一种管理模式，这不仅对开发人员的职业规划有促进作用，更能为企业发展，达成World Class的开发团队夯实基础。

开发人员

为了达到从“点子”到“产品”的快，开发人员必须实现低耦合度的合作。

各部门同步开发，无疑是最能提升开发效率的，但这需要一系列的前提作为保障。

明确的需求，统一的开发、测试标准成为这一开发模式的重要前提！

就前端部分来讲，明确的需求和统一的开发、测试标准可以理解为UI给出的各页面最终设计效果图、交互效果图和UI Spec，这三部分必须作为前端开发和QA测试的统一标准。

后端部分可以更多的考虑数据API的开发，完全不需要考虑任何前端的结构（需要与前端部分达成数据需求意见）。

前后端开发的解耦是WEB开发过程中的重要突破，我们应该全力去实现这种开发模式。

PPT下载：Web2.0 in F2E.ppt

高效WEB开发团队建设.ppt

作者： KeeKim Heng, Google Web Developer

翻译：http://www.blogjava.net/emu/archive/2010/03/01/314185.html

在我们开发互联网富应用（RIA）时，我们经常写一些javascript脚本来修改或者增加页面元素，这些工作最终是DOM——或者说文档对象模 型——来完成的，而我们的实现方式会影响到应用的响应速度。

DOM操作会导致浏览器重解析(reflow)，这是浏览器的一个决定页面元素如何展现的计算过程。直接修改DOM，修改元素的CSS样式，修改浏 览器的窗口大小，都会触发重解析。读取元素的布局属性比如offsetHeithe或者offsetWidth也会触发重解析。重解析需要花费计算时间， 因此重解析触发的越少，应用就会越快。

DOM操作通常要不就是修改已经存在的页面上的元素，要不就是创建新的页面元素。下面的4种优化方案覆盖了修改和创建DOM节点两种方式，帮助你减 少触发浏览器重解析的次数。

方案一：通过CSS类名切换来修改DOM 

这个方案让我们可以一次性修改一个元素和它的子元素的多个样式属性而只触发一次重解析。

需求：

（emu注：原文作者写到这里的时候脑子显然短路了一下，把后面的Out-of-the-flow DOM Manipulation模式要解决的问题给摆到这里来了，不过从示范代码中很容易明白作者真正想描述的问题，因此emu就不照翻原文了）

我们现在需要写一个函数来修改一个超链接的几个样式规则。要实现很简单，把这几个规则对应的属性逐一改了就好了。但是带来的问题是，每修改一个样式 属性，都会导致一次页面的重解析。

解决方案

要解决这个问题，我们可以先创建一个样式名，并且把要修改的样式规则都放到这个类名上，然后我们给超链接添加上这个新类名，就可以实现添加几个样式 规则而只触发一次重解析了。这个模式还有个好处是也实现了表现和逻辑相分离。

（emu注：作者在这里再次脑子短路，把DocumentFragment DOM Generation模式的介绍提前到这里来了，emu只好再次发挥一下）
上一个方案解决的是修改一个超链接的问题，当一次需要对很多个超链接进行相同修改的时候，这个方案就可以大显身手了。

需求

需求是这样的，我们要写一个函数来修改一个指定元素的子元素中所有的超链接的样式名（className）属性。要实现很简单，我们可以通过遍历每 个超链接并且修改它们的样式名来完成任务。但是带来的问题就是，每修改一个超链接都会导致一次重解析。

解决方案

要解决这个问题，我们可以把被修改的指定元素从DOM里面移除，再修改所有的超链接，然后在把这个元素插入回到它原来的位置上。为了完成这个复杂的 操作，我们可以先写一个可重用的函数，它不但移除了这个DOM节点，还返回了一个把元素插回到原来的位置的函数。

有了上面这个函数，现在我们就可以在一个不需要解析渲染的元素上面修改那些超链接了。这样只在移除和插入元素的时候各触发一次重解析。

方案三：一次性的DOM元素生成

这个方案让我们创建一个元素的过程只触发一次重解析。在创建完元素以后，先进行所有需要的修改，最后才把它插入到DOM里面去就可以了

需求

需求是这样的，实现一个函数，往一个指定的父元素上插入一个超链接元素。这个函数要同时可以设置这个超链接的显示文字和样式类。我们可以这样做：创 建元素，插入到DOM里面，然后设置相应的属性。这就要触发3次重解析。

解决方案

很简单，我们只要把插入元素这个操作放到最后做，就可以只进行一次重解析了。

不过，要是我们想要插入很多个超链接到一个元素里面的话，那么这个做法还是有问题：每插入一个超链接还是要触发一次重解析。下一个方案可以解决这个 问题。

方案四：通过文档片段对象（DocumentFragment）创建一组元素

这个方案允许我们创建并插入很多个元素而只触发一次重解析。要实现这点需要用到所谓的文档片段对象（DocumentFragment）。我们先在 DOM之外创建一个文档片段对象（这样它也就不需要解析和渲染），然后我们在文档片段对象中创建很多个元素，最后我们把这个文档片段对象中所有的元素一次 性放到DOM里面去，只触发一次重解析。

需求

我们要写一个函数，往一个指定的元素上面增加10个超链接。如果我们简单的直接插入10个超链接到元素上面，就会触发10次重解析。

解决方案

要解决这个问题，我们要先创建一个文档片段对象，然后把每个新创建的超链接都插入到它里面去。当我们把文档片段对象用appendChild命令插 入到指定的节点时，这个文档片段对象的所有子节点就一起被插入到指定的元素里面，而且只需要触发一次重解析。

之前对这里是充满了很高的期望的。

晚上8点多到达，然后乘公车来到同事家。由于是晚上吧，感觉整个城市有点偏暗，另外，公车司机素质貌似与深圳那边的同行们有一定的差距，需要多多学习提高。

次日，随同事简单逛到了京杭大运河边上，看到河面上来往频繁的货轮和客轮，没想到，这条古运河仍然充满了活力，赞！

旁边是环球中心和浙江省博物馆，进到博物馆看看，布置的很有感觉，下次记得带相机去。

今天办理入职，一切顺利！^_^

自适应父节点大小类 - ARBox

在线演示：http://www.jslab.org.cn/?tag=AutoSizeBox

 在处理border的时候遇到了浏览器兼容的问题，给我们“找麻烦”的是Opera同学！

问题描述：

有DOM对象：dobj，当此对象未设置border样式的时候，我们通过dobj.currentStyle.borderWidth得到的值会是3，当我们设置此对象的border:none时，dobj.currentStyle.borderWidth仍然会是3。

当然，在浏览器渲染的时候并不会因为此问题而将border显示出来，因为borderStyle和borderColor都没有设置。

可以考虑在以后的CSS书写中，将border:none更改为border:0，这样就可以保证各浏览器在JS取border值时的一致了。

在easyui.getmpb中对opera的此问题单独做了修正，所以可以放心使用。^_^

最近更新了EasyUI及相关组件，dhATV4有重大更新！

兼容处理：

手动输入事件捕获：手动输入内容时会触发

复制粘贴事件捕获：复制粘贴内容时会触发

程序设置事件捕获：javascript程序动态设置内容时会触发

拖入事件捕获：选定内容拖入时会触发

原型代码：

var easychange = function(foochange){
    if(!foochange||foochange.constructor!=Function){return;}
    try{this.watch("value",function(id,oldval,newval){foochange(newval);return newval;});}catch(e){}
    this.setAttribute('oninput','('+foochange.toString()+')(this.value)');
    this.onpropertychange = function(){foochange(this.value);};
    this.onmousemove = function(){foochange(this.value);};
    this.onkeyup = function(){foochange(this.value);};
};

在线演示：http://www.jslab.org.cn/?tag=easyChange

/*Bresenham画圆算法*/
var arc = function(x0,y0,r){/*起点坐标x0,y0,半径*/
 var p,x,y,i,ret = [];
 p = 3-2*r,x = 0,y = r,i = r;
 for(;x<=y;){
  ret.push([x+i+x0,y+i+y0]);
  ret.push([-x+i+x0,-y+i+y0]);
  ret.push([-x+i+x0,y+i+y0]);
  ret.push([x+i+x0,-y+i+y0]);
  ret.push([y+i+x0,x+i+y0]);
  ret.push([-y+i+x0,x+i+y0]);
  ret.push([-y+i+x0,-x+i+y0]);
  ret.push([y+i+x0,-x+i+y0]);
  if(p<0){
   p = p+4*x+6;
  }else{
   y--,p = p+4*(x-y)+10;
  }
  x++;
 }
 return ret.slice(0);
};

/*Bresenham画椭圆算法*/
var ellipse = function(px,py,rx,ry){/*起点坐标px,py,x轴半径rx,y轴半径ry*/
 px = px+rx,py = py+ry;
 var x = 0,y = ry,rx2 = rx*rx,ry2 = ry*ry,ret = [];
 var dx = ry2/Math.sqrt(ry2+rx2),p = ry2-rx2*ry;
 while(dx<=y){
  ret.push([px+x,py+y]);
  ret.push([px+x,py-y]);
  ret.push([px-x,py+y]);
  ret.push([px-x,py-y]);
  if(p<=0){
   ++x;
  }else{
   ++x,--y;
  }
  p = ry2*(x+1)*(x+1)+rx2*(y*y-y)-rx2*ry2;
 }
 p = ry2*(x*x+x)+rx2*(y*y-y)-rx2*ry2;
 while(y>0){
  ret.push([px+x,py+y]);
  ret.push([px+x,py-y]);
  ret.push([px-x,py+y]);
  ret.push([px-x,py-y]);
  if(p>=0){
   --y,p = p-2*rx2*y-rx2;
  }else{
   --y,++x,p = p-2*rx2*y-rx2+2*ry2*x+2*ry2;
  }
 }
 ret.push([px+x,py]);
 ret.push([px-x,py]);
 return ret.slice(0);
};

/*Bresenham画直线算法*/
var line = function(x1,y1,x2,y2){/*起点坐标x1,y1,终点坐标x2,y2*/
 var dx,dy,h,x,y,t,ret = [];
 if(x1>x2){x1 = [x2,x2=x1][0],y1 = [y2,y2=y1][0];}
 dx = x2-x1,dy = y2-y1,x = x1,y = y1;
 if(!dx){
  t = (y1>y2)?-1:1;
  while(y!=y2){ret.push([x,y]);y += t;}
  return ret.slice(0);
 }
 if(!dy){
  while(x!=x2){ret.push([x,y]);x++;}
  return ret.slice(0);
 }
 if(dy>0){
  if(dy<=dx){
   h = 2*dy-dx,ret.push([x,y]);
   while(x!=x2){
    if(h<0){
     h += 2*dy;
    }else{
     y++,h += 2*(dy-dx);
    }
    x++,ret.push([x,y]);
   }
  }else{
   h = 2*dx-dy,ret.push([x,y]);
   while(y!=y2){
    if(h<0){
     h += 2*dx;
    }else{
     ++x,h += 2*(dx-dy);
    }
    y++,ret.push([x,y]);
   }
  }
 }else{
  t = -dy;
  if(t<=dx){
   h = 2*dy+dx,ret.push([x,y]);
   while(x!=x2){
    if(h<0){
     h += 2*(dy+dx),y--;
    }else{
     h += 2*dy;
    }
    x++,ret.push([x,y]);
   }
  }else{
   dy = -dy,dx = -dx,y = y2,x = x2,ret.push([x,y]),h = 2*dx+dy;
   while(y!=y1){
    if(h<0){
     h += 2*(dx+dy),x--;
    }else{
     h += 2*dx;
    }
    y++,ret.push([x,y]);
   }
  }
 }
 return ret.slice(0);
};
 

参见：Bresenham直线,圆,椭圆算法

W3C Editor's Draft 21 October 2009

The canvas interface element

interface CanvasElement : Element {
      attribute unsigned long width;
      attribute unsigned long height;

      Object getContext(in DOMString contextId);//2d

      DOMString toDataURL(optional in DOMString type, in any... args);
      //image/png, quality level 0.0 to 1.0 ...
};

The 2D Drawing Context

interface CanvasRenderingContext2D {

  // back-reference to the canvas 
  readonly attribute HTMLCanvasElement canvas;

  // state 
  void restore(); // pop state stack and restore state
  void save(); 	  // push state on state stack 
        
  // transformations (default transform is the identity matrix)
  void rotate(in float angle);
  void scale(in float x, in float y);

  void setTransform(in float m11, in float m12, in float m21, in float m22, 
  in float dx, in float dy);

  void transform(in float m11, in float m12, in float m21, in float m22, 
  in float dx, in float dy);

  void translate(in float x, in float y);
        
  // compositing 
  attribute float globalAlpha; // (default 1.0)
  attribute DOMString globalCompositeOperation; // (default source-over)
        
  // colors and styles 
  attribute any fillStyle; // (default black)
  attribute any strokeStyle; // (default black)
  CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);

  CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, 
  in float y1, in float r1);

  CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
  CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
  CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

  // line styles 
  attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
  attribute DOMString lineJoin; // "miter", "round", "bevel"  (default "miter")
  attribute float lineWidth; // (default 1)
  attribute float miterLimit; // (default 10)

  // shadows 
  attribute float shadowBlur; // (default 0)
  attribute DOMString shadowColor; // (default transparent black)
  attribute float shadowOffsetX; // (default 0)
  attribute float shadowOffsetY; // (default 0)

  // rects 
  void clearRect(in float x, in float y, in float w, in float h);
  void fillRect(in float x, in float y, in float w, in float h);
  void strokeRect(in float x, in float y, in float w, in float h);

  // Complex shapes (paths) API 
  void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle,
  in boolean anticlockwise);

  void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
  void beginPath();

  void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x,
  in float y);

  void clip();
  void closePath();
  void fill();
  void lineTo(in float x, in float y);
  void moveTo(in float x, in float y);
  void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
  void rect(in float x, in float y, in float w, in float h);
  void stroke();
  boolean isPointInPath(in float x, in float y);

  // text 
  attribute DOMString font; // (default 10px sans-serif)
  attribute DOMString textAlign; // "start", "end", "left", "right",
  "center" (default: "start")

  attribute DOMString textBaseline; // "top", "hanging", "middle",
  "alphabetic", "ideographic","bottom" (default: "alphabetic")

  void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);
  TextMetrics measureText(in DOMString text);
  void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);

  // drawing images 
  void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw,
  in float dh);

  void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float
  sh, in float dx, in float dy, in float dw, in float dh);

  void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw,
  in float dh);

  void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw,
  in float sh, in float dx, in float dy, in float dw, in float dh);

  void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw,
  in float dh);

  void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw,
  in float sh, in float dx, in float dy, in float dw, in float dh);

  // pixel manipulation
  ImageData createImageData(in float sw, in float sh);
  ImageData createImageData(in ImageData imagedata);
  ImageData getImageData(in float sx, in float sy, in float sw, in float sh);
  void putImageData(in ImageData imagedata,in float dx,in float dy,optional in float dirtyX,
  in float dirtyY, in float dirtyWidth, in float dirtyHeight);
};

interface CanvasGradient {
  // opaque object 
  void addColorStop(in float offset, in DOMString color);
};

interface CanvasPattern {
  // opaque object
};

interface TextMetrics {
  readonly attribute float width;
};

interface ImageData {
  readonly attribute CanvasPixelArray data;
  readonly attribute unsigned long height;
  readonly attribute unsigned long width;
};

interface CanvasPixelArray {
  readonly attribute unsigned long length;
  getter octet (in unsigned long index);
  setter void (in unsigned long index, in octet value);
};
}

See also: http://dev.w3.org/html5/canvas-api/canvas-2d-api.html

Easy Canvas Painter Demo

依赖
    http://www.easyui.org.cn/easyui.js
    http://www.easyui.org.cn/easydragdrop.js

实例化
    new easySlider(100,0,100,46,'left','easyslider/',dalpha);
    new easySlider(默认值，起始值，结束值，上下左右四个方向，滑块样式目录，父节点)

事件
    ondrag
    滑块实例.ondrag = function(n){};
    参数n由滑块对象自动传出，只要指定该形参即可使用。

方法
    setValue(整数值value)
    getValue()

EasySlider在线演示：http://www.easyui.org.cn/easyslider.html

祝大家新年快乐！

Happy New Year!

开启2010新年JavaScript霓虹灯!

燃放2009新年JavaScript烟火!

先上图，简单制作了4种皮肤：圣诞、WIN32系统图标、中国风和CSDN水园头像代表 ^_^

Swap X，不知道要为这个游戏取个什么名字，貌似没有专门的名字，有的叫魔法寿司，有的叫碰碰球，不同的实现有不同的名字，只好通过它的游戏方式来给它命名了，通过交换两个东东来消除相同的部分，所以就叫它Swap X了。

游戏规则：

通过交换水平及垂直方向上的两个物件，如果交换后的行或列中有连续3个（视具体实现而定，有的是4个）相同的，则消除它们，然后填充消除的部分，继续游戏。

所以，在这个游戏中，我们至少要有一个能够找出这些相同物件的算法，而且，考虑到有时候消除后，游戏界面中可能不存在可以继续消除的玩法了，这时候，我们还会需要一个能够检测游戏界面中是否还能继续玩下去的算法，这个算法可以同时用在游戏提示上。比如，使用提示时，则提示玩家某个物件可以进行交换。

查找相同数据的算法仍然沿用了上一个游戏“玛丽医生”中的算法（参见：http://www.jslab.org.cn/?tag=getsamelistfrommartix），在本游戏中只做了一点点改变，即加上了起始维数。因为本游戏中的数据格式由两部分组成，hide区域数据和show区域数据。

整个游戏是一个完整的表格，通过对折，将上半部分划分为hide区域，下半部分划分为show区域。

hide区域被用作预存下一次需要掉落到show区域中被消除的空格中去的数据，此部分对玩家不可见。

show区域则作为玩家的操作界面。

为了保持数据的连贯性，在算法中，我们对这两个区域的数据还是视为整个表格的数据，以免未来在不同的数据栈中切换操作，所以，查找相同数据算法及后面的检测是否可以继续交换的算法都有一个起始维数用于对该数据进行切割，以取到游戏操作部分的数据。

由于本游戏使用Table元素作为游戏原型，所以在处理掉落及交换的时候，视觉效果不太好处理。虽然可以加上一些额外的补偿，不过由于偶比较懒，凑合着能玩，就没去做这部分优化了。

好了，一起来试试这个游戏吧：

http://www.v-ec.com/games/swapx/default.htm

思想：

4个数字的排列，加上3个运算符的排列，使用后缀表达式的表现如下：

情形一：

1,2,3,4,+,-,* => 24*24*4

情形二：

1,2,3,+,4,-,* => 24*24*4

情形三：

1,2,3,+,-,4,* => 24*24*4

情形四：

1,2,+,3,-,4,* => 24*24*4

情形五：

1,2,+,3,4,-,* => 24*24*4

每种表现形式后面的24为4个数字的排列，4个运算符的排列，后面的4为运算符可能出现的4种情形，以第一种情况为例：

1,2,3,4,+,-,*

1,2,3,4,+,-,+

1,2,3,4,+,+,-

1,2,3,4,+,+,+

至此，大概的算法思想可以总结如下：

声明数据栈ds，保存要计算数字的排列结果；

声明算符栈os，保存四则算符的排列结果；

遍历数据栈，每次按上面列出的后缀表达式数据格式，通过遍历算符栈进行整理组合，直到结束，即可得到所有的计算表达式。

将这些表达式求值，将符合要求（即等于24，由于计算精度问题，大于23.99的结果也算正确）的结果保留，最后还需要一个将后缀表达式转换为中缀表达式的过程。

参见：

JavaScript版后缀表达式(逆波兰式)24点算法实现

编译原理-中缀表达式转后缀表达式(逆波兰式)

生硬的全排列组合表达式实现24点算法

3 + 4 * 5 - 6;
OS	DS
	3
+	3
+	34
*+	34
*+	345
+	345*
-	345*+
-	345*+6
	345*+6-


插入运算符 o 时，

如果优先级 o>OS[0]，

则：遇到')'时，o2 = OS.shift(),DS.push(o2),DS.shift()，否则OS.unshift(o)；

否则o2 = OS.shift(),DS.push(o2),OS.unshift(o)，连续判断，直到OS[0]优先级>o；


例

   
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #

1
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
  ↑
  OS       	DS
                   3
 
2
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
    ↑
  OS       	DS
   +              3
 
3
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
      ↑
  OS       	DS
   +              3 4

4
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
        ↑
  OS       	DS
   / 
   +              3 4

5
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
          ↑
  OS       	DS
   (
   / 
   +               3 4

6
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
            ↑
  OS       	DS
   (
   / 
   +               3 4 25

7
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
               ↑
  OS       	DS
   －
   (
   / 
   +               3 4 25

8
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                 ↑
  OS       	DS

   (
   －
   (
   / 
   +               3 4 25

9
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                   ↑
  OS       	DS
   (
   －
   (
   / 
   +               3 4 25 6


10
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                     ↑
 
  OS       	DS
   *
   (
   －
   (
   / 
   +               3 4 25 6

11
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                       ↑
  OS       	DS
  
   *
   (
   －
   (
   / 
   +               3 4 25 6 5

12
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                         ↑
  OS       	DS
   －
   (
   / 
   +               3 4 25 6 5 *

12
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                           ↑
  OS       	DS
   / 
   +               3 4 25 6 5 * -

13
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                              ↑
  OS       	DS
   * 
   +               3 4 25 6 5 * - /

14
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                                ↑
  OS       	DS
   * 
   +               3 4 25 6 5 * - / 8


15
  3 + 4 / ( 25 - ( 6 * 5 ) )  * 8 #
                                  ↑
  OS       	DS
                  3 4 25 6 5 * - / 8 * +

 <script type="text/javascript">

//中缀表达式转后缀表达式
var ie2se = function(mExp){
	var exp2array = function(exp){
		var ret = [];
		exp.replace(/([^\d])|(\d*)/g,function(s,a,b){if(a){ret.push(a);}if(b){ret.push(b)}});
		return ret.slice(0);
	};
	//将中缀表达式打散为数组形式
	var remExp = exp2array(mExp);
	//运算符栈和数据栈
	var OS = [],DS = [];
	//换算运算符优先级
	var r = /(?:([+-])|([*\/])|([\(\)]))/;
	var getPRI = function(o){
		r.test(o);
		return RegExp.$2?1:RegExp.$3?2:0;
	};
	var tmpItem = null,OSTop = null,pti = 0,ptt = 0;
	while(remExp.length){
		//取剩余表达式中第一个元素
		tmpItem = remExp.shift();
		OSTop = OS[0];
		if(isNaN(tmpItem)){//运算符
			pti = getPRI(tmpItem);
			ptt = getPRI(OSTop);
			if(pti>ptt){//优先级高于OS[0]
				if(tmpItem!=')'){//运算符不是右括号
					OS.unshift(tmpItem);
				}else{
					DS.push(OS.shift());
					OS.shift();//丢掉'(';
				}
			}else{//优先级低于或等于OS[0]
				//循环判断，直至OS[0]优先级大于当前运算符
				while(OS.length&&OS[0]!='('&&pti<=getPRI(OS[0])){
					DS.push(OS.shift());
				}
				OS.unshift(tmpItem);
			}
		}else{//数据
			DS.push(tmpItem);
		}
	}
	//剩余表达式为空后，将OS栈的元素都push到DS栈
	while(OS.length){DS.push(OS.shift());}
	return DS.slice(0);
};

//后缀表达式求值
var suffix_compute = function(suffixExp){
	var ret = suffixExp.slice(0);
	while(ret.length>1){
		var idx = 0;//第一个运算符出现的位置
		for(var i=0;i<ret.length;i++){if(isNaN(ret[i])){idx = i-2;break;}}
		//取出该位置前及其前两个元素
		var a = ret.splice(idx,1);
		var b = ret.splice(idx,1);
		var o = ret.splice(idx,1);
		//计算
		var e = eval('('+a+')'+o+'('+b+')');
		//计算结果插入到该位置
		ret.splice(idx,0,e);
	}
	return ret[0];
};

var me = '3+4/(25-(6*5))*8';
var se = ie2se(me);
var d = suffix_compute(se);
document.write('<h3>中缀表达式转后缀表达式计算结果：</h3>'+me+' = '+eval(me)+'<br/>'+se+' = '+d);
</script>

 ECMA信息标准化和通信系统

 ECMAScript语言说明

联系方式： 电话：+41 22 849.60.00 传真：+41 22 849.60.01 网址：http://www.ecma.ch 邮箱：helpdesk@ecma.ch

翻译：W3CGROUP 杜欢(dh20156, 2009年11月)  

个人能力精力有限，欢迎大家批评指正，转载请注明出处！

历史提要

本标准的制定基于多个现有的技术，其中最著名的是JavaScript(Netscape)和JScript(Microsoft)。该语言是由当时在Netscape公司的Brendan Eich创造的，它第一次发布在该公司的Navigator2.0的浏览器中，并且在随后的所有版本浏览器中都有发布，微软公司在IE3.0的时候才开始引入并在以后的所有版本中使用它。

本标准的发展始于1996年11月。第一版在1997年6月被ECMA General Assembly采纳。

本标准在1998年4月通过快速通道提交到ISO/IEC JTC 1并被采纳为国际标准ISO/IEC 16262。第一版和第二版之间的编辑有着本质的变化。

本文档是标准第三版的定义，包括了强大的正则表达式，更好的字符串处理，新的控制语句，try/catch例外处理，更简洁明了的错误信息，格式化数字输出，并对即将到来的国际化工具和未来的语言增长进行了微调。

对该语言的工作还没有结束，科技委员会正在做具有重大意义的优化，包括在互联网上创建和使用脚本的机制，和其他的标准相互协调，比如W3C组织和无线应用协议论坛等等。

本标准在1999年11月被ECMA General Assembly接受采纳为ECMA-262第3版。

目录

1. 范围
2. 一致性
3. 参考
4. 概述
4.1 WEB脚本
4.2 语言概述
4.2.1 对象
4.3 定义
4.3.1 类型
4.3.2 原始值
4.3.3 对象
4.3.4 构造函数
4.3.5 原型
4.3.6 原生对象
4.3.7 内置对象
4.3.8 宿主对象
4.3.9 Undefined值
4.3.10 Undefined类型
4.3.11 Null值
4.3.12 Null类型
4.3.13 Boolean值
4.3.14 Boolean类型
4.3.15 Boolean对象
4.3.16 String值
4.3.17 String类型
4.3.18 String对象
4.3.19 Number值
4.3.20 Number类型
4.3.21 Number对象
4.3.22 Infinity
4.3.23 NaN
5. 符号约定
5.1 语法和词法
5.1.1 上下文无关文法
5.1.2 RegExp正则表达式的词汇和语法
5.1.3 数字、字符串语法
5.1.4 语法句法
5.1.5 语法符号
5.2 算法约定
6. 源文
7. 词法约定
7.1 Unicode 格式字符
7.2 空格
7.3 行尾
7.4 注释
7.5 特征
7.5.1 保留字
7.5.2 关键词
7.5.3 未来保留字
7.6 标识符
7.7 标点
7.8 字面量
7.8.1 Null字面量
7.8.2 Boolean字面量
7.8.3 Numeric字面量
7.8.4 String字面量
7.8.5 正则表达式字面量
7.9 自动插入分号
7.9.1 自动插入分号规则
7.9.2 自动插入分号示例
8. 类型
8.1 Undefined类型
8.2 Null类型
8.3 Boolean类型
8.4 String类型
8.5 Number类型
8.6 Object类型
8.6.1 property属性
8.6.2 内部propertys和methods
8.7 引用类型
8.7.1 GetValue(V)
8.7.2 PutValue(V,W)
8.8 List类型 8.9 Completion类型
9. 类型转换
9.1 转为原始(primitive)类型
9.2 转为Boolean类型
9.3 转为Number类型
9.3.1 String类型转为Number类型
9.4 转为整型
9.5 转为32位整型
9.6 转为32位无符号整型
9.7 转为16位无符号整型
9.8 转为String类型
9.8.1 Number类型转为String类型
9.9 转为Object
10. 执行环境
10.1 定义
10.1.1 函数对象
10.1.2 可执行代码类型
10.1.3 变量
10.1.4 作用域链和标识符确定
10.1.5 全局对象
10.1.6 活动对象
10.1.7 This
10.1.8 Arguments对象
10.2 进入执行环境
10.2.1 全局代码
10.2.2 Eval代码
10.2.3 函数代码
11. 表达式
11.1 基本表达式
11.1.1 this关键字
11.1.2 标识符引用
11.1.3 字面量引用
11.1.4 Array初始化程序
11.1.5 Object初始化程序
11.1.6 分组操作
11.2 Left-Hand-Side表达式
11.2.1 Property访问器
11.2.2 new操作符
11.2.3 函数调用
11.2.4 参数列表
11.2.5 函数表达式
11.3 后缀表达式
11.3.1 后缀+ 运算符
11.3.2 后缀- 运算符
11.4 一元运算符
11.4.1 delete操作符
11.4.2 void操作符
11.4.3 typeof操作符
11.4.4 前缀+ 运算符
11.4.5 前缀- 运算符
11.4.6 一元+ 运算符
11.4.7 一元- 运算符
11.4.8 按位非运算符~
11.4.9 逻辑非运算符!
11.5 乘除法运算
11.5.1 * 运算符
11.5.2 / 运算符
11.5.3 % 运算符
11.6 加减法运算
11.6.1 加法 + 运算符
11.6.2 减法 - 运算符
11.6.3 数字加减运算
11.7 位运算
11.7.1 左移 << 运算符
11.7.2 右移 >> 运算符
11.7.3 无符号右移 >>> 运算符
11.8 比较运算
11.8.1 小于 < 运算符
11.8.2 大于 > 运算符
11.8.3 小于等于 <= 运算符
11.8.4 大于等于 >= 运算符
11.8.5 抽象关系比较算法
11.8.6 instanceof运算符
11.8.7 in运算符
11.9 相等比较
11.9.1 相等运算符 ==
11.9.2 不等运算符 !=
11.9.3 抽象相等比较算法
11.9.4 严格相等运算符 ===
11.9.5 严格不等运算符 !==
11.9.6 严格相等比较算法
11.10 二进制位运算
11.11 二进制逻辑运算
11.12 条件运算符 ?:
11.13 分配运算
11.13.1 直接分配 =
11.13.2 混合分配 op=
11.14 逗号运算符
12 语句
12.1 Block
12.2 变量语句
12.3 空语句
12.4 表达式语句
12.5 if语句
12.6 循环语句
12.6.1 do-while语句
12.6.2 while语句
12.6.3 for语句
12.6.4 for-in语句
12.7 continue语句
12.8 break语句
12.9 return 语句
12.10 with语句
12.11 switch语句
12.12 标签语句
12.13 throw语句
12.14 try语句
13. 函数定义
13.1 定义
13.1.1 等于语法操作
13.1.2 连接对象
13.2 创建函数对象
13.2.1 [[Call]]
13.2.2 [[Construct]]
14. 程序
15. ECMAScript原生对象
15.1 全局对象
15.1.1 全局对象值属性
15.1.2 全局对象函数属性
15.1.3 URI处理函数属性
15.1.4 全局对象构造器属性
15.1.5 全局对象其他属性
15.2 Object对象
15.2.1 Object构造函数调用
15.2.2 Object构造器
15.2.3 Object构造器属性
15.2.4 Object原型对象属性
15.2.5 Object实例属性
15.3 Function对象
15.3.1 Function构造函数调用
15.3.2 Function构造器
15.3.3 Function构造器属性
15.3.4 Function原型对象属性
15.3.5 Function实例属性
15.4 Array对象
15.4.1 Array构造函数调用
15.4.2 Array构造器
15.4.3 Array构造器属性
15.4.4 Array原型对象属性
15.4.5 Array实例属性
15.5 String对象
15.5.1 String构造函数调用
15.5.2 String构造器
15.5.3 String构造器属性
15.5.4 String原型对象属性
15.5.5 String实例属性
15.6 Boolean对象
15.6.1 Boolean构造函数调用
15.6.2 Boolean构造器
15.6.3 Boolean构造器属性
15.6.4 Boolean原型对象属性
15.6.5 Boolean实例属性
15.7 Number对象
15.7.1 Number构造函数调用
15.7.2 Number构造器
15.7.3 Number构造器属性
15.7.4 Number原型对象属性
15.7.5 Number实例属性
15.8 Math对象
15.8.1 Math值属性
15.8.2 Math函数属性
15.9 Date对象
15.9.1 Date概述和内部操作定义
15.9.2 Date构造函数调用
15.9.3 Date构造器
15.9.4 Date构造器属性
15.9.5 Date原型对象属性
15.9.6 Date实例属性
15.10 RegExp(正则表达式)对象
15.10.1 匹配模式
15.10.2 匹配模式语义
15.10.3 RegExp构造函数调用
15.10.4 RegExp构造器
15.10.5 RegExp构造器属性
15.10.6 RegExp原型对象属性
15.10.7 RegExp实例属性
15.11 Error对象
15.11.1 Error构造函数调用
15.11.2 Error构造器
15.11.3 Error构造器属性
15.11.4 Error原型对象属性
15.11.5 Error实例属性
15.11.6 标准中用到的原生错误类型
15.11.7 NativeError对象结构
16. 错误
附录A - 语法摘要
附录B - 兼容性
 

1.范围

本标准用于定义ECMAScript脚本语言

2.一致性

任何遵照ECMAScript的实现，都必须完全支持本说明中描述的：类型，值，对象，属性，函数，程序语法和语义 (types,values,objects,properties,functions,program syntax,semantics)

任何遵照此国际标准的实现，都必须遵守使用Unicode标准（2.1或以后版本）去解释字符，以ISO/IEC 10646-1 第3级实现中的UCS-2或UTF-16作为编码方式。如果采用的ISO/IEC 10646-1的子集没有指定，它将会是BMP子集300，如果采用的编码方式没有指定，则采用UTF-16的编码方式。

任何遵照ECMAScript的实现，都允许提供一些附加的超过本文档中描述的：类型、值、对象、属性和函数(types, values,objects,properties,functions)，在一些特别的实现中，允许为本文档中描述的对象提供一些本文档中没有定义过的属性和属性值。

任何遵照ECMAScript的实现，都允许提供一些本文档中没有描述过的程序及正则表达式语法，在一些特别的实现中，允许支持在程序语法中使用本文档7.5.3中列出的未来保留关键字。

3.参考

ISO/IEC 9899:1996 Programming Languages-C,包括修正1和勘误表1和2。

ISO/IEC 10646-1:1993 Information Technology -- 通用多八位编码字符集(UCS)及它的修正和勘误部分。

Unicode公司(1996)，Unicode标准，版本2.0，ISBN：0-201-48345-9，加利福尼亚，Menlo Park，Addison-Wesley出版公司。

Unicode公司(1998)，Unicode技术报告#8：Unicode标准，版本2.1。

Unicode公司(1998)，Unicode技术报告#15：Unicode的标准化形式。

ANSI/IEEE标准754-1985：IEEE二进制浮点运算标准。纽约电气电子工程师协会(1985)。

4.概述

本章节包括对ECMAScript语言的非正式概述。

ECMAScript是一种面向对象(object-oriented)的编程语言，用于执行计算和操作在宿主环境中的计算机对象。这里定义的ECMAScript没有被设计为能够自给自足的计算，事实上，在本说明中，没有对要输入的外部数据和要输出的计算结果作出任何规定，相反，我们期望的计算环境是在本说明中描述的ECMAScript程序提供的那些不限于对象和其他的设施，而且，也有一些特别的环境，如宿主对象，对它的描述及行为都超过了本说明的范围，不过，可以知道的是，它们可能会提供一些可以由ECMAScript程序访问的属性和调用的函数。

脚本语言是一种编程语言，它用来操作、自定义、自动化现有系统中的设备。在这些系统中，有用的功能已经可以通过用户接口来使用，而脚本语言就是将这些功能暴露给程序控制的机制。这样，就可以说，现有系统提供了一个运行脚本语言完整功能需要的对象和设备的宿主环境。脚本语言是专门给专业和非专业的编程人员使用的，为了适应非专业的程序员，有些方面多少有些不太严格。

ECMAScript最初的设计是一种网页脚本语言，它为浏览器中网页更活跃提供一种机制，并且，在基于WEB的C/S结构中做呈现服务端计算的这部分操作。ECMAScript可以为各种宿主环境提供核心的脚本性能，因此，本文档指定的核心脚本语言是与所有那些特定宿主环境分离的。

在ECMAScript中的一些设施和其他一些在使用的编程语言类似，如Java和Self，在这些地方有所描述： Gosling,James,Bill Joy和Guy Steele，The Java Language Specification.1996年Addison Wesley出版社。 Ungar,David,Smith和Randall B，Self:The Power of Simplicity.OOPSLA 87会议论文第227-241页，1987年10月Orlando FL.

4.1 网页脚本

网页浏览器提供了一个ECMAScript的宿主环境，用以包含客户端计算。比如，它提供了windows,menus,pop-ups, dialog boxes,text areas,anchors,frames,history,cookies和input/output等对象。此外，该宿主环境还提供了一些绑定脚本代码到事件的方法，如焦点的改变，页面和图像的加载、卸载，错误、忽略，选区，表单提交，鼠标行为等等。脚本代码出现HTML代码中，显示出来的页面由用户接口元素和处理过的文本和图像组成。脚本代码和用户接口发生交互响应而不需要主程序。

网页服务为服务端计算提供了一个不同的宿主环境，包括的对象有requests,clients,files和锁定共享数据的机制。同时使用浏览器端脚本和服务端脚本，通过在客户端和服务端分散计算，使得为用户接口提供一种基于WEB的应用程序成为可能。

所有支持ECMAScript的WEB浏览器和服务，都有自己的宿主环境用于完成ECMAScript的执行环境。

4.2 语言概述

下面是ECMAScript的概要信息（部分），此概述并非标准中的概述。

ECMAScript是基于对象(object-based)的：基本语言，宿主提供对象，ECMAScript程序就是一个对象交互的聚合。 ECMAScript对象(object)的properties是一个无序的集合，有0个或多个属性(attributes)决定哪些property可用，比如，当某个property的ReadOnly属性被设置为true时，任何企图改变该property值的代码将没有效果。properties 是一个包含其他对象的容器，原始值(primitive values)或方法(methods)。原始值属于下列内置(built-in)类型中的一员：Undefined,Null,Boolean,Number和String；对象则是内置类型Object；方法是一个通过property关联到对象的函数。

ECMAScript定义了一个内置对象(built-in objects)集合，使得ECMAScript实体更完善。这些内置对象包括Global 对象，Object对象，Function对象，Array对象，String对象，Boolean对象，Number对象，Math对象，Date对象， RegExp对象和错误对象：Error,EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError。

ECMAScript也定义了一个内置操作符的集合或者说不是，严格地说，是函数和方法。ECMAScript操作符包括了各种一元运算符、乘除运算符、加减法运算符、位移运算符、关系运算符、相等运算符、二元运算符、二元逻辑运算符、分配运算符和逗号运算符。

ECMAScript的语法类似Java的语法。ECMAScript语法宽松是为了使它能够成为更容易使用的脚本语言。比如，变量不需要申明类型也不需要为properties指定类型，函数定义也可以不需要出现在它们的调用语句之前。

4.2.1 对象

ECMAScript没有像C++，Smalltalk，Java等语言中的真正的类，但是支持构造器(constructors)，它在执行代码时创建对象，为对象分配内存并初始化它们全部或部分初始值和properties。所有的构造器都是对象，但不是所有对象都是构造器。每个构造器都有一个Prototype属性用于实现基于原型的继承(prototype-based inheritance)和属性共享(shared properties)。对象在构造器使用new表达式时被创建，比如，new String("A String")创建了一个新的字符串对象。不用new表达式去直接调用一个构造器，结果将依赖于这个构造器，比如，String("A String") 产生一个原始值String，而不是一个对象。

ECMAScript支持基于原型的继承。所有构造器都有一个相关联的原型，所有由构造器创建的对象都隐含一个到该原型的引用（称为对象原型），此外，一个原型可能有一个非空的、隐含的引用，到它的原型，所以，这又被称为是原型链(prototype chain)。当一个引用来自一个对象的property时，它会去该对象和它的原型链中查找与该property 同名的属性，换句话说，会先直接从该对象中检测是否存在这个同名的引用，如果有，则返回，否则，再从该对象的原型(prototype)中去检测是否存在该引用。

在基于类的面向对象语言里，通常，状态由实例持有，方法由类持有，继承只有结构和行为。在ECMAScript中，状态和方法由对象持有，结构、行为和状态都可以被继承。

对象通常都不会直接包含那些由原型包含共享的属性和值。描述见下图：

CF是一个构造函数（同时也是一个对象）。通过对它进行new表达式创建了5个实例对象：cf1,cf2,cf3,cf4,cf5。每个实例对象都包含有q1和q2两个属性。虚线表示隐含的原型关系，所以，比如，CF的原型是CFp，构造函数CF自己有两个属性P1和P2，它们对CFp,cf1,cf2,cf3,cf4,cf5都不可见。CFp的属性CFP1由cf1,cf2,cf3,cf4,cf5共享（不包括 CF），还有那些在CFp的隐含的原型链中找到的property name不是q1,q2或者CFP1的其他属性。注意，CF和CFp之间不存在隐含的原型联系。

不像基于类的对象语言，这里的属性可以由对象动态添加并赋值。因为，构造器不需要名字，或者给构造出的对象的所有或部分属性赋值。如上图，只要为CFp添加一个属性值即可由cf1,cf2,cf3,cf4,cf5共享。

4.3 定义

以下是ECMAScript中主要术语的非正式定义。

4.3.1 Type

type是数据值的集合

4.3.2 Primitive Value

原始值是Undefined,Null,Boolean,Number,String这些类型的成员。原始值是语言实现中底层可以直接表示的数据。

4.3.3 Object

对象是Object类型的成员。它所包含的所有属性成员，如原始值、对象或者函数，是一个无序的集合。对象属性成员放置的函数又被称为方法。

4.3.4 Constructor

构造器是一个函数对象用来创建和初始化对象。每个构造器都有一个关联的原型对象用来实现属性成员的继承和共享。

4.3.5 Prototype

ECMAScript中的原型是用来实现对象结构、状态和行为继承的。当一个构造器构造了一个对象，这个对象会隐含地引用到该构造器关联的原型，为了解析属性的引用。构造器的关联的原型可以通过程序表达式constructor.prototype 来引用。在某个共享的对象的原型上添加的属性值，通过继承，可以被所有其他对象共享。

4.3.6 Native Object

原生对象是由ECMAScript的实现提供的，独立于宿主环境。标准的原生对象会在本说明中定义。其中有些原生对像又是内置对象，其他的那些则可能在执行一个ECMAScript程序时产生。

4.3.7 Built-in Object

内置对象由ECMAScript的实现提供的，独立于宿主环境，出现在ECMAScript程序开始执行的时候。标准的内置对象会在本说明中定义，一些ECMAScript的实现可能有其他的说明和定义。所有的内置对象都是原生对象。

4.3.8 Host Object

宿主对象由给ECMAScript提供完整执行环境的宿主环境提供的。任何对象，不是原生对象，就是宿主对象。

4.3.9 Undefined Value

未定义值是一个原始值，当一个变量没有被分配值时使用。

4.3.10 Undefined Type

Undefined类型有一个正确的值，undefined。

4.3.11 Null Value

空值是一个原始值，它表示空的，没有的，或不存在的引用。

4.3.12 Null Type

Null类型有一个正确的值，null。

4.3.13 Boolean Value

布尔值是Boolean类型的成员，它只能是两个唯一值中的一个，true或false。

4.3.14 Boolean Type

Boolean类型表示一个逻辑实体，由两个唯一值组成。一个是true，另一个是false。

4.3.15 Boolean Object

Boolean对象是Object类型的成员，它是内置对象Boolean的实例。意思是，一个Boolean对象是通过Boolean构造器的 new表达式创建，提供一个boolean参数。结果对象有一个隐含的（未命名）原型boolean。一个Boolean对象支配一个 Boolean值。

4.3.16 String Value

字符串值是String类型的成员，它是一个有限的有序的，由0到16位无符号整数长度的值。注意：尽管每个值通常都表示一个单独的16位的UTF-16文本的单元，但该语言不会做出任何限制和要求当这个值不是 16位无符号整数的情况时。

4.3.17 String Type

String类型是所有字符串值的集合。

4.3.18 String Object

String对象是Object类型的成员，它是内置对象String的实例。意思是，一个String对象是通过String构造器的new 表达式创建，提供一个字符串参数。结果对象有一个隐含的（未命名）原型string。一个String对象可以支配一个字符串值，通过调用String构造器（参见15.5.1）。

4.3.19 Number Value

数字值是Number类型的成员，它是一个直接表示的数字。

4.3.20 Number Type

Number类型是表示数字的值的集合。在ECMAScript中，该集合表示IEEE754的64位双精度运算格式的值，包含一个特殊值"Not-a-Number"(NaN)，正无穷大和负无穷大。

4.3.21 Number Object

Number对象是Object类型的成员，它是内置对象Number的实例。意思是，一个Number对象是通过Number构造器的new 表达式创建，提供一个数字参数。结果对象有一个隐含的（未命名）原型number。一个Number对象可以支配一个数字值，通过调用Number构造器（参见15.7.1）。

4.3.22 Infinity

原始值Infinity表示一个正无穷大的数字，Number类型成员。

4.3.23 NaN

原始值NaN表示IEEE标准"Not-a-Number"值的集合，Number类型成员。

由于需要查找资料，只好简单写了一个PHP的服务端代理页面来用一下！

简单框架页面：

<style type="text/css">
*{margin:0;padding:0;}
html,body{overflow:hidden;}
td{padding:0;vertical-align:top;}
</style>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="width:100%;height:25px;background:#d4d0c8;padding:5px 10px;">
<form method="post" action="action_get.php" target="actioncontent" style="margin:0;padding:0;">
<input type="text" id="targeturl" name="targeturl" style="width:100%;border:1px inset;margin:0;" />
</form>
</td>
<td style="width:180px;height:25px;background:#d4d0c8;padding:5px 10px 5px 0;">
<select style="width:180px;"><option value="">Quick Links</option><option value="http://www.google.com">http://www.google.com</option><option value="http://www.baidu.com">http://www.baidu.com</option><option value="http://www.bing.com">http://www.bing.com</option></select>
</td>
</tr>
<tr>
<td colspan="2">
<iframe name="actioncontent" style="width:100%;height:100%;"></iframe>
</td>
</tr>
</table>
<script type="text/javascript">
window.onload = function(){
    document.getElementById('targeturl').focus();
};
var dform = document.getElementsByTagName('form')[0];
var dselect = document.getElementsByTagName('select')[0];
var dipt = document.getElementById('targeturl');
dselect.onchange = function(){
    if(this.value!=''){
        dipt.value = this.value;
        dform.submit();
    }
};
dform.onsubmit = function(){
    var dv = document.getElementById('targeturl');
    var sv = dv.value.replace(/\s/g,'');
    dv.value = sv;
    return true;
};
</script>

PHP代理页面：

<?php
//使用Snoopy的抓页功能
include "Snoopy.class.php";
//目标URL
$url = $_REQUEST['targeturl'];
//下载类文件列表
$download = array(
    'pdf'=>'application/pdf',
    'rar'=>'application/octet-stream',
    'chm'=>'application/octet-stream',
    'ppt'=>'application/vnd.ms-powerpoint',
    'doc'=>'application/msword',
    'xls'=>'application/vnd.ms-excel',
    'exe'=>'application/octet-stream',
    'gif'=>'image/gif',
    'jpg'=>'image/jpeg',
    'jpeg'=>'image/jpeg',
    'png'=>'image/png'
);
//取文件扩展名
function getextend($file_name){
 $extend = pathinfo($file_name);
 $extend = strtolower($extend["extension"]);
 return $extend;
}
//将所有传递过来的参数列出来
$par = array();
$GetPost = array_merge($_POST,$_GET);
foreach($GetPost As $Key=>$Value){
 if($Key!='targeturl'){
  $Value = str_replace("%25","%",$Value);
  array_push($par,($Key . "=" . $Value));
 }
}
//判断目标URL是否带有?（即是否带有参数）
$cc = strpos($url,"?") ? "&" : "?";
//重组URL
$geturl = !$par ? $url : $url.$cc.implode("&",$par);
//抓取重组后的URL页面内容
$snoopy = new Snoopy;
$snoopy->fetch($geturl);
//检测当前文件是否为下载类型
$sftype = getextend($url);
$bdown = @$download[$sftype];
//如果是，则下载该文件
if($bdown){
 $query = $snoopy->results;
 header("Content-type: ".$bdown);
 header("Content-Disposition:inline;filename=".$url);
 header('Cache-Control:must-revalidate,post-check=0,pre-check=0');
 header('Expires:0');
 header('Pragma:public');
 echo $query;
 exit;
}
//替换目标内容中脚本里有可能替换父窗口地址的代码
$org = str_replace("top.location","top.title",$snoopy->results);
//尝试转换目标内容编码到UTF-8
$opt = iconv("gbk","utf-8",$org);
//判断目标内容编码为GBK或UTF-8
$ec = strlen($opt)?"gbk":"utf-8";

?>
<script type="text/javascript">
//封闭运行，避免与后面内容中脚本混乱
(function(){
/*如果是js,css,txt类型文件，则直接输出，不做处理*/
var sftype = '<?php echo $sftype;?>';
if(/(?:js|css|txt)/i.test(sftype)){return;}
var createIPH = function(name,value){if(!name){return;}if(/msie/i.test(navigator.appVersion)){return document.createElement('<input type="hidden" name="'+name+'" value="'+value+'"/>');}else{var dfi = document.createElement('input');dfi.type = 'hidden';dfi.name = name;dfi.value = value;return dfi;}};
//回显目标URL到父窗口文本框
var dtu = top.document.getElementById('targeturl');
if(dtu){dtu.value = '<?php echo $geturl;?>';}
//目标URL及domain
var sref = '<?php echo $url;?>';
var sdomain = (/^(http:\/\/[^\/]*)/i.test(sref))?RegExp.$1:'';
//插入外部样式
var newStyleSheet = function(shref){
    var ds = document.createElement('link');
    ds.rel = 'styleSheet';
    ds.type='text/css';
    ds.href = shref;
    document.getElementsByTagName('head')[0].appendChild(ds);
};
//页面加载后执行下面的过程
var process = function(){
//抓取页面中外部样式链接
var dstyle = document.getElementsByTagName('link'),ls = dstyle.length;
//抓取页面中所有链接
var dlink = document.getElementsByTagName('a'),la = dlink.length;
//抓取页面中所有表单
var dform = document.getElementsByTagName('form'),lf = dform.length;
//抓取页面中所有图片
var dimg = document.getElementsByTagName('img'),lm = dimg.length;
//遍历所有外部样式链接，重新插入替换后的样式文件
for(var i=0;i<ls;i++){
        var shref = dstyle[i].href;
        if(!shref){continue;}
        shref = shref.toString().replace(/^http:\/\/www\.w3cgroup\.com(?:\/geturl)?/i,sdomain);
        var newhref = (/^http/i.test(shref))?'http://www.w3cgroup.com/geturl/action_get.php?targeturl='+shref:'http://www.w3cgroup.com/geturl/action_get.php?targeturl='+sdomain+'/'+shref.replace(/^\/*/,'');
        newStyleSheet(newhref);
}
 //遍历所有链接，替换它们的href地址
 for(i=0;i<la;i++){
 var src = dlink[i].href.toString().replace(/^http:\/\/www\.w3cgroup\.com(?:\/geturl)?/i,sdomain);
 var oargs = getArgs(src),ahref = [];
 //UTF-8编码参数值
 for(var d in oargs){
  if(!d||d=='filename'||!oargs[d]){continue;}
  ahref.push(d+'='+encodeURIComponent(encodeURI(oargs[d])));
 }
 var ghref = ahref.length?oargs.filename+'?'+ahref.join('&'):oargs.filename;
 //重设链接地址
 dlink[i].href = 'http://www.w3cgroup.com/geturl/action_get.php?targeturl='+ghref;
 }
 //遍历所有表单，替换它们的action地址
 for(i=0;i<lf;i++){
 //抓取表单action并处理
 var src = dform[i].action.toString().replace(/^http:\/\/www\.w3cgroup\.com(?:\/geturl)?/i,sdomain);
 if(!(/^http/.test(src))){src = (/^\/.*$/.test(src))?(sdomain+src):(sdomain+'/'+src);}
 //创建一个隐藏域targeturl，值为上面处理的src地址
 var dfi = createIPH('targeturl',src);
 dform[i].appendChild(dfi);
 //创建一个隐藏域ie，值为utf-8，纯属为搜索引擎使用
 var dfi2 = createIPH('ie','utf-8');
 dform[i].appendChild(dfi2);
 //重设表单提交目标窗口
 dform[i].target = 'actioncontent';
 //重设表单action地址
 dform[i].action = 'http://www.w3cgroup.com/geturl/action_get.php';
 //重设表单onsubmit事件，用来UTF8编码字段值
 dform[i].onsubmit = function(){
  var dlms = this.elements,l = dlms.length-1,pn = '',pt = '',pv = '';
  for(var i=0;i<l;i++){
   pn = dlms[i].name,pt = dlms[i].type,pv = dlms[i].value;
   if(!pn||pn=='targeturl'||pn=='ie'){continue;}
   if(pt=='submit'||pt=='reset'||pt=='button'){
    dlms[i].value = encodeURIComponent(pv);
   }else{
    dlms[i].value = encodeURIComponent(encodeURI(pv));
   }
  }
 };
 }
//遍历所有图片，重新载入
for(i=0;i<lm;i++){
        var src = dimg[i].src;
        if(!src){continue;}
        src = src.toString().replace(/^http:\/\/www\.w3cgroup\.com(?:\/geturl)?/i,sdomain);
        var newsrc = (/^http/i.test(src))?'http://www.w3cgroup.com/geturl/action_get.php?targeturl='+src:'http://www.w3cgroup.com/geturl/action_get.php?targeturl='+sdomain+'/'+src.replace(/^\/*/,'');
        dimg[i].src = newsrc;
}
};
//绑定该过程到window.onload
if(document.attachEvent){window.attachEvent('onload',process);}else{window.addEventListener('load',process,false);}
})();
</script>
//脚本放在输出内容前，避免内容中可能出现脚本错误而导致我们要做的事情被废掉
//输出抓到的目标页面内容
<?php echo $scontent;?>

在这个小作品中，我编写了一个重要的JavaScript函数easyUTF8，它可以很方便地在JavaScript脚本中将GBK编码的内容转换为UTF-8编码。

我们还处理了一下表单中添加项目的兼容问题，注意看createIPH函数，在IE中创建的表单项内容，在指定name和value时可能会出现我们不希望的结果，这在DHTML手册中已经有过描述了。

By: Joost.De.Valk
Translate: W3CGroup dh20156

Introduction
简介

So what is POSH? No, it's not just some new clothing fashion hype amongst web designers - POSH is the acronym for Plain Old Semantic HTML. The term Semantic HTML is used for a variety of things, but it has it's origin in one objective: creating (X)HTML documents using semantic elements and attributes, as opposed to using presentational HTML. The term POSH was coined because a group of highly respected web designers wanted to have a short mnemonic to easily capture the essence of the concept of Semantic HTML.

什么是POSH?它可不是网页设计师们谈论的服装、时尚,POSH是plain old Semantic HTML的缩写。Semantic HTML可以用在很多地方，不过，它的本意是创建(X)HTML文档中，使用语义化的对象或属性，而不用表象（只为显示效果）的HTML。POSH的产生，来自一群令人追崇的网页设计师,他们希望能够写出简短、易记，能够使人一看就知道其意义的语义化HTML。

In this article, I talk about why you should use POSH, exactly what you need to do to implement it (many of you are probably doing this already, and a few of you might not even realize it!) and how you can optimize it to improve SEO for your site. I also take a brief look at Microformats at the end of the article.

在这篇文章中，我会讲述为什么要使用POSH，你应该如何正确地去做（可能有一些你们已经在做，有一些你还不了解）以及如何去改善你的站点的SEO。我会在文章后稍微看一下微格式部分。

Why Should I Use Semantic HTML?
为什么要使用语义化的HTML？

You could just say: "because it's the right thing for the web," but it's benefits go far beyond that. For instance, it makes it easier for screenreaders to interpret in an order that will make sense to users with visual impairments.

你也许会说：“因为它对WEB有好处”，然而，它的好处远不止于此。比如，它使得屏幕阅读器更容易使用，这对那些视觉障碍的用户将非常有意义。

Secondly, SEO and Semantic HTML are close friends. They might sometimes have conflicts of interest, which we'll get to later on in this document, but over all, they're friends. The purpose of SEO is to help search engine spiders better understand what a page is about and therefore categorize them better. Since a search engine spider basically has even less capabilities than a screenreader, it needs even more guidance in determining a page's structure and topic. Good semantic HTML provides just that structure.

其次，SEO对语义化的HTML更亲睐。他们可能有时候会有一些冲突（我们将在后面看到），但是，语义化HTML仍然是对SEO非常友好。SEO的目的是帮助搜索引擎更好地理解一个页面讲述的是什么主题以便更好地对它进行分类。既然搜索引擎都只有这些基础功能，更何况是屏幕阅读器。它们需要在页面结构和主题确定时给予更多的提示。好的语义化HTML将会是很好的支持。

Semantic HTML tries to convey meaning through the words and the tags on a page. Try thinking of it this way: the content on the page is the words you speak. The tags provide the structure, the intonation, the pauses and even the looks on your face. Basically, your tags are half your message.

语义化的HTML会试图将页面上标签与标签中的内容联系起来。你可以试着这样去想：页面上的内容是你需要念出来的，而标签提供了一种结构，语调，停顿等辅助信息，基本上，标签起到了另一半信息的作用。

Site Structure
站点结构

In my previous article on dev.opera.com I talked about site structures, with the aim of providing a clear way for search engines to discover which page on your site discusses which topic - this can be further improved by using Semantic HTML.

在我发表在dev.opera.com上的前一篇文章里，我谈过了站点结构，目的是为了提供给搜索引擎一个更清晰的更好的方法来发现你站点中哪一页上谈论哪一话题，这个可以通过使用语义化HTML来实现。

Page Structure
页面结构

A page consists of a title, one or more headings, and content. This content can contain paragraphs of text, lists, quotes, images and tables. All these types of information have their own designated tag(s). We will treat all those tags, starting with the headings. Use this page about sortable tables as an example to follow along with for the coming points.

一个页面会由一个主标题，一个或多个内容标题，和内容来组成。内容部分可以包括段落，列表，引用，图片和表格。所有的这些资料都会有它们特定的标签。我们将一个一个来分析，先从内容标题(headings)开始。用一个排序表格的页面来做例子。

Headings,from h1 to h6
内容标题，从h1到h6

A good document has headings and subheadings, because headings make it easier to determine the topic of a page. These headings can range in importance from h1 to h6. To be honest, I never use h5 and h6 myself. I usually have only one h1 tag on a content page; on portal pages, blog homepages for instance; you can have multiple h1's, for all your articles for example. From a semantic perspective that might be weird, from an SEO perspective, it's great.

一个好的文档应该有主标题和副标题，因为它们可以更容易帮助确定一篇文章的主题。这些标题可以按重要性分为h1到h6.老实说，我自己从来不用h5和h6,经常只在页面内容中使用h1。在一些门户页面，比如说博客首页，你可以为你的每一篇文章使用一个h1，虽然这从语义上来讲可能不太合适，但从SEO的角度来看，这实在太棒了。

Strict semanticists sometimes suggest that you should only have one h1, two h2's, 3 h3's etc. I don't agree with that, as I think it's very normal for a document to have more than two h2's, in fact, this document has a lot more of them, and I think it's very well structured.

严格的语义学家有时会建议你只使用1个h1，2个h2，3个h3等等，不过，我不太赞同，我认为，一个文档中很容易会存在两个以上的h2，事实上，这篇文档中就有许多，我觉得它们组织的很好。

Very often, designers who have heard a bit about Semantic HTML will fit the name of a site in the header into an h1 tag. On the homepage of a site, that might be a very wise decision. On every other page within your site, you probably have a specific topic, which might be related to your site's name but doesn't have to be. On those sub pages, that topic should be in the h1 tag, and it's wise to put the name of your site into an h4 tag or maybe even a span.

经常，设计师们会听到语义化HTML将一个站点的名称放在一个h1标签中更适合。在站点首页，那可能是很棒的决定。在其他页面，你可能会有一些具体的主题，可能与你的站点名称有关或者没有，在这些页面上，主题可以放到h1标签，站点名称可以放到一个h4标签或者span标签内。

Search engines give the words used in the various headings more weight in determining the topic of a page. The keyword your page is optimized for should appear at least once in an h1 tag, and related keywords should be used in the other headings, as illustrated in Figure 1.

搜索引擎给那些在headings标签内帮助确定页面主题的字词更高的权重。你页面上要优化的关键词应该将它们放在至少一个h1标签内，其他相关关键词应该放在其他的headings标签内，如图1.

Figure 1:Include keywords in your page headings to improve SEO for your page.
图1：在页面上用headings包含关键词以改善SEO

Images
图像

Images are used in all sorts of ways within documents, and you should apply the proper semantics to them. The only really useful semantic variable on an img tag is the alt attribute, and it should only be used if the image adds meaning to the document. If the image is there only for decorative purposes, leave the altattribute empty. Otherwise, describe what the image is showing in the alt attribute.

图像在一个文档中以各种不同的方式使用着，你需要给它们应用上一些适当的语义。在img标签上真正有用的语义变量就是alt属性，它仅用在图像在文档中注明它所表达的含义的时候。如果某些图像仅仅是为了装饰的目的，那么可以使alt为空，否则，都需要指明它们的alt属性值。

If you're using images to replace text, because you want the text to look nicer (image replacement,) make sure that you're using normal text in your HTML, and that you replace that text with images by using CSS. You have to do this because both people with visual impairments and search engines cannot read the text in your images. My own preferred method of doing this is through applying the image with CSS background-image, and then hiding the HTML text using a large text-indent (about -1000px or so does the trick.) Be careful though: the text in the image should be exactly the same as the text in your document. If it's not, you risk losing a lot of ranking value from the search engines.

如果你要以图换字，使得文字看起来更漂亮（用图片替换），请务必在你的HTML代码中也写上正常的文字，而且，你需要使用CSS来将图像替换相应的文字。这样做的目的是因为要兼顾到那些视觉障碍的人，并且搜索引擎无法读取图像里的文字。我的首选方法是使用background-image来显示这个图片，然后使用一个很大的text-indent(比如-1000px或其他能达到效果的值）来隐藏文字。注意：图像中的文字应该和文档中的文字完全一样，否则，你将冒上被搜索引擎降低排名的风险。

Abbreviations and acronyms
缩写和首字母组合词

You're bound to do it as a web designer - I do it in this article several times - using acronyms or abbreviations. When you do, make sure you provide the written out version of the term using abbr or acronym tags. That's good for your keyword density too!

作为一名网页设计师，你一定会使用到，我在这篇文章里就用了好几次，使用首字母组合词或缩写。当你使用它们的时候，请将术语写到abbr或acronym标签里并在它们的title属性中写出该术语的全称。这对增加你的关键词密度同样有益。

Tables
表格

We all know why using tables for layout out web sites is bad, and we also know what they are supposed to be used for - displaying tabular data. Just using basic tables is a big step in the right direction, but there are a number of ways in which you can improve your tables' semantic value, thereby improving your site's SEO further:

我们都知道为什么用表格来呈现页面布局是不和谐的，我们知道，表格应该用来显示表格式数据。只使用它这个基本的功能是正确的，不过，有一些方法可以用来改善表格的语义，改进SEO。

- Use table headings(th) for your table's headings(it's really that easy)
- 为表格中的标题使用标题标签(th，这很容易)

- If you can,use the thead,tbody and tfoot sections to properly section your table
- 如果可以，使用thead,tbody和tfoot进行对你的表格进行合理的划分

- provide a caption for your table,describing what's in it
- 为表格提供一段说明标题写在caption标签里

The caption and the table headings would be a good,and usually natural place to use some of your document's keywords.
caption和th可以很自然的放置一些文档关键词，很和谐。

Emphasizing your meaning
强调你要表达的意思

Remember I said earlier that tags should be the emotion of your text? This is where the real emotion comes in: you can provide emphasis to certain words using em or strong. In the old days, people used b and i for that, but these tags are no longer encouraged, since they imply a specific styling, whereas HTML should only describe structure/meaning (all style should be created using CSS, of course.)

还记得我之前说过标签会让你的文字带有情感么？你可以这样：将要强调的字词放在em或strong标签内。在以前，人们常常使用b和i标签来做，但这些标签是不建议使用的，因为，这些标签仅仅是为了实现特别的样式，而HTML要的应该是结构描述和意义（所有的样式应该由CSS来完成。）

Search engines give more weight to any words marked up using any of these four tags. Overusing them can do more harm than good, and actually cause a loss of emphasis, but if treated with care, they can apply an extra dimension to your documents.

搜索引擎会给这四个标签内的文字更高的权重，不过，如果滥用，将弊大于利，而且，反而会影像要强调的内容，但是，如果妥善应用，这会为你的文档增色不少。

A few words on (i)frames
简单讲一下(i)frames

It's quite simple:don't use them.Search engines don't get them,and screenreaders have quite a hard time using them as well.
很简单：别用它们。搜索引擎根本不去抓取它们，而且，屏幕阅读器在读取它们时非常费劲。
 

Conflicts of interest
利与弊

All of the above rules can be bent a little of course, which is a good thing, as sometimes it's necessary to keep everyone at your organization happy. Say your boss wants a page to have a zappy marketing title you'd rather not have, because it doesn't exactly describe what's on the page, and pushes your most important keyword to the second heading. If you're in a competitive area, it might be wise to make the page look like that for your boss, yet use an h2 for the first heading, and an h1 for the second.

以上这些规则多少会感觉有些别扭，然而，好的东西有时候对维持你们单位成员的幸福非常有必要。比如，你老板希望一个页面能有个吸引人的销售标题，而你宁可不要，因为，它不能完全地描述这个页面上的内容，而且这会将你认为最重要的关键词要放在第二个标题内。但是，如果你们行业竞争激烈，你老板那样做是很明智的，页面上还要用一个h2标签放第一个标题，一个h1标签放第二个。

The same goes for iframes and images. If someone really wants you to put a certain block of content on a specific well-ranking page, but you don't want to risk losing focus, you could of course put that content into an iframe or image, and choose not to provide an alternative.

这种矛盾同样适用于iframes和images.如果有人一定要你在一个排名特别好的页面上插入一些打断的内容而你又不想冒降级的风险，你可以选择将这些内容放在一个iframe里或者一张图片里。

These decisions are up to you in the end - normal semantics should be the basis of your design, and the conflicts should only arise when you're really optimizing your pages.

最终的决定在你，正常的语义学应该基于你的设计，而真正的利益冲突会在你真正对自己的页面进行优化时才出现。

Not so simple semantic HTML - Microformats
不那么简单的语义化HTML - 微格式

Microformats are also semantic HTML, but they are not exactly simple! At the moment, search engines are hardly using microformats in their algorithms, but that might change. The hCard especially (the HTML version of the vCard) has some very easy and obvious uses for search engines, and I suspect that they will start using those within the next couple of years. You can apply intelligent extra semantics within Microformats using the basic set of HTML elements - for example, a good way of marking up your address hCard is by using the address tag as a container!

微格式也是语义化的HTML，但是它们却不那么容易。现在，搜索引擎算法还很难理解微格式，但是，这可能会得到改变。hCard（vCard版本的HTML）有很多简单易用的东西针对搜索引擎，我想它们将在随后的数年里使用它们。你可以使用额外的可增强理解的语义化微格式HTML元素，比如，一种好的标识你的地址的hCard会使用address标签来包含。

Conclusion
总结

By using semantic HTML to mark up your pages, you can create pages that are more accessible, both to people with disabilities, as well as to search engines. Good semantic markup helps search engines to determine what the topic of a page is, and if used together with a good site structure, allows you pushy up your web site rankings!

在你的页面上使用语义化HTML，你可以使得它们更易访问，对那些视力障碍的人们和搜索引擎都有好处。好的语义化HTML可以帮助搜索引擎确定页面的主题，如果你同时有一个好的站点结构，这将使得你的网站排名得到提高。

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

本文采用的授权是创作共用的“署名-非商业性使用-相同方式共享 2.5 通用许可”。

在完成了俄罗斯方块后，这是我写的又一个JavaScript游戏，玛丽医生Dr.Mario。

游戏方法：

3颗相同颜色的药丸与同色的病毒在横向纵向上相连时，则可杀死该病毒得分。

方向键：上：药丸形状及颜色切换，左、右、下：左移、右移、下落。

实现流程：

药丸落下 -> 边界检测 -> 不可再动 -> 加入到groups -> 杀病毒检测 -> 消除 -> 重新整理groups -> 无支撑的药丸掉落 -> 回到杀毒检测，直到所有无支撑药丸掉落结束 -> 下一个

Groups概念：

在该游戏的实现中， 出现了一个groups的概念，它是一个数组，它记录了所有堆积的元素，这些元素是活动的，会在消除某些元素后掉落，所以，比较麻烦。

groups记录着每次掉落元素的坐标及样式，形如：[[[0,0,'red_left'],[0,1,'blue_right']],......]

在每次消除病毒后，它需要维护一次，维护的过程是，先将其按照每个元素的第1维进行倒序排列（用于保证越靠下的药丸在后面最先掉落），然后遍历每个元素，进行整理，如：某个与元素的一半被消除了，或者两个元素都被消除了，等等。

几个算法：

在该游戏中需要优化的几个算法：

取横向、纵向N个以上连续相同的内容（实现参见：http://www.jslab.org.cn/?tag=getsamelistfrommartix）

边界检测（与俄罗斯方块的边界检测算法类似，采用位与的方式）

groups维护（遍历数组）

如果能够优化以上算法，则程序运行效率会更高！

其他操作类似于俄罗斯方块，具体情况，可以去看它的源代码！

现在就来玩玩看这个JavaScript实现的Dr.Mario玛丽医生吧 ^_^

前段时间在一个项目中，通过对以往表单提交、验证、返回信息处理等功能的分析总结，编写了一个基于EasyUI的全站表单AJAX提交验证及返回值提示功能的通用方法。

伪代码形如：

formsubmit(dModule){

在一些表单中可能会出现联动选单，我们再编写一个联动选单的通用方法，形如：getUS(dModule)；

在一些表单中可能会出现日历选框，我们再编写一个日历选框的通用方法，形如：calendar(dModule)；

在一些表单中可能会出现颜色选框，我们再编写一个颜色选框的通用方法，形如：colorPicker(dModule)；

定义提交时显示的提示信息；

定义处理结果返回时的显示信息，此信息为模板类型，可定义一些通配符，以便在得到具体返回值时进行替换；

定义弹出层及遮罩；

定义onsubmit事件处理函数，如fooaction(){

调用easyUI.checkForm进行表单验证；

定义提交的URL及提交的ARGS；

定义显示返回值方法，如showmsg(stype,msg)；

定义显示失败值方法；

定义AJAX处理函数；

定义AJAX失败时函数；

调用easyUI.ajax.post方法提交表单

}

绑定表单onsubmit方法

}

之后，在每个页面进行调用：formsubmit(document.body);

（在每个页面进行调用不是让你去每一个页面上这么写一遍，记得用src方式引入JS文件即可 ^_^）

以后的页面编写中，就可以不用再去重复编写不同的表单提交处理函数了。

附源代码部分：

formsubmit:function(dModule){

    if(!dModule){return;}

    //联动部分，可根据项目需求自行编写通用方法

    sutil.getUS(dModule);

    //日历部分，可参照easyCalendar的使用方法

    sutil.calendar(dModule);

    //取色部分，可参照easyColorPicker的使用方法

    sutil.colorPicker(dModule);

    //处理提示

    var swaiting = '<div class="waiting"><img src="'+vIjcPath+'loading.gif" /> 请稍候，正在处理您的请求......</div>';

    //处理结果模板

    var sresult = '<div class="result"><div class="hd">$1</div><div class="bd"><div class="msg">$2</div></div></div>';

    //输出设备，遮罩、弹出层

    var dmask = sutil.mask;

    var dpopup = sutil.formpopup;

    dpopup.fixsize = true;

    dpopup.autofullsize = false;

    dpopup.setShadow();

    dpopup.onopen = function(){dmask.open();};

    dpopup.onclose = function(){dmask.close();};

    //onsubmit事件处理函数

    var fooaction = function(){

        //表单验证

        var bc = easyUI.checkForm(this);

        if(!bc){return false;}

        //如果不是ajax方式提交则返回

        var queryType = this.getAttribute('qtype');

        if(!queryType||queryType.toLowerCase()!='ajax'){return true;}

        //取表单数据

        var scaption = this.getAttribute('caption');

        var dlms = this.elements,l = dlms.length-1;

        var surl = this.action,args = [];

        var dbtn = easyUI.getElementsBy('type','submit','button',this)[0];//取提交按钮

        var pn = '',pt = '';

        for(var i=0;i<l;i++){

        pn = dlms[i].name;

        pt = dlms[i].type;

        if((pt=='checkbox'||pt=='radio')&&!dlms[i].checked){continue;}

        args.push(pn+'='+encodeURI(dlms[i].value));

        }

        //提交过程中禁用提交按钮

        if(dbtn){dbtn.disabled = true;}

        //显示信息

        var showmsg = function(stype,msg){

        msg = msg.replace(/\\n/g,'<br/>');

        var stitle = scaption?scaption:'提交表单';

        var shd = (stype==1)?'<h3 class="error">错误!您提交的请求遇到了问题!</h3>':'<h3 class="success">您提交的请求已处理成功!</h3>';

        var sbox = sresult.replace(/\$1/g,shd).replace(/\$2/g,msg);

        dpopup.setTitle(stitle);

        dpopup.setContent(sbox);

        if(!dpopup.isopen){dpopup.open();}

        };

        //显示错误信息

        var fmsg = function(msg){

        showmsg(1,msg);

        if(dbtn){dbtn.disabled = false;}

        };

        //AJAX提交处理函数

        var cbfoo = function(xhr){

        if(!xhr){fmsg('数据处理失败！xmlhttp对象未就绪！');return;}

        var rtxt = xhr.responseText;

        if(!rtxt){fmsg('数据处理失败！服务器没有返回值！');return;}

        //返回值约定为code,descript,jumpUrl

        var astr = rtxt.split(','),scode = astr[0]||'20156',desc = astr[1],jump = astr[2];

        desc = desc?unescape(decodeURI(desc)):'未知错误!';

        jump = jump?unescape(decodeURI(jump)):false;

        if(isNaN(scode)){fmsg('数据处理失败！服务器返回值不正确！');return;}

        switch(scode){

            case '-1'://状态码code为-1时则显示成功信息

            showmsg(0,desc);

            //如果有跳转URL，则在关闭提示信息层后跳转

            if(!!jump){dpopup.onclose = function(){dmask.close();window.location = jump;};}

            break;

            default:

            fmsg('数据处理失败！'+desc+'！');break;

        }

        };

        //AJAX失败处理函数

        var ffoo = function(xhr){

        var sts = (xhr)?xhr.status:'20156';

        fmsg('数据处理失败！服务器错误，错误代码：'+sts+'！');

        };

        //AJAX提交

        dpopup.setTitle('正在处理您的请求');

        dpopup.setContent(swaiting);

        dpopup.open();

        easyUI.ajax.post(surl,args.join('&'),true,cbfoo,ffoo);

        return false;

    };

    //遍历所有dModule中出现的表单，并绑定onsubmit处理函数

    var dforms = dModule.getElementsByTagName('form'),l = dforms.length;

        for(var i=0;i<l;i++){

            dforms[i].onsubmit = fooaction;

        }

}

方便绑定到控件

支持的颜色格式：

hex 十六进制值，如：#ff0000

rgb 值，如：255,0,0

hsb 值，如：0,100,100

 

EasyColorPicker测试地址：

http://www.easyui.org.cn/easyColorPicker_demo.html

让我们重温一下JavaScript的一些基础知识，请先写出以下代码中问号处的答案，再运行比较！

<script type="text/javascript">

var a=0,b=0,c=0;
a+++b+++c;
alert([a,b,c]);//?

var a=[];
alert(a[a++]);//?
alert(a);//?

var o={a:o++};
alert(o.a);//?

var f=function(){};
alert(f(f++));

alert(typeof(NaN))//?

alert(typeof(Infinity))//?

alert(typeof(null))//?

alert(typeof(undefined))//?

alert(NaN == NaN)//?

alert(NaN != NaN)//?

alert(NaN >= NaN)//?

alert(null == undefined)//?

alert(null >= undefined)//?

alert(null <= undefined)//?

alert(parseInt("123abc"))//?

alert(("123abc" - 0))//?

alert(Infinity > 10)//?

alert(Infinity > "abc")//?

alert(Infinity == NaN)//?

alert(true == 1)//?

alert(new String("abc") == "abc")//?

alert(new String("abc") === "abc")//?

var a = "123abc";
alert(typeof(a++));//?
alert(a);//?

var a = "123abc";
a.valueOf = function(){return parseInt(a);}
alert(++a);//?
alert(a-0);//?

var a = new Object();
a.toString = function(){return "123abc";}
a.valueOf = function(){return parseInt(a);}
alert(++a);//?
alert(a-0);//?

var spv = String.prototype.valueOf;
String.prototype.valueOf = function(){
    return parseFloat(this);
}
alert("123abc" > 122);//?
alert(new String("123abc") > 122);//?
String.prototype.valueOf = spv;

var s = new String("abc");
alert(typeof(s) == typeof("abc"));//?
alert(s === "abc");//?
alert(s.toString() == s);//?

var a = new Object(),b = new Object();
a.toString = function(){return "a"};
b.toString = function(){return "b"};
alert(a>b);//?
a.valueOf = function(){return 1};
b.valueOf = function(){return 0};
alert(a>b);//?

var step = function(a){
    return function(x){
        return x + a++;
    }
}
var a = step(10);
var b = step(20);
alert(a(10));//?
alert(b(10));//?

</script>

运行代码查看结果：http://www.jslab.org.cn/?tag=javascriptBasis

希望大家在学习JavaScript的时候注意基本功的练习！^_^

静态地址重定向到带参数的动态地址

rewrite "^(.*)/service/(.*)\.html$" $1/service.php?sid=$2 permanent;


带参数的动态地址重定向到静态地址

if ($query_string ~* id=(.*)) {
    set $id $1;
    rewrite "^(.*)/article.asp$" $1/article/$id.htm last;
}

泛域名解析

server_name www.w3cgroup.com *.w3cgroup.com;
server_name_in_redirect off;
#设置默认root
set $rootdir /usr/local/nginx/html/w3cgroup/;
#匹配三级域名
if ($host ~* ^([^\.]+)\.([^\.]+)\.([^\.]+)\.([^\.]+)$) {
    set $rootdir /usr/local/nginx/html/w3cgroup/$2/$1;
    #三级域名中有访问指定的目录则重定向到相应的二级域名下
    rewrite "^.+upload/?(.*)$" http://upload.w3cgroup.com/$1 permanent;
    rewrite "^.+ijc/?(.*)$" http://ijc.w3cgroup.com/$1 permanent;
    break;
}
#匹配二级域名
if ($host ~* ^([^\.]+)\.([^\.]+)\.([^\.]+)$) {
    set $rs1 $1;
}
#设置www时root
if ($rs1 ~* ^www$) {
    set $rootdir /usr/local/nginx/html/platform_ig/;
    #二级域名中有访问指定的目录则重定向到相应的二级域名下,注意，这里要使用last
    rewrite "^.+upload/?(.*)$" upload/$1 last;
    rewrite "^.+ijc/?(.*)$" ijc/$1 last;
    break;
}
#设置非www二级域名时root
if ($rs1 !~* ^www$) {
    set $rootdir /usr/local/nginx/html/w3cgroup/$rs1;
    #二级域名中有访问指定的目录则重定向到相应的二级域名下
    rewrite "^.+upload/?(.*)$" http://upload.w3cgroup.com/$1 permanent;
    rewrite "^.+ijc/?(.*)$" http://ijc.w3cgroup.com/$1 permanent;
    break;
}
#应用root
root $rootdir;
index index.php index.html;
error_page 404 http://$host/;
 

注意：if () {} 之间需要空格，否则Nginx.conf会报unknow directive 错误!

参考：

Nginx Rewrite Flags
* last 相当于Apache里的[L]标记，表示完成rewrite
* break 终止匹配, 不再匹配后面的规则
* redirect 返回302临时重定向
* permanent 返回301永久重定向

Nginx正则表达式匹配
* ~ 为区分大小写匹配
* ~* 为不区分大小写匹配
* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配

Nginx文件及目录匹配
* -f和!-f用来判断是否存在文件
* -d和!-d用来判断是否存在目录
* -e和!-e用来判断是否存在文件或目录
* -x和!-x用来判断文件是否可执行

Nginx全局变量
$args
$content_length
$content_type
$document_root
$document_uri
$host
$http_user_agent
$http_cookie
$limit_rate
$request_body_file
$request_method
$remote_addr
$remote_port
$remote_user
$request_filename
$request_uri
$query_string
$scheme
$server_protocol
$server_addr
$server_name
$server_port
$uri

CSS选择器实现原理：

一、解析

1、格式化数据，将css选择器转换成一种便于后面进行操作的格式，这一步很重要，这是数据结构部分，后面的实现都将以此为依据。

以下面数据为例：

#a b.c .d + e:first-child > f[data = "hello world!"]

首先，捕获形如 [ 属性 = 值 ] 的数据，将"="两边的空格去掉，然后将“值”里的空格替换为一个不太可能会出现的临时字串，如0x20156

然后，在+、：、>、[ 符号前加空格

接着，将#、.、+、:、]、>后的空格去掉

最好将单引号和双引号也都去掉

做完上述替换操作后，变可得到形如下面的数据：

#a b.c .d +e :first-child >f [data=hello0xdh20156world!]

2、将格式化后的数据转换成这样的伪代码：取节点函数('css选择符',上一次操作的结果)，以空格为分隔：

取节点函数('#a',上一次操作的结果)

取节点函数('b.c',上一次操作的结果)

取节点函数('.d',上一次操作的结果)

取节点函数('+e',上一次操作的结果)

取节点函数(':first-child',上一次操作的结果)

取节点函数('>f',上一次操作的结果)

取节点函数('[data=hello0xdh20156world!]',上一次操作的结果)

3、将css选择器解析成具体的取节点函数，如：

#a应当解析成：document.getElementById('a')

E#a应当解析成：document.getElementsByTagName('E')，然后遍历id=a的

之前进行过转换的0x20156记得重新转换为空格。

更多css Selectors的解释请参见：

http://www.w3.org/TR/CSS2/selector.html

二、编写取节点函数，将伪代码实现

在easyUI.cssSelector的实现中采用的是eval的方式，目前该方法尚未完全支持CSS2选择器，还在测试阶段！

演示：

easyUI Css Selector测试地址：http://www.jslab.org.cn/?tag=cssSelector

通用寄存器	4个	EAX、EBX、ECX和EDX	32位
段寄存器	6个	ES、CS、SS、DS、FS和GS
变址寄存器	2个	ESI和EDI	32位
堆栈寄存器	2个	ESP和EBP	32位
指令指针寄存器	1	EIP	32位
状态标志寄存器	1	EFlags	32位
控制寄存器		CR0-CR4
调试寄存器		DR0-DR7
测试寄存器		TR3-TR5
系统地址寄存器	2个	GDTR，IDTR	48位

通用寄存器

EAX通常称为累加器(Accumulator),用累加器进行的操作速度最快

EBX称为基址寄存器(Base Register),可作为存储器地址指针来使用

ECX称为计数寄存器(Count Register)。在循环和字符串操作时，可用它来控制循环次数

EDX称为数据寄存器(Data Register)。在进行乘、除运算时，作为默认操作数参与运算

变址寄存器 

ESI  指针寄存器的一种。是内存移动和比较操作的源地址寄存器；

EDI  指针寄存器的一种。是内存移动和比较操作的目标地址寄存器；

堆栈寄存器

EBP 指针寄存器的一种，堆栈基址指针寄存器确定堆栈帧的起始位置，

ESP 指针寄存器的一种，总是指向当前堆栈顶位置。

段寄存器

段寄存器是根据内存分段的管理模式而设置的。内存单元的物理地址由段寄存器的值和一个偏移量组合而成的，这样可用两

个较少位数的值组合成一个可访问较大物理空间的内存地址，CPU内部的段寄存器：

CS：代码段寄存器(Code Segment Register)：和IP（是用来存放下条待执行的指令在该段的偏移量）合在一起可在该内存段内取到下次要执行的指令。

DS：数据段寄存器(Data Segment Register)：

SS：堆栈段寄存器(Stack Segment Register)：堆栈操作所用的段寄存器和偏移量一定是SS和ESP

ES：附加段寄存器(Extra Segment Register)： 串操作的目标操作数所用的段寄存器和偏移量一定是ES和EDI

FS：附加段寄存器(Extra Segment Register)：

GS：附加段寄存器(Extra Segment Register)：

指令指针寄存器

EIP：EIP的低16位为代码CS段的偏移量，高16位都为0。

状态标志寄存器

运算结果标志位

1、进位标志CF(Carry Flag)：

进位标志CF主要用来反映运算是否产生进位或借位。如果运算结果的最高位产生了一个进位或借位，那么，其值为1，否则其值为0。使用该标志位的情况有：多字(字节)数的加减运算，无符号数的大小比较运算，移位操作，字(字节)之间移位，专门改变CF值的指令等。

2、奇偶标志PF(Parity Flag)：

奇偶标志PF用于反映运算结果中“1”的个数的奇偶性。如果“1”的个数为偶数，则PF的值为1，否则其值为0。利用PF可进行奇偶校验检查，或产生奇偶校验位。在数据传送过程中，为了提供传送的可靠性，如果采用奇偶校验的方法，就可使用该标志位。

3、辅助进位标志AF(Auxiliary Carry Flag)：

在发生下列情况时，辅助进位标志AF的值被置为1，否则其值为0：

(1)、在字操作时，发生低字节向高字节进位或借位时；
(2)、在字节操作时，发生低4位向高4位进位或借位时。

4、零标志ZF(Zero Flag)：

零标志ZF用来反映运算结果是否为0。如果运算结果为0，则其值为1，否则其值为0。

5、符号标志SF(Sign Flag)：

符号标志SF用来反映运算结果的符号位，它与运算结果的最高位相同。运算结果为正数时，SF的值为0，否则其值为1。

6、溢出标志OF(Overflow Flag)：

运算结果超过当前运算位数所能表示的范围，OF的值被置为1，否则，OF的值被清为0 

７、状态控制标志位：状态控制标志位是用来控制CPU操作的，它们要通过专门的指令才能使之发生改变。

1、追踪标志TF(Trap Flag)：

当追踪标志TF被置为1时，CPU进入单步执行方式。

2、中断允许标志IF(Interrupt-enable Flag)：

CPU外部的不可屏蔽中断所发出的中断请求，以及CPU内部产生的中断请求。具体规定如下：

(1)、当IF=1时，CPU可以响应CPU外部的可屏蔽中断发出的中断请求；

(2)、当IF=0时，CPU不响应CPU外部的可屏蔽中断发出的中断请求。

CPU的指令系统中也有专门的指令来改变标志位IF的值。

3、方向标志DF(Direction Flag)：

方向标志DF用来决定在串操作指令执行时有关指针寄存器发生调整的方向。在微机的指令系统中，还提供了专门的指令来改变标志位DF的值。

8、32位标志寄存器增加的标志位：

1、I/O特权标志IOPL(I/O Privilege Level)：

I/O特权标志用两位二进制位来表示，也称为I/O特权级字段。该字段指定了要求执行I/O指令的特权级。如果当前的特权级别在数值上小于等于IOPL的值，那么，该I/O指令可执行，否则将发生一个保护异常。

2、嵌套任务标志NT(Nested Task)：

嵌套任务标志NT用来控制中断返回指令IRET的执行。具体规定如下：

(1)、当NT=0，用堆栈中保存的值恢复EFLAGS、CS和EIP，执行常规的中断返回操作；

(2)、当NT=1，通过任务转换实现中断返回。

3、重启动标志RF(Restart Flag)：

重启动标志RF用来控制是否接受调试故障。规定：RF=0时，表示“接受”调试故障，否则拒绝之。在成功执行完一条指令后，处理机把RF置为0，当接受到一个非调试故障时，处理机就把它置为1。

4、虚拟8086方式标志VM(Virtual 8086 Mode)：

如果该标志的值为1，则表示处理机处于虚拟的8086方式下的工作状态，否则，处理机处于一般保护方式下的工作状态。

；函数初始化以及分配栈的代码

00401038   mov         dword ptr [ebp-4],64h 

；将100给第一个局部变量，我们假设它是n ,int n=100;
0040103F   jmp         boxer+2Ah (0040104a) ；之后一个只直接跳转到0040104a

00401041   mov         eax,dword ptr [ebp-4] ；n放到eax
00401044   add         eax,1   ；eax+1
00401047   mov         dword ptr [ebp-4],eax ；就是n++

0040104A   cmp         dword ptr [ebp-4],3E8h 

；n与3E8比较，我们看看10进制的数是什么，n<1000;
00401051   jge         boxer+0A5h (004010c5) ；小于就不跳，继续

00401053   mov         eax,dword ptr [ebp-4] ；n放进eax
00401056   cdq     ；CDQ 双字扩展. (把EAX中的值与符号扩展为EDX:EAX)
00401057   mov         ecx,64h   ；100放进ecx
0040105C   idiv        eax,ecx   

；整数除法，eax除以ecx，就是n/100，商保存在eax，余数放在edx
0040105E   mov         dword ptr [i],eax ；把结果放在变量i中,i=n/100

00401061   mov         eax,dword ptr [ebp-4] ；再把n放进eax
00401064   cdq
00401065   mov         ecx,0Ah   ；把0Ah（10）放进ecx
0040106A   idiv        eax,ecx   ；n/10，商保存在eax，余数放在edx
0040106C   mov         edx,dword ptr [i] ；将之前n/100的结果放到edx中
0040106F   imul        edx,edx,0Ah  ；edx乘10结果放在edx中
00401072   sub         eax,edx   ；n/10-i*10
00401074   mov         dword ptr [j],eax ；j=n/10-i*10;

00401077   mov         eax,dword ptr [ebp-4] ；n放进eax
0040107A   cdq
0040107B   mov         ecx,0Ah   ；10放进ecx
00401080   idiv        eax,ecx   ；n/10，商放在eax（其实是ax），余数在edx（其实是dx）
00401082   mov         dword ptr [k],edx ；将n/10余数放进变量k，就是k=n%10;

00401085   mov         edx,dword ptr [i] ；这三句是i*i*i
00401088   imul        edx,dword ptr [i]
0040108C   imul        edx,dword ptr [i]
00401090   mov         eax,dword ptr [j] ；这三句是j*j*j
00401093   imul        eax,dword ptr [j]
00401097   imul        eax,dword ptr [j]
0040109B   add         edx,eax   ；i*i*i+j*j*j
0040109D   mov         ecx,dword ptr [k] ；这三句是k*k*k
004010A0   imul        ecx,dword ptr [k]
004010A4   imul        ecx,dword ptr [k]
004010A8   add         edx,ecx   ；i*i*i+j*j*j+k*k*k，放在edx

004010AA   cmp         dword ptr [ebp-4],edx ；将上面的结果和变量n比较
004010AD   jne         boxer+0A0h (004010c0) ；不等就跳004010c0
；一个cmp加一个跳转，是if语句了

004010AF   mov         edx,dword ptr [ebp-4] ；n放在edx，然后入栈，调用printf函数
004010B2   push        edx   
004010B3   push        offset string "%4d" (00422020)
004010B8   call        printf (00401160)
004010BD   add         esp,8

004010C0   jmp         boxer+21h (00401041) 

；一个硬跳转回到开头，上面应该是一个for循环体了
；我们可以复习一下for循环的debug版模板

；又一个printf语句
004010C5   push        offset string "\n" (0042201c)
004010CA   call        printf (00401160)
004010CF   add         esp,4
004010D2   xor         eax,eax   清空eax，就是返回值是0，return 0;

；上面就是代码的主体了，我们看看怎么写反C代码

004010D4   pop         edi
004010D5   pop         esi
004010D6   pop         ebx
004010D7   add         esp,50h
004010DA   cmp         ebp,esp
004010DC   call        __chkesp (004011e0)
004010E1   mov         esp,ebp
004010E3   pop         ebp
004010E4   ret

；函数结束时候恢复寄存器恢复堆栈检查esp等代码

------------------------------------------------------------------------------

完整分析了上面代码后，我们去写出C代码

int boxer()
{
 for (int n=100; n<1000; n++)
 {
  int i=n/100;
  int j=n/10-i*10;
  int k=n%10;

  if (n==i*i*i+j*j*j+k*k*k)
  {
   printf("%4d",n);
  }

 }

 printf("\n");

 return 0;
}

------------------------------------------------------------------------------

写完代码后，我们补全这个程序然后验证一下，显示结果了看看程序的用途

比如说153=1^3+5^3+3^3，这个是一个水仙花数

水仙花数：一个3位数，其各位数字的立方和等于该数本身

所以这个程序是打印出所有的水仙花数的

原文出处：http://www.hight123.cn/Html/?611.html

1.通用数据传送指令

MOV----> move 

 MOV dest,src ;dest←src 
 MOV指令把一个字节或字的操作数从源地址src传送至目的地址dest。 

MOVSX---->extended move with sign data 
MOVZX---->extended move with zero data 

PUSH---->push 
POP---->pop 

进栈出栈指令

PUSHA---->push all 
POPA---->pop all 
PUSHAD---->push all data 
POPAD---->pop all data 
BSWAP---->byte swap 

XCHG---->exchange 

交换指令用来将源操作数和目的操作数内容交换，操作数可以是字、也可以是字节，可以在通用寄存器与通用寄存器或存储器之间对换数据，但不能在存储器与存储器之间对换数据。 
mov ax,1234h ;ax=1234h 
mov bx,5678h ;bx=5678h 
xchg ax,bx ;ax=5678h，bx=1234h 
xchg ah,al ;ax=7856h

CMPXCHG---->compare and change 
XADD---->exchange and add 

XLAT---->translate 
换码指令用于将BX指定的缓冲区中、AL指定的位移处的数据取出赋给AL。 

2.输入输出端口传送指令

IN---->input 
OUT---->output 

3.目的地址传送指令

LEA---->load effective addres
有效地址传送指令
mov bx,0400h
mov si,3ch
lea bx,[bx+si+0f62h] ;BX=139EH
这里BX得到的是主存单元的有效地址，不是物理地址，也不是该单元的内容。

LDS---->load DS 
LES---->load ES 
LFS---->load FS 
LGS---->load GS 
LSS---->load SS 

4.标志传送指令

LAHF---->load AH from flag 
SAHF---->save AH to flag 
PUSHF---->push flag 
POPF---->pop flag 
PUSHD---->push dflag 
POPD---->pop dflag


二、算术运算指令 

ADD---->add 

加法指令 mov al,0fbh ;al=0fbh
add al,07h ;al=02h

ADC---->add with carry 
INC---->increase 1 
AAA---->ascii add with adjust 
DAA---->decimal add with adjust 
SUB---->substract 
SBB---->substract with borrow 
DEC---->decrease 1 
NEC---->negative 
CMP---->compare 
AAS---->ascii adjust on substract 
DAS---->decimal adjust on substract 
MUL---->multiplication 
IMUL---->integer multiplication 
AAM---->ascii adjust on multiplication 
DIV---->divide 
IDIV---->integer divide 
AAD---->ascii adjust on divide 
CBW---->change byte to word 
CWD---->change word to double word 
CWDE---->change word to double word with sign to EAX 
CDQ---->change double word to quadrate word 

三、逻辑运算指令

AND---->and 
or---->or 
XOR---->xor 
NOT---->not 
TEST---->test 
SHL---->shift left 
SAL---->arithmatic shift left 
SHR---->shift right 
SAR---->arithmatic shift right 
ROL---->rotate left 
ROR---->rotate right 
RCL---->rotate left with carry 
RCR---->rotate right with carry 


四、串指令 

MOVS---->move string 
CMPS---->compare string 
SCAS---->scan string 
LODS---->load string 
STOS---->store string 
REP---->repeat 
REPE---->repeat when equal 
REPZ---->repeat when zero flag 
REPNE---->repeat when not equal 
REPNZ---->repeat when zero flag 
REPC---->repeat when carry flag 
REPNC---->repeat when not carry flag 


五、程序转移指令 

1>无条件转移指令(长转移) 

JMP---->jump 
CALL---->call 
RET---->return 
RETF---->return far 

2>条件转移指令(短转移,-128到+127的距离内) 

JAE---->jump when above or equal 
JNB---->jump when not below 
JB---->jump when below 
JNAE---->jump when not above or equal 
JBE---->jump when below or equal 
JNA---->jump when not above 
JG---->jump when greater 
JNLE---->jump when not less or equal 
JGE---->jump when greater or equal 
JNL---->jump when not less 
JL---->jump when less 
JNGE---->jump when not greater or equal 
JLE---->jump when less or equal 
JNG---->jump when not greater 
JE---->jump when equal 
JZ---->jump when has zero flag 
JNE---->jump when not equal 
JNZ---->jump when not has zero flag 
JC---->jump when has carry flag 
JNC---->jump when not has carry flag 
JNO---->jump when not has overflow flag 
JNP---->jump when not has parity flag 
JPO---->jump when parity flag is odd 
JNS---->jump when not has sign flag 
JO---->jump when has overflow flag 
JP---->jump when has parity flag 
JPE---->jump when parity flag is even 
JS---->jump when has sign flag 

3>循环控制指令(短转移) 

LOOP---->loop 
LOOPE---->loop equal 
LOOPZ---->loop zero 
LOOPNE---->loop not equal 
LOOPNZ---->loop not zero 
JCXZ---->jump when CX is zero 
JECXZ---->jump when ECX is zero 

4>中断指令 

INT---->interrupt 
INTO---->overflow interrupt 
IRET---->interrupt return 

5>处理器控制指令 

HLT---->halt 
WAIT---->wait 
ESC---->escape 
LOCK---->lock 
NOP---->no operation 
STC---->set carry 
CLC---->clear carry 
CMC---->carry make change 
STD---->set direction 
CLD---->clear direction 
STI---->set interrupt 
CLI---->clear interrupt 
 六、伪指令 

DW---->definw word 
PROC---->procedure 
ENDP---->end of procedure 
SEGMENT---->segment 
ASSUME---->assume 
ENDS---->end segment 
END---->end

汇编指令中文释义

数据传输指令
───────────────────────────────────────
它们在存贮器和寄存器、寄存器和输入输出端口之间传送数据.
1. 通用数据传送指令.
MOV 传送字或字节.
MOVSX 先符号扩展,再传送.
MOVZX 先零扩展,再传送.
PUSH 把字压入堆栈.
POP 把字弹出堆栈.
PUSHA 把AX,CX,DX,BX,SP,BP,SI,DI依次压入堆栈.
POPA 把DI,SI,BP,SP,BX,DX,CX,AX依次弹出堆栈.
PUSHAD 把EAX,ECX,EDX,EBX,ESP,EBP,ESI,EDI依次压入堆栈.
POPAD 把EDI,ESI,EBP,ESP,EBX,EDX,ECX,EAX依次弹出堆栈.
BSWAP 交换32位寄存器里字节的顺序
XCHG 交换字或字节.( 至少有一个操作数为寄存器,段寄存器不可作为操作数)
CMPXCHG 比较并交换操作数.( 第二个操作数必须为累加器AL/AX/EAX )
XADD 先交换再累加.( 结果在第一个操作数里 )
XLAT 字节查表转换.
── BX 指向一张 256 字节的表的起点, AL 为表的索引值 (0-255,即
0-FFH); 返回 AL 为查表结果. ( [BX+AL]->AL )
2. 输入输出端口传送指令.
IN I/O端口输入. ( 语法: IN 累加器, {端口号│DX} )
OUT I/O端口输出. ( 语法: OUT {端口号│DX},累加器 )
输入输出端口由立即方式指定时, 其范围是 0-255; 由寄存器 DX 指定时,
其范围是 0-65535.
3. 目的地址传送指令.
LEA 装入有效地址.
例: LEA DX,string ;把偏移地址存到DX.
LDS 传送目标指针,把指针内容装入DS.
例: LDS SI,string ;把段地址:偏移地址存到DS:SI.
LES 传送目标指针,把指针内容装入ES.
例: LES DI,string ;把段地址:偏移地址存到ES:DI.
LFS 传送目标指针,把指针内容装入FS.
例: LFS DI,string ;把段地址:偏移地址存到FS:DI.
LGS 传送目标指针,把指针内容装入GS.
例: LGS DI,string ;把段地址:偏移地址存到GS:DI.
LSS 传送目标指针,把指针内容装入SS.
例: LSS DI,string ;把段地址:偏移地址存到SS:DI.
4. 标志传送指令.
LAHF 标志寄存器传送,把标志装入AH.
SAHF 标志寄存器传送,把AH内容装入标志寄存器.
PUSHF 标志入栈.
POPF 标志出栈.
PUSHD 32位标志入栈.
POPD 32位标志出栈.

二、算术运算指令
───────────────────────────────────────
ADD 加法.
ADC 带进位加法.
INC 加 1.
AAA 加法的ASCII码调整.
DAA 加法的十进制调整.
SUB 减法.
SBB 带借位减法.
DEC 减 1.
NEC 求反(以 0 减之).
CMP 比较.(两操作数作减法,仅修改标志位,不回送结果).
AAS 减法的ASCII码调整.
DAS 减法的十进制调整.
MUL 无符号乘法.
IMUL 整数乘法.
以上两条,结果回送AH和AL(字节运算),或DX和AX(字运算),
AAM 乘法的ASCII码调整.
DIV 无符号除法.
IDIV 整数除法.
以上两条,结果回送:
商回送AL,余数回送AH, (字节运算);
或 商回送AX,余数回送DX, (字运算).
AAD 除法的ASCII码调整.
CBW 字节转换为字. (把AL中字节的符号扩展到AH中去)
CWD 字转换为双字. (把AX中的字的符号扩展到DX中去)
CWDE 字转换为双字. (把AX中的字符号扩展到EAX中去)
CDQ 双字扩展. (把EAX中的字的符号扩展到EDX中去)

三、逻辑运算指令
───────────────────────────────────────
AND 与运算.
or 或运算.
XOR 异或运算.
NOT 取反.
TEST 测试.(两操作数作与运算,仅修改标志位,不回送结果).
SHL 逻辑左移.
SAL 算术左移.(=SHL)
SHR 逻辑右移.
SAR 算术右移.(=SHR)  当值为负时，高位补 1 ；当值为正时，高位补 0
ROL 循环左移.
ROR 循环右移.
RCL 通过进位的循环左移.
RCR 通过进位的循环右移.
以上八种移位指令,其移位次数可达255次.
移位一次时, 可直接用操作码. 如 SHL AX,1.
移位>1次时, 则由寄存器CL给出移位次数.
如 MOV CL,04
SHL AX,CL

四、串指令
───────────────────────────────────────
DS:SI 源串段寄存器 :源串变址.
ES:DI 目标串段寄存器:目标串变址.
CX 重复次数计数器.
AL/AX 扫描值.
D标志 0表示重复操作中SI和DI应自动增量; 1表示应自动减量.
Z标志 用来控制扫描或比较操作的结束.
MOVS 串传送.
( MOVSB 传送字符. MOVSW 传送字. MOVSD 传送双字. )
CMPS 串比较.
( CMPSB 比较字符. CMPSW 比较字. )
SCAS 串扫描.
把AL或AX的内容与目标串作比较,比较结果反映在标志位.
LODS 装入串.
把源串中的元素(字或字节)逐一装入AL或AX中.
( LODSB 传送字符. LODSW 传送字. LODSD 传送双字. )
STOS 保存串.
是LODS的逆过程.
REP 当CX/ECX<>0时重复.
REPE/REPZ 当ZF=1或比较结果相等,且CX/ECX<>0时重复.
REPNE/REPNZ 当ZF=0或比较结果不相等,且CX/ECX<>0时重复.
REPC 当CF=1且CX/ECX<>0时重复.
REPNC 当CF=0且CX/ECX<>0时重复.

五、程序转移指令
───────────────────────────────────────
1>无条件转移指令 (长转移)
JMP 无条件转移指令
CALL 过程调用
RET/RETF过程返回.
2>条件转移指令 (短转移,-128到+127的距离内)
( 当且仅当(SF XOR OF)=1时,OP1 JA/JNBE 不小于或不等于时转移.
JAE/JNB 大于或等于转移.
JB/JNAE 小于转移.
JBE/JNA 小于或等于转移.
以上四条,测试无符号整数运算的结果(标志C和Z).
JG/JNLE 大于转移.
JGE/JNL 大于或等于转移.
JL/JNGE 小于转移.
JLE/JNG 小于或等于转移.
以上四条,测试带符号整数运算的结果(标志S,O和Z).
JE/JZ 等于转移.
JNE/JNZ 不等于时转移.
JC 有进位时转移.
JNC 无进位时转移.
JNO 不溢出时转移.
JNP/JPO 奇偶性为奇数时转移.
JNS 符号位为 "0" 时转移.
JO 溢出转移.
JP/JPE 奇偶性为偶数时转移.
JS 符号位为 "1" 时转移.
3>循环控制指令(短转移)
LOOP CX不为零时循环.
LOOPE/LOOPZ CX不为零且标志Z=1时循环.
LOOPNE/LOOPNZ CX不为零且标志Z=0时循环.
JCXZ CX为零时转移.
JECXZ ECX为零时转移.
4>中断指令
INT 中断指令
INTO 溢出中断
IRET 中断返回
5>处理器控制指令
HLT 处理器暂停, 直到出现中断或复位信号才继续.
WAIT 当芯片引线TEST为高电平时使CPU进入等待状态.
ESC 转换到外处理器.
LOCK 封锁总线.
NOP 空操作.
STC 置进位标志位.
CLC 清进位标志位.
CMC 进位标志取反.
STD 置方向标志位.
CLD 清方向标志位.
STI 置中断允许位.
CLI 清中断允许位.

六、伪指令
─────────────────────────────────────
DW 定义字(2字节).
PROC 定义过程.
ENDP 过程结束.
SEGMENT 定义段.
ASSUME 建立段寄存器寻址.
ENDS 段结束.
END 程序结束.

学习地址：http://www2.zzu.edu.cn/qwfw/hbyycai/courses/step.asp?id=8

先上Easy Tetris俄罗斯方块游戏截图：

由于某些人有cheat情节，加上了一个投影功能：^_^

由于非IE浏览器的功能键屏蔽无法完美实现，在游戏页面中的“清爽页面”用来隐藏非游戏区域的其他页面模块以清除页面滚动条，之后可以通过“展开页面”重新展开隐藏的页面。

经过一些测试发现，在某些系统下的非IE浏览器中运行Easy Tetris时，左右移动有粘滞感，有兴趣的朋友可以一起讨论下优化。

Easy Tetris实现核心部分

下一个方块

原型为一个4*4的表格加上方块展示方法，可以通过分别继承两个类（表格类，方块类），加上自身的next方法，来实现。

游戏区域

原型为一个12*20的表格，由于考虑到算法优化，直接设置为（4+12+4）*（4+20+4）的表格，该表格同时具有一个与表格中格子数相同的二维数组，用作方块的边界检测

游戏填色区域

原型为一个12*20的表格，由于考虑到算法优化，直接设置为（4+12+4）*（4+20+4）的表格，方块停止下落后，在对应的行和列中填上与下落方块相同的颜色。

当在“游戏区域”的二维数组中检测到行被填满，则删除填色区域相应的行，同时，在首行前插入相应数量的新行。

游戏方块

原型为一个4*4的表格加上方块展示方法，可以通过分别继承两个类（表格类，方块类）并且加上自身的一些方法来实现，此组件为俄罗斯方块中的重要组件，在Easy Tetris的实现中，该组件担当了大部分的游戏任务，移动，变形，边界检测等等，游戏中多数的方法都被安排在此组件上实现。

方块形状及变形

方块及形状的实现可以通过一个4*4的二维数组来实现，比如方块Z，我们可以写为：

[
[1,1,0,0]
[0,1,1,0]
[0,0,0,0]
[0,0,0,0]
]

1，表示这个位置是一个方块，0表示什么都没有，是不是很简单？由于这种写法会造成数据量的增大，我们可以将此数据形式压缩为16进制形式，还是以Z为例。

1100011000000000 -> 转为16进制 -> 0xc600，于是上面的数组可以简写为：

[0xc600]

数据量大大缩减，然后在程序中需要有一个反转的过程，将此16进制数据转换到2进制数据，需要注意的是，你可能会发现一些16进制的数据转换到2进制后不够如上面数组中的16个元素，你需要在转换后的2进制数据前补足相应个数的 0。

变形部分相对简单，如，Z的变形为：

[
[0,0,1,0]
[0,1,1,0]
[0,1,0,0]
[0,0,0,0]
]

只要将此形状同时保存到方块数组中即可，由于所有方块中，最多变形次数为4次，所以，所有方块都4个一组的来表示，每一个维度表示每一次形变后的形状，在变形方法中只要通过这个索引值来进行递增即可获得下一次形变的样子，然后重新渲染出来即可。

投影部分

需要一个和方块部分一一对应的数组，记录每个方块的投影区域，还是以Z为例，它可以表示为：

[1,1,1,0,1,1,0,0]

前4位 1,1,1,0 表示，在一个4列的格子中，Z，前面3个格子是要进行投影的

后4位 1,1,0,0 表示，投影跟随下落方块的时候，Y坐标在下落方块下面第1个位置（1的个数-1）

投影部分除了需要一个对应的数据外，还需要一个DOM元素进行表示，很简单，就是一个1*4的表格，它需要在下落方块移动、变形的时候做相应的处理。

边界检测

边界检测应该是俄罗斯方块中最重要的算法部分了。在Easy Tetris中采用的是“位与”判断的方法进行处理，即，将下落的方块4*4个区域与即将落在的游戏区域中相应的4*4个区域进行“位与”比较，如果返回0，则说明可以移动，否则，不能移动。

下落的方块每调用一次“移动”的方法之前，都要进行边界检测；

下落的方块每调用一次“变形“的方法之前，也要进行边界检测；

所以，如果你能够足够的优化移动、变形、边界检测这三部分的算法，那么你的俄罗斯方块将会给玩家一个非常高的控制灵敏度，从而大大提高可玩性！

好了，在WEB中用JavaScript编写俄罗斯方块的大体原理就是这样了，下面，我们一起来玩玩这个写好的俄罗斯方块游戏Easy Tetris吧：

http://www.v-ec.com/games/tetris/

添加方法：easyUI.toJSON(obj)

将JavaScript对象转换为JSON字符串

参数：obj javascript对象

返回值：JSON格式字符串

添加方法：easyUI.domEvent()

为DOM节点或[object HTMLCollection]对象添加安全的事件绑定和解除的方法

参数：无

返回值：无

用法：easyUI.easyDomEvent.call(DOM节点或[object HTMLCollection]对象)

方法：DOM节点或[object HTMLCollection]对象.bindEvent(事件类型如'click'，前面不要写'on', 绑定的函数, capture)

方法：DOM节点或[object HTMLCollection]对象.removeEvent(事件类型如'click'，前面不要写'on', 绑定的函数, capture)

属性：DOM节点或[object HTMLCollection]对象.eventList Object，包含绑定的事件对应的函数列表，如：对象.eventList['click']可获取该对象click事件绑定的函数列表

EasyUI API及最新版本下载：http://www.easyui.org.cn

更新时间：2009-6-10