加速Javascript：DOM操作优化

可扩展性超文本标记语言XHTML1.0第2版定义XHTML可以将HTML4.0转换为XML1.0格式。

在越来越多的网站中，XHTML的使用正以很快的速度替代HTML4，但是，目前一些主流浏览器对XHTML的支持还不是很好，加上一些网页制作者对XHTML和HTML4之间的差异理解不够，使得XHTML在WEB发展上进程变得缓慢。

XHTML是XML而不是HTML

目前，对XHTML的一个主要误解是它是HTML的另外一个版本。造成此误解的一个事实是Microsoft Internet Explorer仅支持MIME格式为text/html的XHTML而不是被推荐的application/xhtml+xml格式。

当一个XHTML页面被以text/html的MIME格式解析时，它和HTML页面没有任何差别，而当它以text/xml或者application/xhtml+xml的MIME格式解析时，它将遵从严格的XML书写和显示规则。

正确的XHTML格式是一个XML程序并且在书写的时候需要按照以下的严格规则：

1.字符<和&不允许出现在XHTML文档内容中，除非它们被包含在CDATA标签中（<![CDATA[...]]>）

2.注释标签（）内容中不能包含两个连续的横杠（--）

3.包含在注释标签（）中的内容将被忽略

style和script内容中的问题

style和script标签内的内容在XHTML被以XML格式（而不是HTML格式）解析时将造成一些不同的差异。

JavaScript中包含了XHTML中不能存在的字符

Javascript的一些特别字符是XHTML的CDATA标签外不能存在的字符。

<script type="text/javascript">
var i = 0;
while(++i < 10){
    //...
}
</script>

注意：上面的示例代码并非良好的XHTML格式，因为它使用了XHTML或XML中不允许的标记"<"

在style和script内容中使用注释

熟悉HTML的作者通常了解，将style和script标签内容放到注释标签内，将在浏览器中隐藏这些内容，但有些浏览器却不能理解它们。

<style type="text/css">

</style>
<script type="text/javascript">

</script>

上面的示例说明了如何在浏览器中忽略注释标签内的内容，同时，这个示例还显示了浏览器在处理text/xml格式和application/xhtml+xml格式的内容的区别。

Mozilla 1.1+ / Opera 7
不应用CSS，不执行JavaScript

Netscape 7.0x / Mozilla 1.0.x
不应用CSS,但执行JavaScript

