关于AVM2和Firefox

在前几天的Web2.0大会上,Adobe开源了AVM2的源代码,并将她捐献给了Mozilla社区,通过Tamarin项目来管理这么源代码。

至于这个东西能做什么,和带来什么好处,我这就不说了,网上挺多的。

从Adobe来说,开放AVM2的源代码,并不是开放了Flash。通过测试AVM2要比SpiderMonkey快很多。所以,AVM2将成为Mozilla的第二代JavaScript Engine。如果成功整合进后,对JavaScript的应用将大大的增强。Apollo将是Adobe未来的只要产品,Apollo到底是什么东西,我不是很清楚,但我感觉像整合了Flash功能的浏览器。像Firefox如果在占有率上面能达到30%那就非常不错了,因为IE总是被一起出售的。这让我感觉Adobe想和Mozilla一起来对抗Microsoft一样。

而Mozilla这边,原来的SpiderMonkey已经很旧了。更新应该是必然的。Firefox真是积万千宠爱于一生啊!Laughing

JQuery1.1发布了

随着ajax的流行,出现了许多优秀的JS框架,JQuery就是其中之一。今天JQuery终于发布了1.1版,有一些重要的更新,而且今天也是JQuery的生日。jQuery Birthday: 1.1

上次写了一篇小教程,不过数据丢了。准备把原来的整理一下。

这段代码实现的效果是在站点归档中“其它信息”展开效果,代码如下:

$(function(){
    var collapsibles = $("dl.collapsible");
    $(collapsibles).each(function(i){
        var collapsible = collapsibles[i];
       
        $("dt.collapsibleHeader", collapsible).click(function(){
            var container = $(this).parent();
            if (!$(container).is(".collapsible")) {
                return false;
            }
           
            if ($(container).is(".collapsedInlineCollapsible")) {
                $(container).addClass("expandedInlineCollapsible").removeClass("collapsedInlineCollapsible");
            } else {
                $(container).addClass("collapsedInlineCollapsible").removeClass("expandedInlineCollapsible");
            }
        });
    })

    if ($(collapsible).is(".collapsedOnLoad")) {
        $(collapsible).addClass("collapsedInlineCollapsible").removeClass("collapsedOnLoad");
    } else {
        $(collapsible).addClass("expandedInlineCollapsible");
    }
});

这段代码需要在页面加载完毕后执行,所以我们使用$(function(){})来达到这个效果,还一种等价的写法$(document).ready(function(){})。

$("dl.collapsible"),这是JQuery中最常用的方法,用于查找指定的元素,而且支持CSS和XPath的语法。这样所有的dl.collapsible被匹配。(如果你对CSS的语法不了解的放,可以先看看教程)

接着使用each进行遍历,再看下面这段:

$("dt.collapsibleHeader", collapsible).click(function(){
            var container = $(this).parent();
            if (!$(container).is(".collapsible")) {
                return false;
            }
           
            if ($(container).is(".collapsedInlineCollapsible")) {
                $(container).addClass("expandedInlineCollapsible").removeClass("collapsedInlineCollapsible");
            } else {
                $(container).addClass("collapsedInlineCollapsible").removeClass("expandedInlineCollapsible");
            }
        });

 $("dt.collapsibleHeader", collapsible),第二个参数是指定上下文,并在指定的上下文中查找。后面的click(function(){})是注册单击事件并绑定一个函数。is用来判断是否包含指定表达式;addClass和removeClass分别是添加和移除class。最后一段:

if ($(collapsible).is(".collapsedOnLoad")) {
        $(collapsible).addClass("collapsedInlineCollapsible").removeClass("collapsedOnLoad");
    } else {
        $(collapsible).addClass("expandedInlineCollapsible");
    }

当JS被禁用时所有的dl展开。 

代码重构

在使用ZF之后,我对MVC有了真正的了解。在前面的一些代码中,我在Action中加入了太多的业务代码,Struts是在Java中非常有影响 力的MVC框架,通过在网上查看这家伙的文章中,发现Action只是起到“决定做什么”的作用,并不是“怎么做”。我觉得这篇文章讲得非常好:MVC在Web系统中的模式与应用。这样当分开后,业务可以得到更大的重用。

重构是XP中的一个重要理念,不要害怕丢弃原来劣质的代码,只有这样才能不断优化设计结构,增加系统的可重用性和扩展性。虽然,我现在还不能在项目中实现XP编程理念,但我会不断的将这么理念引入的我的项目中去。

eclipse下面PHPIDE项目现在已经改了名字PHP Development Tool,现在我的开发环境就是她了。虽然,现在还是0.7RC1版,但功能也基本差不多了,最重要的免费的。

最后,关于现在站点的小bug,网志的标题都是一样的。这样对SEO极度不好,现在用google搜都搜不到啦。。。。

由JQuery的优化想到…

