今天在看Google Reader的代码时发现有这么一段:
<!–[if IE]>
<link href=”/reader/ui/1353527812-scrollIE.css” type=”text/css” rel=”stylesheet” />
<![endif]–>
<!–[if IE 6]>
<link href=”/reader/ui/3030724210-scrollIE6.css” type=”text/css” rel=”stylesheet” />
<![endif]–>
一开始还以为是HTML注释,后来仔细一看不是,于是google了一下,找到了quirksmode.org的一个页面。
原 来此物是一种叫“条件注释”(Conditional Comments)的东东,这是一种只在Windows下的IE上被识别的注释,从IE5开始支持。这就是说,被定义于其中的东西只在IE下被识别,这就 成为了一个很好的跨浏览器样式一致解决方案。下面是其详细的语法:
<!–[if IE]>
在IE下显示
<![endif]–>
<!–[if IE 5]>
在IE 5下显示
<![endif]–>
<!–[if IE 5.0]>
在IE 5.0下显示
<![endif]–>
<!–[if IE 5.5]>
在IE 5.5下显示
<![endif]–>
<!–[if IE 6]>
在IE 6下显示
<![endif]–>
<!–[if IE 7]>
在IE 7下显示
<![endif]–>
<!–[if gte IE 5]>
在IE 5及更高版本下显示
<![endif]–>
<!–[if lt IE 6]>
在IE 6一下版本中显示
<![endif]–>
<!–[if lte IE 5.5]>
在IE 5.5及一下版本显示
<![endif]–>
<!–[if gt IE 6]>
在IE 6以上显示
<![endif]–>
此外,还提供了另外一种方法——注释标签(Comment Tag)。即在Windows和Mac的IE中支持一种非标准的标签:<comment>,包含于这个标签内的内容在IE下将被解释为注释从而无效,而在非IE浏览器中会将comment标签忽略从而使里面的内容有效。
JavaScript中提供获取HTML元素位置的属性:
HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢,前一阵找到的一个比较好的函数,分享一下:
//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
其原理就是利用HTMLElement.offsetParent属性,如果当前元素的父元素不是空(null),则在原本的offsetTop基础上加上当前的offsetTop,然后继续获取父元素的父元素的offsetTop,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。
在编写JavaScript时候,无论项目大小,都应该对所有*.js文件就行管理,尤其是面向对象的项目中。应该如Java一样,将每个类独立出来。但有个问题是JavaScript不支持脚本导入,这使得这个工作变得非常麻烦。
目前我找到了两种方式来做这个工作,即在JavaScript中模拟出import指令的功能。
XMLHTTPRequest对象 + eval();
创建<script>标签以及src属性
两种方式各有千秋。dojo中实现了两个方法:
模拟import的dojo.require();
模拟package的dojo.provide();
研究了一下代码,不过还是没弄明白它是怎么来实现这个dojo.require()的,不过应该可以肯定的是它没有使用创建<script>的方法,因为在生成的页面中没有额外的<script>。
前一阵把神奇一刻的JavaScript都规整了一下,建了个DisneyBox类和众多的子类,脚本的导入使用了创建<script>的方法。那么现在就分别介绍一下两中方法吧,其实都是很简单的一些技巧。
XMLHTTPRequest对象 + eval()函数
这种方法的原理如下:
利用XMLHTTPRequest对象把*.js文件以文本方式加载进来,并保存在responseText中
使用eval()函数将responseText中的文本转换成JavaScript脚本
这样做的好处是载入的脚本立即可以执行,但有可能会遇到很多eval()函数的问题,并且不能跨域引用。
创建<script>标签
原理如下:
用document.createElement(’script’)方法创建一个script元素
设置script元素的type和src属性
将此script元素用appendChild()方法添加到HTML文档中
这种方法的好处是能够比较安全的导入脚本,不需要再利用eval()来解析,但这样会在HTML中引入过多的文件,而且会有其他一些问题。
这里还有一篇很值得看的文章:Qomolangma实现篇(一):内核载入模块system.js的实现。对这两种方法做了更详细的叙述。
在JavaScript 2.0的提案中引入了package的概念,而且提供了package和import指令,拭目以待它的实现吧。
今天看了Flash和Ajax的不完全比较一文,觉得还是有一些想法。
主 要来说说Flash。Macromedia把Flash Video引入了Flash确实是一个相当明智的举动,至少,从现在这些兴起的网络视频网站可以看出。但是,Macromedia一直以Flash作为自 己RIA战略的核心,一直在强化ActionScript,感觉不是一个很好的方向。
作为网络应用的开发工具,Flash具有开发成本过高的劣势。而且,虽然其具有跨平台的优势,但是Flash Player过渡的封闭型却成为了其劣势,比如右键菜单的不兼容、图片无法保存等。而且如果将其应用到大型网络应用项目中,就像Wallop那样,感觉其加载速度是也一个很大问题。
个人感觉,Flash还是适合做产品展示、电影类网站、设计精美的个人网站以及一些特别事件的网站,总之都是一些展示性的,交互任务比较少的。不过,有一个例外是原来Flickr的Organizer,感觉原来用Flash的时候就比现在的Ajax方式流畅。所以应该说是一些比较轻量的交互应用。
Flash 8中开始关注设计师们感觉比较欣慰,这才真正是Flash的强项,Flash的视觉表现力和视觉冲击力确实是无人可比的。而且Flash Video的进一步完善也使Flash应用更广。
希望Flash今后能够继续保持自己多媒体平台的地位,应用的事就让Ajax(或者什么别的也说不准)完成就好了。
前段时间给神奇一刻做一个加载随机图片的JavaScript效 果,图片信息需要放在XML文件里。原来用Flash做过,对actionscript里加载XML文件还比较熟,但是用JavaScript加载XML 还是第一次。原来只知道在IE中可以用ActiveXObjext对象来做,但一直不知道如何在Mozilla下用js加载XML,于是google到了 这篇文章,非常详细!
文章原文地址:http://www.sitepoint.com/article/xml-javascript-mozilla
在我的文章《用JavaScript来读取和显示服务器端的XML文件》 中,我讨论了在微软的Internet Explorer中使用JavaScript来操作XML文件。而现在,我将告诉你们在Mozilla中如何用JavaScript来读取和使用XML文 件中的数据。我们将会看到如何显示标签(March注:tag)中的值、标签中的属性值等等。
从现在起,我不会特意提及Mozilla,因为我们只会涉及Mozilla,包括Netscape 6.x和7.x等(March注:当然也包括Firefox、Flock)。然而当提及Internet Explorer(MSIE或IE)时我会特别说明。
XML文件范例
我将使用和我上一篇文章相同的XML文件,这样会让已经明白那一个XML文件的人比较容易理解。看看下面的XML文件:
<?xml version=”1.0″ ?>
<company>
<employee id=”001″ sex=”M” age=”20″>Premshree Pillai</employee>
<employee id=”002″ sex=”M” age=”24″>Kumar Singh</employee>
<employee id=”003″ sex=”M” age=”21″>Ranjit Kapoor</employee>
<turnover>
<year id=”2000″>100,000</year>
<year id=”2001″>140,000</year>
<year id=”2002″>200,000</year>
</turnover>
</company>
如你所见,上面的XML文件展示了一个公司雇员的详细信息:用<employee>的值(或者说节点值)储存了员工姓名,其他的诸如员工编号(id)、性别(sex)和年龄(age)的信息则被储存在了相同标签(<employee>)id、sex和age属性中。文件同时用标签<turnover>的节点值储存了公司的营业额(turnover),在该标签的year属性中储存了相应的时间信息。
在接下来的章节中,我们将操作上面的XML文件,使之为我们所用。
XML和JavaScript
在我们开始读取以及更高级的操作这个XML文件之前,我们必须得确定用户是否在使用Mozilla浏览器,这点很重要。
检测Mozilla
很显然,你不可能只针对一个浏览器来编写你的基于XML的JavaScript应用,你需要很容易的来支持多种浏览器。然而,如何编写你的应用得取决于你的用户使用什么样的浏览器。
要检测Mozilla,我们只需要使用这个简单的变量:
var moz = (typeof document.implementation != ‘undefined’) && (typeof
document.implementation.createDocument != ‘undefined’);
这个变量可以作为一个布尔值来使用:
if(moz) {
// 的确是Mozilla!!
} else {
// 别的浏览器…
}
加载XML文件
当我们确定了浏览器后,就可以加载XML文件了:
var xmlDoc=document.implementation.createDocument(”", “doc”, null);
xmlDoc.load(”someXMLFile.xml”);
xmlDoc.onload = someProcessingFunction;
上面这段代码的第一行创建了一个xmlDoc对象的实例;第二行加载我们需要的XML文件(本例中为someXMLFile.xml);第三行处理或操作了我们刚才加载的XML文件。
现在,最好用一个不同的函数来加载XML文件:
var xmlDoc;
function importXML(file) {
xmlDoc=document.implementation.createDocument(”", “doc”, null);
xmlDoc.load(file);
xmlDoc.onload = readXML;
}
同时在Mozilla和IE中加载XML文件
Mozilla中绝大部分的操作都可以用于IE中,然而,加载XML文件却不尽相同,让我们看看这个能够同时在IE和Mozilla中加载XML文件的函数:
var xmlDoc;
function importXML(file) […]