学习新知识,探究新方法,是一个由"知器"——》"格物"——》"明理"——》"成道"依次演变的进化过程,需要循序渐进、由浅入深, 不过最终是否可以修炼成道骨仙风的"佛"家境界,则全凭个人的恒心、悟性和造化

百度和谷歌两大搜索引擎主页,表面看似简单,但内深藏玄机,其页面上的每一个像素点,用价值千金来形容,似乎也不为过。好了,下面我们用数据与事实说话,请看简单统计后的表格数据:


当用户打开网页,需要下载的流量

(注:有的主页logo直接url地址加载,不在下面统计数据中)

另一种统计方法:用mht单文件保存,并结合logo大小统计(此方法没有上表准确)

数据与事实证明,行业只有做到了极致,才有发展前途。曾经独领风骚的雅虎,如今在市场的优胜劣汰中渐渐褪色——数风流人物,还看今朝


小知识:

百度与谷歌的搜索质量,历来争论不休,介绍一款Baidu和Google的杂交搜索工具:百Google度

http://www.baigoogledu.com/

=================================================================================

上面统计表格,纯属个人好奇。现在言归正传,上一篇已简单介绍了学习JavaScript的工具,现在我们再进一步来"知器",知简单而又经典之神器——剖析并学习百度和谷歌两大搜索引擎的主页(由于它们的兼容性、容错性、简洁性,不愧为刚学习JavaScript的经典之作)

由于我们主要学习JavaScript,在此对HTML、CSS、DIV等知识不做过多的介绍,不过在学习使用它们需考虑到各种浏览器的兼容 (例如:中华人民共和国

中国人民银行



教育部

等政府官方主页的兼容性就做得不够好,感兴趣者不妨利用非IE内核的浏览器如Firefox、Opera、Chrome查看之)

百度和Google,分别代表国内与全球最流行、最优秀的搜索引擎,其主页有专业的团队不断进行测试与维护,因此我们重点分析并探究这两款主页



1、百度主页源码

网址:

http://www.baidu.com/

环境:Maxthon浏览器 已登录(sunboy_2050)账户

=================================================================================


剖析1

——设置主页


<a id="st" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com')"

href="



http://utility.baidu.com/traf/click.php?id=215&url=http://www.baidu.com



">把百度设为主页</a>

上面代码中,利用this.style.behavior='url()'; 和 this.setHomePage() 通过onclick用户单击事件,设置主页。但此方法仅限IE内核浏览器

=================================================================================


剖析2

——解决设置主页仅限IE内核问题


var w = window, d = document, n = navigator, k = d.f.wd, a = d.getElementById("nv").getElementsByTagName("a");

if (n.userAgent.indexOf("MSIE") == -1 || window.opera) {

d.getElementById("st").style.display = "none"

};

上面代码中,if语句提取navigator浏览器的信息是否为非IE内核浏览器(MSIE-Microsoft IE)或为opera浏览器,若二者之一成立,则<a id="st" ...>...</a>此信息栏不显示。此外,经过我认真测试,利用Opera、Firefox、Chrome等非IE内核浏览器成功登陆账户后,设置主页栏确为不显示

=================================================================================


剖析3

——map图片映射


<img src="



http://www.baidu.com/img/baidu_logo.gif



" width="270" height="129" usemap="#mp"></p>


<map name="mp">

<area shape="rect" coords="43,22,227,91" href="



http://hi.baidu.com/baidu/



" target="_blank"

title="点此进入 百度的空间">

</map>

上面代码中,map作为img的客户端图片映射,利用

usemap="#mp"

关联起来,设置矩形的

shape="rect"

热点区域

coords="43,22,227,91"

当点击超链接后跳转

href="



http://hi.baidu.com/baidu/



"

=================================================================================


剖析4

——人性化的onclick()事件设计



var w = window, d = document, n = navigator, k = d.f.wd, a = d.getElementById("nv").getElementsByTagName("a");