昨天,再看JQuery的资料的时候,在Learning jQuery的网站中,最新的文章叫到了关于JQuery优化的小技巧。

由于JQeruy的$非常强大,有多种查询条件,由于不同的查询条件,在速度上是不一样的。里面主要对三种查询方式做了说明:

  1. ID : $(’#some-id’)
  2. Element : $(’div’)
  3. Class : $(’.some-class’)

上面的顺序是从快到慢的。显然通过ID查找是最快的,然后是元素,再就是Class。怎样在页面中合适布局ID,Element,Class是非常有讲究的,估计这是前端架构师的工作了。不过,就现在的状况能注意到这方面的人才很少。

希望能够认识一些这样的朋友,Laughing

一个理解XPath的好地方

最近,我想把某些信息以XML的格式组织进行,这就需要一种查询方法。XPath可以用来查询XML文档中的节点,语法并不难,但非常灵活。找到一个很直观的介绍语法的中文站点。

XPath而且这个站点有丰富的关于XML的资源。ZVON

小试JQuery(续)

这个展开效果的html代码,是在Plone里面扒出来的。原来处理的更好,我这只是做了一个减化。原理只是通过更改dl的样式表来实现这个效果。希望这个HTML代码示例将帮助到任何试图做同样事情的人,因为它有时候是很困难的。当然,如果它不是你想要的,那么也请留下评论,并且请继续阅读以了解如何实现我所说的效果。

JQuery这个JS框架用起来比较舒服。你可以通过$(),这个来找到你的想的结点,支持元素,id,class,还可以使用XPath。toggle这个方法有两个参数,第一个是点击数为奇数时,执行的操作,第二个参数是点击数为偶数时,执行的操作。

CSS:

dl.collapsible {
border: 1px dashed #DD8200 !important;
margin: 1em 0 0 0;
padding: 0;
font-weight: 400;
}

dl.collapsible dt.collapsibleHeader {
display: block;
float: right;
background: White;
line-height: 1.2em;
position: relative;
top: -0.6em;
width: auto;
margin: 0 2em -0.6em 0;
padding: 0 0.5em;
color: #000;

}
dl.collapsible dd.collapsibleContent {
margin: 0;
padding: 0 1em;
clear: left;
}

dl.expandedInlineCollapsible dt.collapsibleHeader{
padding: 0 6px 0 22px;
background: White url(/skin/images/treeExpanded.gif) no-repeat 6px 50%;
cursor: pointer;
}

dl.collapsedInlineCollapsible dd.collapsibleContent{
display: none;
}
dl.collapsedInlineCollapsible {
border: none !important;
height: 1em;
width: auto;
display: inline;
}
dl.collapsedInlineCollapsible dt.collapsibleHeader {
position: static;
float: none;
margin: 0;
padding: 0 0 0 22px;
line-height: 1em;
background: transparent url(/skin/images/treeCollapsed.gif) no-repeat 6px 50%;
cursor: pointer;
display: inline;
}

IE会有点小Bug:

* html dl.collapsible dt.collapsibleHeader {
margin-right: 1em;
}

官方站点上有更多的文档www.jquery.com

小试JQuery

这几天再看JQuery,感觉是个非常优秀的JS框架。今天,通过她加入了一个展开的效果。代码如下:

$(document).ready(function(){
    $("dt.collapsibleHeader").toggle(function(){$("dl.inline").removeClass("collapsedInlineCollapsible").addClass("expandedInlineCollapsible");}, function(){$("dl.inline").removeClass("expandedInlineCollapsible").addClass("collapsedInlineCollapsible");});
});

 Innocent困了,明天再说

RSS的输出

最近想做点关于RSS的应用,不过在一开始就碰到了问题。RSS到底应该是全文输出,还是部分输出。其实这个问题很矛盾,全文输出对订阅的用户来说,非常有利。部分输出对网站有利。

像某些门户要的就是点击和PV,所以RSS也只输出部分,如果想看完就必须去某个网站。

部分输出也是没有关系,如果没有点击和PV,真不知道那些网站怎么活。

你是想让你的订阅者更方便?还是想让你的订阅者更麻烦?Laughing

IE华丽的新装傲游2.0

今天,发布了傲游2.0的第一个beta版。我试用了一下,说说感想。

真的,挺不错的新装。 现在只有1.6M的大小,UI上面整体都比较漂亮的,还是有些细节需要打磨,使用中最让我受不了的是,进入的https的页面时,地址栏变成黄色了,本来是起到警告的作用,但这颜色太…

就浏览速度来说,让我感到有些惊讶,非常的快,不过由于内核的落后,在某些方面还是差了点,比如说:平滑滚动。

而且在内存占用方面也做比较好。如果Vista的内存要求在1G左右的话,那100M还算什么呢。

不知道装了IE7后,是怎么样的。

估计,又有fans们开始叫骂了。 在这里我只想说IE就像人的皮肤,而傲游2.0则是一款名牌服装。