JS学习笔记02

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

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

 当用户打开网页，需要下载的流量（注：有的主页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）账户

[xhtml] view plaincopyprint?

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
  5. <title>百度一下，你就知道 </title>
  6. <mce:style><!--
  7. body
  8. {
  9. font: 12px arial;
  10. text-align: center;
  11. background: #fff;
  12. }
  13. body, p, form
  14. {
  15. margin: 0;
  16. padding: 0;
  17. }
  18. body, form, #lg
  19. {
  20. position: relative;
  21. }
  22. td
  23. {
  24. text-align: left;
  25. }
  26. img
  27. {
  28. border: 0;
  29. }
  30. a
  31. {
  32. color: #00c;
  33. }
  34. a:active
  35. {
  36. color: #f60;
  37. }
  38. #u
  39. {
  40. padding: 7px 10px 3px 0;
  41. text-align: right;
  42. }
  43. #m
  44. {
  45. width: 650px;
  46. margin: 0 auto;
  47. }
  48. #nv
  49. {
  50. font-size: 16px;
  51. margin: 0 0 4px -32px;
  52. }
  53. #nv a, #nv b, #su, #lk
  54. {
  55. font-size: 14px;
  56. }
  57. #lg
  58. {
  59. margin: -17px 0 9px;
  60. }
  61. #fm
  62. {
  63. padding-left: 111px;
  64. text-align: left;
  65. }
  66. #kw
  67. {
  68. width: 391px;
  69. line-height: 16px;
  70. padding: 3px 1px;
  71. margin: 0 6px 0 0;
  72. font: 16px arial;
  73. }
  74. #su
  75. {
  76. width: 78px;
  77. height: 28px;
  78. line-height: 24px;
  79. }
  80. #kw, #su
  81. {
  82. vertical-align: middle;
  83. }
  84. #lk
  85. {
  86. margin: 33px 0;
  87. }
  88. #lk span
  89. {
  90. font: 14px "宋体";
  91. }
  92. #lm
  93. {
  94. height: 60px;
  95. }
  96. #lh
  97. {
  98. margin: 16px 0 5px;
  99. font: 12px "宋体";
  100. }
  101. #lh a
  102. {
  103. font: 12px arial;
  104. }
  105. #hp
  106. {
  107. position: absolute;
  108. line-height: 14px;
  109. margin: 0 0 0 6px;
  110. top: -1px; *top:2px}
  111. #cp, #cp a
  112. {
  113. color: #77c;
  114. }
  115. #sx
  116. {
  117. color: #00C;
  118. text-decoration: underline;
  119. cursor: pointer;
  120. }
  121. --></mce:style><style mce_bogus="1">        body
  122. {
  123. font: 12px arial;
  124. text-align: center;
  125. background: #fff;
  126. }
  127. body, p, form
  128. {
  129. margin: 0;
  130. padding: 0;
  131. }
  132. body, form, #lg
  133. {
  134. position: relative;
  135. }
  136. td
  137. {
  138. text-align: left;
  139. }
  140. img
  141. {
  142. border: 0;
  143. }
  144. a
  145. {
  146. color: #00c;
  147. }
  148. a:active
  149. {
  150. color: #f60;
  151. }
  152. #u
  153. {
  154. padding: 7px 10px 3px 0;
  155. text-align: right;
  156. }
  157. #m
  158. {
  159. width: 650px;
  160. margin: 0 auto;
  161. }
  162. #nv
  163. {
  164. font-size: 16px;
  165. margin: 0 0 4px -32px;
  166. }
  167. #nv a, #nv b, #su, #lk
  168. {
  169. font-size: 14px;
  170. }
  171. #lg
  172. {
  173. margin: -17px 0 9px;
  174. }
  175. #fm
  176. {
  177. padding-left: 111px;
  178. text-align: left;
  179. }
  180. #kw
  181. {
  182. width: 391px;
  183. line-height: 16px;
  184. padding: 3px 1px;
  185. margin: 0 6px 0 0;
  186. font: 16px arial;
  187. }
  188. #su
  189. {
  190. width: 78px;
  191. height: 28px;
  192. line-height: 24px;
  193. }
  194. #kw, #su
  195. {
  196. vertical-align: middle;
  197. }
  198. #lk
  199. {
  200. margin: 33px 0;
  201. }
  202. #lk span
  203. {
  204. font: 14px "宋体";
  205. }
  206. #lm
  207. {
  208. height: 60px;
  209. }
  210. #lh
  211. {
  212. margin: 16px 0 5px;
  213. font: 12px "宋体";
  214. }
  215. #lh a
  216. {
  217. font: 12px arial;
  218. }
  219. #hp
  220. {
  221. position: absolute;
  222. line-height: 14px;
  223. margin: 0 0 0 6px;
  224. top: -1px; *top:2px}
  225. #cp, #cp a
  226. {
  227. color: #77c;
  228. }
  229. #sx
  230. {
  231. color: #00C;
  232. text-decoration: underline;
  233. cursor: pointer;
  234. }
  235. </style>
  236. </head>
  237. <body>
  238. <p id="u">
  239. <a href="http://passport.baidu.com" mce_href="http://passport.baidu.com" target="_blank"><b>sunboy_2050</b> </a>
  240. |  <a href="http://my.baidu.com/index.html?my=1&tn=baidu_myps_pg" mce_href="http://my.baidu.com/index.html?my=1&tn=baidu_myps_pg">我在百度 </a>
  241. | <a href="http://hi.baidu.com/sys/checkuser/sunboy_2050/3" mce_href="http://hi.baidu.com/sys/checkuser/sunboy_2050/3" target="_blank">我的空间</a>
  242. | <a href="http://passport.baidu.com/?logout&tpl=mn&bdstoken=2378cd7fe769741d2d5f1d86bfd368ff" mce_href="http://passport.baidu.com/?logout&tpl=mn&bdstoken=2378cd7fe769741d2d5f1d86bfd368ff">退出
  243. </a>
  244. </p>
  245. <div id="m">
  246. <p id="lg">
  247. <img src="http://www.baidu.com/img/baidu_logo.gif" mce_src="http://www.baidu.com/img/baidu_logo.gif" width="270" height="129" usemap="#mp"></p>
  248. <p id="nv">
  249. <a href="http://news.baidu.com" mce_href="http://news.baidu.com">新 闻</a> <b>网 页</b> <a href="http://tieba.baidu.com" mce_href="http://tieba.baidu.com">
  250. 贴 吧</a> <a href="http://zhidao.baidu.com" mce_href="http://zhidao.baidu.com">知 道</a> <a href="http://mp3.baidu.com" mce_href="http://mp3.baidu.com">
  251. MP3</a> <a href="http://image.baidu.com" mce_href="http://image.baidu.com">图 片</a> <a href="http://video.baidu.com" mce_href="http://video.baidu.com">
  252. 视 频</a> <a href="http://map.baidu.com" mce_href="http://map.baidu.com">地 图</a></p>
  253. <div id="fm">
  254. <form name="f" action="s">
  255. <input type="text" name="wd" id="kw" maxlength="100">
  256. <input type="hidden" name="ch" value="">
  257. <input type="hidden" name="tn" value="maxthon2">
  258. <input type="hidden" name="bar" value="">
  259. <input type="submit" value="百度一下" id="su">
  260. <span id="hp"><a href="/gaoji/preferences.html" mce_href="gaoji/preferences.html">设置</a><br>
  261. <span id="sx">手写</span> </span>
  262. </form>
  263. </div>
  264. <p id="lk">
  265. <a href="http://hi.baidu.com" mce_href="http://hi.baidu.com">空间</a> <a href="http://baike.baidu.com" mce_href="http://baike.baidu.com">百科</a> <a href="http://www.hao123.com" mce_href="http://www.hao123.com">
  266. hao123</a><span> | <a href="/more/" mce_href="more/">更多>></a></span></p>
  267. <p id="lm">
  268. </p>
  269. <p>
  270. <a id="st" onclick="this.style.behavior=‘url(#default#homepage)‘;this.setHomePage(‘http://www.baidu.com‘)"
  271. href="http://utility.baidu.com/traf/click.php?id=215&url=http://www.baidu.com" mce_href="http://utility.baidu.com/traf/click.php?id=215&url=http://www.baidu.com">把百度设为主页</a></p>
  272. <p id="lh">
  273. <a href="http://e.baidu.com/?refer=888" mce_href="http://e.baidu.com/?refer=888">加入百度推广</a> | <a href="http://top.baidu.com" mce_href="http://top.baidu.com">
  274. 搜索风云榜</a> | <a href="http://home.baidu.com" mce_href="http://home.baidu.com">关于百度</a> | <a href="http://ir.baidu.com" mce_href="http://ir.baidu.com">
  275. About Baidu</a></p>
  276. <p id="cp">
  277. ©2010 Baidu <a href="/duty/" mce_href="duty/">使用百度前必读</a> <a href="http://www.miibeian.gov.cn" mce_href="http://www.miibeian.gov.cn"
  278. target="_blank">京ICP证030173号</a>
  279. <img src="http://gimg.baidu.com/img/gs.gif" mce_src="http://gimg.baidu.com/img/gs.gif"></p>
  280. </div>
  281. <map name="mp">
  282. <area shape="rect" mce_shape="rect" coords="43,22,227,91" mce_coords="43,22,227,91" href="http://hi.baidu.com/baidu/" mce_href="http://hi.baidu.com/baidu/" target="_blank"
  283. title="点此进入 百度的空间">
  284. </map>
  285. </body>
  286. <mce:script type="text/javascript"><!--
  287. var w = window, d = document, n = navigator, k = d.f.wd,
  288. a = d.getElementById("nv").getElementsByTagName("a");
  289. if (n.userAgent.indexOf("MSIE") == -1 || window.opera) {
  290. d.getElementById("st").style.display = "none"
  291. };
  292. for (var i = 0; i < a.length; i++) {
  293. a[i].onclick = function() {
  294. if (k.value.length > 0) {
  295. var o = this, h = o.href, q = encodeURIComponent(k.value);
  296. if (h.indexOf("q=") != -1) {
  297. o.href = h.replace(/q=[^&$]*/, "q=" + q)
  298. }
  299. else {
  300. this.href += "?q=" + q
  301. }
  302. }
  303. }
  304. };
  305. (function() {
  306. if (/q=([^&]+)/.test(location.search)) {
  307. k.value = decodeURIComponent(RegExp.$1)
  308. }
  309. })();
  310. if (n.cookieEnabled && !/sug?=0/.test(d.cookie)) {
  311. d.write(‘<script src="http://www.baidu.com/js/bdsug.js?v=1.0.3.0" mce_src="http://www.baidu.com/js/bdsug.js?v=1.0.3.0"><//script>‘)
  312. };
  313. if (w.attachEvent) {
  314. w.attachEvent("onload", function() {
  315. k.focus();
  316. })
  317. }
  318. else {
  319. w.addEventListener(‘load‘, function() {
  320. k.focus()
  321. }, true)
  322. };
  323. w.onunload = function() { };
  324. var hw = {}; hw.i = d.getElementById("sx");
  325. var il = false;
  326. if (/msie (/d+/./d)/i.test(n.userAgent)) {
  327. hw.i.setAttribute("unselectable", "on")
  328. }
  329. else {
  330. var sL = k.value.length; k.selectionStart = sL; k.selectionEnd = sL
  331. }
  332. hw.i.onclick = function(B) {
  333. var B = B || w.event; B.stopPropagation ? B.stopPropagation() : (B.cancelBubble = true);
  334. if (d.selection && d.activeElement.id && d.activeElement.id == "kw") {
  335. hw.hasF = 1
  336. }
  337. else {
  338. if (!d.selection) {
  339. hw.hasF = 1
  340. }
  341. } if (!il) {
  342. var A = d.createElement("script");
  343. A.setAttribute("src", "http://www.baidu.com/hw/hwInput.js");
  344. d.getElementsByTagName("head")[0].appendChild(A); il = true;
  345. setTimeout(
  346. function() {
  347. if (baidu) {
  348. baidu.sug.initial()
  349. }
  350. }
  351. , 1000)
  352. }
  353. };
  354. // --></mce:script>
  355. </html>
  356. <!--f99b4c28737a54f7-->

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

剖析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

时间： 2024-10-29 19:06:25

JS学习笔记02的相关文章

Node.js学习笔记 02 Implementing flow control

What is flow control? 和其它语言一样,Node.js 在代码编写时,如何组织代码,如何写出clean code都是不可避免的难点. 同时,由于Node.js的天然特性(异步,事件驱动),良好的代码组织就更为重要. 所谓的flow control指的是序列化的执行一个个node.js task的代码组织手段. 与其它语言一样,任务流可以被组织成两种(串行,并行)如下图: How to flow control? 一种方式是使用node.js 社区提供的各类第三方模块(),另一

Wojilu学习笔记 (02)

使用RequireJS (1)整个页面,应该只有一个 <script src="" > 标签,并且放在页面底部,用来引入 RequireJS 和 main.js 文件 <script data-main="~js/main" src="~js/lib/require-jquery-wojilu.js?v=#{jsVersion}"></script> (2)在页面头部的 <head> 部分,增加一行

Node.js学习笔记【1】入门（服务器JS、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块）

笔记来自<Node入门>@2011 Manuel Kiessling JavaScript与Node.js Node.js事实上既是一个运行时环境,同时又是一个库. 使用Node.js时,我们不仅仅在实现一个应用,同时还实现了整个HTTP服务器. 一个基础的HTTP服务器 server.js:一个可以工作的HTTP服务器 var http = require("http"); http.createServer(function(request, response) { r

Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

【OpenGL 学习笔记02】宽点画线

我们要知道,有三种绘图操作是最基本的:清除窗口,绘制几何图形,绘制光栅化对象. 光栅化对象后面再解释. 1.清除窗口 比如我们可以同时清除颜色缓冲区和深度缓冲区 glClearColor (0.0, 0.0, 0.0, 0.0);//指定颜色缓冲区清除为黑色 glClearDepth(1.0);//指定深度缓冲区的清除值为1.0 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);//指定要清除的缓冲区并清除 2.绘制几何图形 先要设置绘制颜色,

SWIFT学习笔记02

1.//下面的这些浮点字面量都等于十进制的12.1875: let decimalDouble = 12.1875 let exponentDouble = 1.21875e1 let hexadecimalDouble = 0xC.3p0//==12+3*(1/16) 2.//类型别名,用typealias关键字来定义类型别名 typealias AudioSample = UInt16 var maxAmplitudeFound = AudioSample.min 3.//元组 let ht

Blender学习笔记 | 02 | 操作

Shift 点击不同图层 同时显示多图层物件 z 切换 Solid / Wireframe 视图模式 点选物件后M 移动到图层选项 Ctrl + 鼠标左键拖动 自由全选物件 B 方形区域圈选物件 Tab Object / Edit Mode 切换 T 开 / 关 侧栏 Ctrl + Tab 编辑状态下切换编辑对象 E Extrude Region 推挤区域.以发现为轴线. X 删除物件菜单 Blender学习笔记 | 02 | 操作,布布扣,bubuko.com

[Pro Angular.JS]学习笔记1.1：设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

【转】Backbone.js学习笔记（二）细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由