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

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


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

（注：有的主页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