Archive for 六月, 2009
yui 3 于本月24日终于发布 beta版
星期天, 六月 28th, 2009 by 裕波
今天浏览yui3的官方网站，发现于6月24日，yui3团队正式发布了beta 1。
详情请查看yui3官方网站。
http://developer.yahoo.com/
同时可以在这里查看yui3的实例：
http://developer.yahoo.com/yui/3/examples/
YUI 3, the first beta release of our next-generation JavaScript and CSS library, is a big step forward, featuring improvements to every facet of the library.
The syntax is more terse, allowing you to write more compact code using techniques like chaining. The API is selector-driven, which allows you to target page elements flexibly. The library is even more modular and granular than before, so you only put code on the page for features you need. And YUI 3 retains all of the power and scalability of its predecessor.
谷歌真的被和谐了吗？
星期三, 六月 24th, 2009 by 裕波
2009年6月24日21:40的样子，听到群里朋友说谷歌不能访问了，我很奇怪，我刚刚还在用呢，而且我还使用了gtlak，怎么不能用呀，其实此时我还在使用g.cn,后来才知道google.com不能访问了，马上进行测试，果然如此，包括gtlak，gmail很多谷歌国外的产品都已经无法使用。
不知道是因为受前几天的谷歌事件的影响，国外的产品被和谐了还是谷歌在进行维护呢？可是此前没有任何这样的消息发出呀！
让我们拭目以待。
正式获得google Wave的用户名
星期二, 六月 23rd, 2009 by 裕波
通过几次的信息提交，今天早上打开google talk就发现了一封邮件，打开一看，原来是google Wave注册成功啦！
这次的内容很少，主要是祝贺一下，很久也没有写博客了，也算是为我的博客增加一个新的文章吧！
谷歌推出新的页面性能测试工具：Page Speed
星期三, 六月 10th, 2009 by 裕波
页面性能这个问题我已经谈过很多次了，以前想测试页面性能，除了自身的感受之外，那么主要还是借助雅虎推出的Mozilla Firefox上基于firebug的yslow进行测试。当然还有一个老牌的测试工具httpwatch，他主要提供一些我们很需要的一些信息，我们通过他的信息进行分析我们所需要改进的，那yslow呢？其实也差不多，只是他有一个黄金规则。那么今天我很高兴的为大家介绍另外一个新款的页性能测试的工具，他就是谷歌的Page Speed，英文可以理解成页面速度。这可谓真的是前端开发，或者是互联网行业技术人员的福音。这里就不在多说，我还们还是老规矩，来看几张关于Page Speed的使用的截图。在截图之前忘记告诉大家了，Page Speed他也基于属于Firefox的插件，他也像yslow一样基于firebug的，但是他可以说是yslow和httpwatch的结合体。分别为：Page Speed与Page Speed activity。他在某些方面感觉比yslow真细一些。比如关于css方面的一些信息，我们还是先来看图吧！
启动界面
测试结果
测试结果
详细信息
像httpwatch一样的工具右侧
像httpwatch一样的工具
我最看重的是你图中关于详细页图片的地方，还有下面有一两个地方，对前端来说是非常有用的！他替我们分析了我们在书写css的时候一些不良的习惯，也许他的提示不一定完全准备，但是至少他的提示也能让我们清楚，我们还需要在那些地方注意。
我不想在仔细说他们的使用方法了，其实使用方法和yslow也差不多，详情可以参见官方页面，也可以在这里下载相关的插件。
使用说明页：http://code.google.com/intl/zh-CN/speed/page-speed/docs/using.html
插件下载页：http://code.google.com/intl/zh-CN/speed/page-speed/download.html
比较YUI3和JQuery
星期天, 六月 7th, 2009 by 裕波
一个有品质的网站的前端肯定不允许用多种框架。前端工程师们的职业生涯会辗转不同的公司，如果过分依懒框架可想而知到了新的公司后，不得不重新学习。现在 世面上的开源框架很多，据我所知国内各大网站使用的框架也是五花八门，其中使用自主开发的框架不在少数。这样肯定会成为妨碍国内前端开发这个行业发展的负面因素。为开 发人才的流动制造障碍，为产品的前端技术创新制造障碍，削减前端开发的价值。实际上目前主流的Javascript框架在框架思想上越来越接近了。这是好事，我 可以凭借之前的框架使用经验迅速掌握另一种。我想这一定是框架发展的方向，形势所趋。现在的开源框架足够多了，我非常反对国内自主开发的框架，应该把精力放在产品创新上。
我试图用一个小例子比较一下YUI3和JQuery，也许你会发现它们各有特点，但在设计思想又有很多相似的地方。如果领会其思想可以比较快的上手其中的任意一个框架。
请看下面两个例子，实现完全一样的功能。
http://hikejun.com/demo/sample-1-yui3.html
http://hikejun.com/demo/sample-1-jquery.html
YUI3需要引一个种子文件8k:
http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.jsJQuery
JQuery需要引的core文件17k:
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
可见YUI3的种子很小，主要是实现一个加载器。开发中需要的组件都通过它加载，就是说不用在页面中一一列出了，这样做一方面性能提升很多，另一方面管理起来超级方便。这种loader机制最早出现于Dojo中，我想这也是未来框架必备的部分。
JQuery没有Loader机制。作者John Resig凭借他的天才能力把所有常用的功能都集成到一个文件中并且不大。
从本例的源文件中可以看到，两种实现方式的代码量差不多，YUI3在这一点上摆脱了YUI2.x给人大块头的印象。比如这句比较体现两家风格：
popup.set(’innerHTML’, desc.get(’innerHTML’)).setStyles({
display: “block”,
opacity: 0.9,
top: (ev.clientY + 10) + “px”,
left: (ev.clientX + 10) + “px”
});
JQuery的风格：
popup.html(desc.html())
.show()
.css(”opacity”, 0.9)
.css(”top”, (ev.clientY + 10) + “px”)
.css(”left”, (ev.clientX + 10) + “px”);
JQuery的精练是为人津津乐道的，在语言上JQuery追求极简且极富语义，像css, html，att…有些随意像外行话（so what）。
YUI3秉承Yahoo!严谨专业风范，像用的关键词innerHTML, parentNode, …这些都是Javascript标准的关键词。
YUI3借签了JQuery很多优点，像Chaining，CSS3 Selector。两家风格虽不同，但彼此看起来又很亲切。
YUI框架系统完整，文档丰富。JQuery插件丰富，精炼易用。YUI3 beta版明年Q1一定会发布。
既便你目前还没用YUI3或JQuery，也完全有必要看看它们的生态系统的构成。因为它们代表了Javascript框架发展的方向。
职业的前端开发工程师应该掌握1〜2种框架。
转载自克军的博客：http://blog.360.yahoo.com/blog-sOW1QOA9crUyOdXFxOeK4xc-?cq=1&p=193
javascript：菜鸟谈childNodes与parentNode
星期三, 六月 3rd, 2009 by 裕波
如果你是高手，对于childNodes与parentNode并不陌生。其实他们就是DOM的两个特性/方法而以。
childNodes：表示对象的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性;
parentNode：表示对象的父级节点。
当我解释完这两个方法以后，可能有人会问，他们有什么用，嘿嘿，当然有用，我们下面有一个例子来说明他们的作用。
如果我们有一个ul列表，大家都知道ul中只能放li标签，但是li标签中我们还可以放入ul，那么这个ul中必然就有li，但是我现在有一个要求就是我想为第一个ul下面的第一级li鼠标移上去的时候加一个样式，这样一个需求我们应该怎么做呢？请看效果及代码：
<ul id="abc">
<li id="ccc"><ul>
<li id="ddd">aaa</li>
<li>aa</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
</ul></li>
<li>das</li>
<li>dadf</li>
<li>dsaf</li>
<li>sdafu <ul>
<li>adfsaf</li>
<li>sdaf</li>
<li>sdaf</li>
<li>asdf</li>
<li>sfa</li>
</ul> </li>
<li>aa</li>
</ul>
<script type="text/javascript">
<!--
(function() {
var ulList = document.getElementById("abc");
var ulListChild = ulList.childNodes;
for (var i=0; i<ulListChild.length; i+=1) {
ulListChild[i].onmouseover = function() {
this.style.border = "1px solid #ccc;";
}
}
})();
//-->
</script>
当然这段代码的效果并不好，我只是想说明的是，childNodes是获取到的是id为abc的ul下的第一级li，我们以鼠标移到li上，鼠标加上边框的时候可以看出，当我们鼠标移到li下ul下的li时，并没有加上边框。下面我们可以用另外一串代码来查看效果：
<ul id="abc">
<li id="ccc"><ul>
<li id="ddd">aaa</li>
<li>aa</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
</ul></li>
<li>das</li>
<li>dadf</li>
<li>dsaf</li>
<li>sdafu <ul>
<li>adfsaf</li>
<li>sdaf</li>
<li>sdaf</li>
<li>asdf</li>
<li>sfa</li>
</ul> </li>
<li>aa</li>
</ul>
<script type="text/javascript">
<!--
(function() {
var ulList = document.getElementById("abc");
var ulListChild = ulList.childNodes;
alert(ulListChild.length);
for (var i=0; i<ulListChild.length; i+=1) {
for (var j=0; j<ulListChild[i].childNodes.length; j+=1 ) {
for (var k=0; k<ulListChild[i].childNodes[j].childNodes.length; k+=1) {
ulListChild[i].childNodes[j].childNodes[k].onmouseover = function() {
this.style.border = "1px solid #ccc;";
}
}
}
}
})();
//-->
</script>
我的写法就已经相当复杂了，因为我也是菜鸟，我也是初学者，只是想说明一个事情而以。
我们可以看到一个代码块中是ID为abc的子元素，而第二个代码块却是第一级li下面的li加上了边框。
我们在来看看他们的关系，也就是parentNode方法。请查看效果：
<ul id="abc">
<li id="ccc"><ul>
<li id="ddd">aaa</li>
<li>aa</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
</ul></li>
<li>das</li>
<li>dadf</li>
<li>dsaf</li>
<li>sdafu <ul>
<li>adfsaf</li>
<li>sdaf</li>
<li>sdaf</li>
<li>asdf</li>
<li>sfa</li>
</ul> </li>
<li>aa</li>
</ul>
<script type="text/javascript">
<!--
(function() {
var ulList = document.getElementById("abc");
var ulListLi = document.getElementById("ccc") ;
var ulListLiLi = document.getElementById("ddd") ;
alert(ulListLi.parentNode === ulList);//true
alert(ulListLiLi.parentNode === ulList);//false
alert(ulListLiLi.parentNode === ulListLi.childNodes[0]);//true
})();
//-->
</script>
不难看出他们之间的关系，ulListLi.childNodes[0]这里代表的是id为ccc下面的第一个元素，其实这里也可以写成firstChild，嘿嘿，以后在说这个方法。
注意：火狐在获取childNodes的时候，在计算上有一些特别。
javascript：火狐3.0下处理js全局时的bug
星期一, 六月 1st, 2009 by 裕波
下面有三个代码块，今天在群里遇到的，从理论的角度来说，点击这个盒子以后，他们都应该执行十次，弹出十个为10的对话框，但是第一个代码块，因为使用的是全局的，他在火狐下只会执行一次，也就是只弹出一个对话框，使用onload和(fn)();方法以后，却能正常显示，所以我个人觉得这是火狐一个bug。通过反复测试，谷歌浏览器，火狐，IE，Opera，还有Safari，结果都是火狐出现一次，其他浏览器出现十次。
通过我今天在火狐3.5B4下测试得出的结果，是10次，足已证明这是火狐3.0在处理js全局时的一个bug。
<div style="border:1px solid red; padding:10px;" id="d" index="0">1</div>
<script LANGUAGE="JavaScript">
<!--
var d = document.getElementById("d");
for(var i=0;i<10;i++){
if (document.all){
d.attachEvent("onclick",function(){alert(i);d.innerHTML = d.innerHTML+"1";});
}else{
d.addEventListener("click",function(){alert(i);d.innerHTML = d.innerHTML+"1";},false);
}
}
-->
</script>
(function() {
var d = document.getElementById("d");
for(var i=0;i<10;i++){
if (document.all){
d.attachEvent("onclick",function(){alert(i);d.innerHTML = d.innerHTML+"1";});
}else{
d.addEventListener("click",function(){alert(i);d.innerHTML = d.innerHTML+"1";},false);
}
}
})();
<div style="border:1px solid red; padding:10px;" id="d" index="0">1</div>
<script LANGUAGE="JavaScript">
<!--
window.onload = function() {
var d = document.getElementById("d");
for(var i=0;i<10;i++){
if (document.all){
d.attachEvent("onclick",function(){alert(i);d.innerHTML = d.innerHTML+"1";});
}else{
d.addEventListener("click",function(){alert(i);d.innerHTML = d.innerHTML+"1";},false);
}
}
}
-->
</script>
看微软的新搜索bing有感
星期一, 六月 1st, 2009 by 裕波
前不久在蓝色理想看到有人说微软的新搜索bing在6月要出来了，今天输入http://cn.bing.com，嘿嘿，出来了！
这次就不想贴图了，简单的说下我对他的看法：
1、他依然采用了原来live的风格，本人不太喜欢，还放了一只老虎，想称霸互联网，嘿嘿；
2、输入关键没有谷歌的那种提示功能，个人不喜欢，一点都不方便；
3、虽然前不久我说谷歌推出了一个新的功能，叫百宝箱，但是他的搜索结果默认情况下是关闭的，需要你点击打开，微软的这样bing却是直接开启的这种功能，一点不爽，把搜索结果放到页面正中，一点不便于阅读，个人觉得；
4、收录的东西，排在第一个的就是一个无法打开的网站，我不知道是如何搜索的，这样的结果，谁敢用？
5、搜索结果也加了一个背景，非常不舒服;
6、非常弱化他的高级功能，几乎让人看不到的感觉，
好了，不说了，就说这些，反正我感觉不爽，反正我不想在用！但是有可能以后会在去测试他。
功能列表
关于我
周裕波，web前端开发从业者，互联网爱好者。
gtalk:itchina110@gmail.com
@lovevfp