Internet Explorer 5.5+
不显示该文档.(参见：https://developer.mozilla.org/Talk:en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents)

style和javascript内含有两个连续的横杠（--）

在XHTML页面的JavaScript中使用注释标签进行处理时产生的另一个问题就是JavaScript中会有出现两个连续的横杠（--）的情况：

<script type="text/javascript">

</script>

使用CDATA代替注释

将script标签内的内容放到CDATA块中可以很好地处理注释中出现两个连续的横杠的问题，不过这将使得一些低版本的浏览器不支持它，因为它们不能理解XML。好在，我们可以通过使用JavaScript中的注释符对CDATA块进行注释以达到兼容的目的。

<script type="text/javascript">
//<![CDATA[
var i = 0;

while (++i < 10)
{
    // ...
}
//]]>
</script>

推荐的xhtml与html兼容处理方式

不要在XHTML页面中直接书写style和script，一个好的替代方案是使用外部文件来书写CSS和JavaScript，然后再在XHTML中进行引入。

这个推荐方案看起来非常不错，不管怎样，它使得页面从text/html向application/xhtml+xml转变的过程中，至少在接下来的这些年里不会出现什么问题。

XHTML1.0与HTML兼容指引
W3C Group即将为您带来XHTML1.0与HTML的16条兼容指引。

Tags: XHTML XHTML Javascript Javascript css css

分类:Web Develop | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2303

WEB Workers提升WEB前端脚本JavaScript的处理性能

作者:dh20156 日期:2009-04-30

WEB Workers提升WEB前端脚本JavaScript的处理性能

你有没有想过在运行大型复杂的JavaScript脚本的时候不会发生浏览器假死？

你有没有想过JavaScript可以在后台运行？

你有没有想过JavaScript函数甚至可以在多个进程中同时运行？

分类:Web Develop | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3670

JavaScript Framework EasyUI API

作者:dh20156 日期:2009-04-16

EasyUI

来自DHTML精英俱乐部的简单易用功能强大的轻量级WEB前端JavaScript框架!

EasyUI的组成: EasyUI.js核心文件; 可扩展的附加组件

EasyUI打包下载

EasyUI API

easyUI.fpbind(): 自执行方法,为Function.prototype添加bind方法，用于提供保持对象作用域的事件方法的邦定; 参数：无; 返回值：无
easyUI.IAHTML(): 自执行方法,为HTMLElement.prototype添加insertAdjacentHTML方法，用于为不支持insertAdjacentHTML方法的浏览器提供兼容; 参数：无; 返回值：无
easyUI.contains(node,childNode): 用于判断俩DOM节点是否存在包含与被包含的关系; 参数：DOM元素A,DOM元素B; 返回值：true|false
easyUI.getElementsBy(attribute,value,tagName,scopeDom): 在指定的DOM节点scopeDom下查找属性名称为attribute，属性值为value的，tagName为tagName的DOM元素; 参数：attribute属性名称,属性值value,DOM元素tagName,指定要查找的DOM节点范围scopeDom; 返回值：DOM Collection
easyUI.getPosition(domobj): 取元素坐标，如元素或其上层元素设置position relative，应该getPosition(子元素).y-getPosition(父元素).y; 参数：DOM元素; 返回值：{x:value,y:value}
easyUI.getTarget(event): 获取事件触发对象; 参数：event; 返回值：DOM元素
easyUI.setPosition(domobj,x,y): 为dom元素设置x坐标和y坐标; 参数：DOM元素,x,y; 返回值：
easyUI.getStyle(domobj,stylename): 获取元素当前样式; 参数：domobj,stylename; 返回值：cssStyle value
easyUI.stopEvent(event): 阻止事件冒泡和Event返回值; 参数：event; 返回值：
easyUI.ajax.post(sUrl,sArgs,bAsync,fCallBack,fFailure): 使用xmlhttp发送post请求; 参数：sUrl 请求地址,sArgs 请求参数串,bAsync 是否异步,fCallBack 回调函数,fFailure 服务器错误处理函数; 返回值：
easyUI.ajax.get(sUrl,bAsync,fCallBack,fFailure): 使用xmlhttp发送get请求; 参数：sUrl 请求地址(包括请求参数),bAsync 是否异步,fCallBack 回调函数,fFailure 服务器错误处理函数; 返回值：
easyUI.clearTxtNode(domobj): 清除DOM元素内的#text节点; 参数：domobj; 返回值：
easyUI.checkForm(form,fooWarningMsg): 验证form表单; 为需要验证的输入项添加两个自定义属性作为判断的依据以及需要执行的验证; validate="这里输入验证方法，多种验证以分号隔开"; msg="这里输入验证不合格时提示的信息，与validate一一对应，如果信息数少于验证方法数量，则后面的验证不合格时将显示最后一条提示信息"; 验证方法:; isFilled 必填; isNaN 如果填写，必须为非数字; isNumber 如果填写，必须为数字; isInt 如果填写，必须为整数; isEmail 如果填写，必须为Email格式; isEmailList 如果填写，必须为以分号;隔开的1个或多个Email格式; fileType(ext|ext|ext|...|ext) 如果填写，必须为指定扩展名ext列表内的文件类型; moreThan(N) 如果填写，必须为大于N的数; lessThan(N) 如果填写，必须为小于N的数; equalTo(N) 如果填写，必须为等于N的数; maxLength(N) 如果填写，最大长度不超过N; minLength(N) 如果填写，最小长度不小于N; 详情请参见：easyValidate_demo.html; 参数：form 表单,fooWarningMsg 提示警告信息函数，如果没有将直接alert出警告信息。; 返回值：true|false
easyUI.maxwin(): 最大化浏览器窗口; 参数：; 返回值：
easyUI.queue(list,delay): 函数执行队列; 参数：list 函数队列数组,delay 每个函数运行后延迟时间; 返回值：
easyUI.doWhileExist(sModuleId,oFunction): 指定的DOM节点存在才执行指定的函数; 参数：sModuleId 指定的DOM节点ID,oFunction 要运行的函数,参数为前面指定的DOM节点; 返回值：

基于EasyUI开发的可扩展附加组件

DHTML精英俱乐部web前端专家收集共享JavaScript,Css精华代码库 - Javascript and Css Code Library - JsLib

Tags: Javascript Javascript framework framework easyUI easyUI api api

分类:Web Develop | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1748

如何保证JavaScript和Asp、Php等后端程序间传值编码统一

作者:dh20156 日期:2009-04-10

在WEB开发过程中，前后端要求数据编码一致的处理是经常会碰到的！

分类:Web Develop | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 2598

如何在新项目中使用EasyUI当做前端JavaScript框架

作者:dh20156 日期:2009-04-03

开发运营一个新项目，前端部分使用来自Web Develop Navigator!的EasyUI作为开发框架，运行良好！

分类:My Life | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2047

非常简易使用的JavaScript框架EasyUI发布

作者:dh20156 日期:2009-03-19

EasyUI是来自Web Develop Navigator!的一个JavaScript Frame Work，附带几个基于EasyUI的控件：

分类:Web Develop | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 3042

JavaScript实现多功能TabStrip - MagicSwitch

作者:dh20156 日期:2009-03-10

Web Develop Navigator!和“飘零雾雨”一起，通过JavaScript和Css写了一个多功能的TabStrip(MagicSwitch)，还有一些功能没有去扩展，先凑合用下！

分类:Web Develop | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1610

JavaScript实现简易日历Easy Calendar V1.0

作者:dh20156 日期:2009-03-08

Web Develop Navigator!新开发一个JavaScript的简易日历，Easy CalenDar V1.0

方便绑定到控件

支持“组”关系

自由设定可选范围

支持多月份显示

红色字为今天，高亮块为选中日期

自定义属性：

calendar="calendar" 用于程序检测是否需要给该控件绑定日历

format="y-m-d" 设置此日历格式，仅支持：y-m-d，y/m/d，m/d/y

start="today()" 设置可选范围起始时间，值：y-m-d或y/m/d格式的日期；today()今天；beforeDom(domID)绑定到某控件值之前；afterDom(domID)绑定到某控件值之后；daysLater(n)n天之后；monthLater(n)n月之后；yearsLater(n)n年之后；

end="daysLater(10)" 设置可选范围结束时间，值，参见start

handles="pick1-1,pick1-2" 设置其他触发日历的控件，值为domID

totalshow="2" 设置需要显示几个月的日期，值为正整数

extendir="2" 设置几个月的日期排列，2为竖排，6为横排

分类:Web Develop | 固定链接 | 评论: 3 | 引用: 0 | 查看次数: 2074