for (var i = 0; i < a.length; i++) {

a[i].onclick = function() {

if (k.value.length > 0) {

var o = this, h = o.href, q = encodeURIComponent(k.value);

if (h.indexOf("q=") != -1) {

o.href = h.replace(/q=[^&$]*/, "q=" + q)

}

else {

this.href += "?q=" + q

}

}

}

};

上面代码中,通过document对象的getElementById()方法,获得nv对象后,再调用getElementsByTagName获得<a>标签对象集合a

接着,我们仔细分析

if (h.indexOf("q=") != -1)

这段代码的功能,或许你会发现百度在这儿对搜索做得很人性化,详细分析如下:

首先,通过字符编码函数

q =


encodeURIComponent()

转义搜索框k中的value信息

然后,通过

if(


h.indexOf("q=") != -1)

判断链接字符串中是否包含

"q="


信息,if包含,则利用

q=[^&$]*

正则表达式,对其进行&替换(^起始符,$结束符,学习正则表示式,请看我先前的博客

正则表达式的学习与小结

);else不包含,则执行

this.href += "?q=" + q

直接添加

"?q="

子字符串


示例:我们在搜索输入框键入"百度",并点击搜索,得到url:

http://www.baidu.com/s?wd=%B0%D9%B6%C8

然后再换做搜索"google"得到url:http://www.baidu.com/s?bs=%B0%D9%B6%C8&f=8&wd=google 仔细分析链接字符串可知第一个字符均含? 、待搜索关键词前均含wd=()(name)、以及replace后的&(q=),其中


%B0%D9%B6%C8

是汉字"百度"的双字节编码,google英文不做编码转换

最后,人性化设计亮点出现了,通过for(;i<a.length;)循环,让我们输入了搜索信息后,点击其它的链接,如新闻、知道等,直接跳转并检索的信息,正好是在刚才页面输入框中的信息,这样就不需用户重复输入搜索关键字了,简单、快捷


评价:

这个小细节的优化,如果用户不太注意,是感觉不出来的。大家不妨试试

Google

,先在web页面搜索框中输入搜索关键词"google",现在我突然不想检索"google"的web信息,而是想检索"Google"图片信息,于是我们直接点击左上角的Images链接,页面的确也跳转到Images页面,但并未显示检索结果,需要用户重新再点击一下search按钮,然后才进行检索、显示结果的

=================================================================================


剖析5

——函数(function(){}) ()格式的疑惑


(function() {

if (/q=([^&]+)/.test(location.search)) {

k.value = decodeURIComponent(RegExp.$1)

}

})();

在上述代码中,看到了函数function()格式,感觉怪怪的,一来没有函数名,二来函数体还被小括号(function(){})包起来,我刚学JavaScript,对这种函数格式还不懂(感觉是无需调用,直接执行函数体),具体用法还希望有高人能帮我指点一下,给出确切答案

下面我对JavaScript语法,做简单分析:

([^&]+)/.test(location.search)

是对正则表达式

([^&]+)

进行

test()

模式匹配,

location.search

是调用location对象的search属性,提取url中?后的子字符串,如

http://www.baidu.com/s?wd=%B0%D9%B6%C8

则提取

?wd=%B0%D9%B6%C8

子字符串,此句if测试location.search字符串中是否含有匹配以&字符开头的字串;如果有,则对正则表达式的第一列

RegExp.$1

进行反译码(

decodeURIComponent


评析:

对这段代码,以我目前三脚猫的功夫,还没研究明白透彻,希望有武林高手多帮我指点指点,这样我也进步得更快一些,好修炼内功

=================================================================================


剖析6

——Navigator的cookie用法


if (n.cookieEnabled && !/sug?=0/.test(d.cookie)) {

d.write('<script src=http://www.baidu.com/js/bdsug.js?v=1.0.3.0><//script>')

};

在上述代码中,

n.cookieEnabled

是判断浏览器navigator