Heim > Artikel > Web-Frontend > 好搜移动端页面研究_html/css_WEB-ITnose
好搜移动端页面研究_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:14:53813Durchsuche
首先声明，我并不是好搜员工，研究源码只是爱好，并没有别的意思，下面的代码是在 pc-chrome模拟手机访问时截取的 m.so.com，并自己适当的修改了些变量名（因为源码被混淆、压缩了），只是学习用，如果有冒犯贵司之处，还请【联系我】 ，我会第一时间删除～
先看整个无缓存时的源码：源码部分变量我修改过，注释是我根据上下文添加的～
html<!Doctype html><!-- g-loading类让页面默认有个全局的loading图标，体验更友好，在下面页面会隐藏 --><!-- home_next应该属于某个js的埋点 --><html id=home_next class="g-loading" lang="zh-CN"><head><meta charset="UTF-8"><title>360搜索，SO靠谱</title><!-- 应该是速度上报勾子 --><script>wpo={p:"m_so",start:+(new Date),page:"home"}</script><!-- 页面全局变量 --><script> MSO = {}; SOH = {}; ENV = {}; <!-- 看样子应该部分变量是server端从ua中读取 --> ENV.android = '6_0'; ENV.webp = '1'; ENV.domain = 'so.com'; ENV.abv = 'a'; ENV.nat = '1'; ENV.brandname = '360'; ENV.sitename = '360搜索';</script><!-- 下面是ls缓存读取的核心js，会跟后端服务（判断是否有缓存而输出不同的html片段）有耦合 --><script>(function (e, document) { // 查找id元素 function getId(e) { return document.getElementById(e) } // 给cookie上打个标识，来设置浏览器不支持缓存 function setNotSupportLS() { setCookie("stc_nls", 1, 1) } /** * 读取ls的数据 */ function i(n, r) { var i = ""; // 容错，主要是怕读取出错 try { i = LS[n] || "", // 如果小于99则认为是error，则清空ls版本号 i.length < 99 && (setCookie(r, 0), // 设置页面不可见，然后强制刷新下页面 document.documentElement.style.display = "none", l(), e.onbeforeunload = null, location.reload(!0)) } catch (s) { // 出错时清空版本号 clearLS() } return i } /** * 设置ls数据 */ function setLS(key, t) { try { // 先设置数据到ls // 再读取设置后的内容是否跟源数据相等，如果不相等则清空ls版本，这里主要处理可能ls超大设置失败 LS[key] = t, t !== LS[e] && clearLS() } catch (n) { clearLS() } } /** * 获取cookie */ function o(e) { var n = document.cookie.split("; "); for (var r = 0, i = n.length, s; r < i; r++) { s = n[r].split("="); if (s[0] === e) return s[1] } return "" } /** * 轻量级设置cookie */ function setCookie(key, value, r) { // 默认60天 r = r || 60, // 如果没有值则为-1，也就是清空 value || (r = -1), // 过期时间，单位为天 r = (new Date(+(new Date) + r * 86400000)).toGMTString(); // 生成cookie var i = key + "=" + value + "; path=/; expires=" + r; // 如果是https则加密cookie location.protocol.indexOf("https") > -1 && (i += "; Secure"), // 写入吧，少年 document.cookie = i } /** * 读取id=e的元素内容，写入ls * @param {string} e ls里的key名 * @param {string} t 元素id名 */ function html2ls(e, t) { // 如果元素存在，就获取内容，并去两端空格 var r = getId(t) && getId(t).innerHTML.trim(); setLS(e, r) } /** * 读取ls数据，并生成标签到页面中 */ function ls2html(e, n, r) { var s = i(e, r), o = document.createElement(n); o.innerHTML = s, document.head.appendChild(o) } /** * 清除cookie里的ls版本号 */ function clearLS() { var e = /(?:;)?stc_[^=]*=[^;]*;?/g, n = document.cookie.match(e) || [], r = n.length; while (r) --r, setCookie(n[r].split("=")[0], 0) } /** * 更新版本号，这个很牛b */ function updateVersion(e, t, n) { var r = o(e).split(""), i = !1; // cookie里是以2位版本号紧邻存储，比如: // a文件的一位版本是a,二位版本是b: xxoo=ab // b文件的一位版本是1,二位版本是2: xxoo=ab12 // // 后端在判断是否有缓存时应该也是这样循环，判断b文件版本对否时循环1,然后判断紧邻的版本是不是2，如果是则认为有缓存，否则认为缓存失败 // // 这样的好处是cookie值非常的小，因为最多2个版本，比md5要小 // 但由于位数限制，和只能用 数字+字母+部分符号 做为版本 可能文件数量上有些问题，但对于移动端来说应该完全足够 for (var s = 0, a = r.length; s < a; s += 2) // 如果查找到该标识则设置 if (r[s] === t) { r[s + 1] = n, i = !0; break } // 如果找了一圈发现没有标识说明没有设置过cookie则直接添加2位版本号 i || r.push(t, n), // 写入吧 setCookie(e, r.join("")) } var noop = function () {}, LS, d = 0, // 先全部设置空方法 v = e.LS = { html2ls: noop, ls2html: noop, updateVersion: noop }; // 尝试设置ls，如果失败则打上浏览器不支持ls的标识 stc_nls try { LS = localStorage, v.html2ls = html2ls, v.ls2html = f, v.updateVersion = c } catch (m) { setNotSupportLS() }})(this, document)</script><!-- 由于第一次进入页面，则输出html真实代码，并设置到ls里，更新版本号，这里是 !U --><style id="stc_home_next_css"> /*css*/</style><script>LS.html2ls("stc_home_next_css","stc_home_next_css");LS.updateVersion('stc_ls_p_s','!','U')</script><link rel="apple-touch-icon-precomposed"href="/favicon.png"><!-- dns预解析 --><link rel="dns-prefetch"href="//p.ssl.qhimg.com"><link rel="dns-prefetch"href="//s.ssl.qhimg.com"><link rel="dns-prefetch"href="//ps.ssl.qhimg.com"><meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="format-detection" content="telephone=no"><meta name=keywords content="360搜索,网页搜索,视频搜索,图片搜索,音乐搜索,新闻搜索,软件搜索,学术搜索"><meta name=description content="360搜索是安全、精准、可信赖的新一代搜索引擎，依托于360母品牌的安全优势，全面拦截各类钓鱼欺诈等恶意网站，提供更放心的搜索服务。 360搜索 so靠谱。"><meta content=always name=referrer><!-- 看下面代码是日志上报方法，并且截获了error报错上报、alert上报，alert上报这个很不错，因为在移动端alert不友好，用上报+统计查看可以知道开发者有没有添加alert，很赞，但我在chrome-pc里测试并没有上报，可能跟环境有关 --><script>(function (e, t, n) { var r = alert, i = encodeURIComponent, // ... e.onerror = function (e, t, n, r, i) { for (var o = 0; o < u.length; ++o) if (s(u[o], e)) return; setTimeout(function () { if (c > 4 || l[e]) return; p({ code: "notice", msg: e }), l[e] = 1, ++c }, 1e3) }, e.alert = function (e) { p({ code: "warning", msg: "alert " + e }), !arguments.length && (e = ""), r(e) }})(this, ENV)</script><!-- 禁用js时隐藏页面，并跳转到极速版本 --><noscript> <style>body{display:none}</style> <meta http-equiv=refresh content="0; URL=/s?mode=jisu&noscript=1"></noscript><script>try { // 设置页面样式，应该有版本区分 document.documentElement.className += " w-" + (localStorage.home_w || 0)}catch (e) {}// 速度打点wpo.head = +(new Date) - wpo.start</script><style>html{background:#fff}</style></head><body><header class="i-hd" id=hd> ...</header><script id="stc_home_next_base">// 这里引用了es6-promise库，可见用了很多promise的api// 这里引用了zepto库和一些常用模块// 这里写了个monitor，主要是日志上报模块</script><script>LS.html2ls("stc_home_next_base","stc_home_next_base");LS.updateVersion('stc_ls_p_s','T','R')</script><script id="stc_common">// 这里是webpack.js// 这里是webpack打包后的一些常用模块，应该是so的公用lib：模板引擎、 能用滚动事件、解析url参数、webp图片适配(切图)、图片延迟加载（跟dom有耦合）、节流、https代理（但我试了几个图片发现不管用，应该做了域名白名单或者我姿势不对）// 这里是基于webpack生成的MSO.observer，看代码应该是整个页面的事件驱动，应该有些固定的勾子，比如scroll、show之类，好处是事件统一接管，提供页面hook// 下面有一个牛b的东西登场：window._loader，看意思是个加载器，但她不只是加载器，在代码大概意思是：// 在使用时 _loade.use(uri)，然后会首先判断该uri模块有没有被执行：// 如果执行过：则直接执行回调// 如果未执行过：// 读取ls里是否有该uri：// 有：// 判断版本：// 匹配：读取ls并执行回调// 不匹配：执行加载远程操作// 没有：// 直接加载文件，文件的内容类似jsonp，加载成功后会执行回调，并把文件md5+内容写入ls以方便后续使用// 再往下就是些逻辑代码不说了</script><script>LS.html2ls("stc_common","stc_common");LS.updateVersion('stc_ls_p_s','(','(')</script></body></html> 总结
开发模式
看代码应该是使用的 es6开发，使用 webpack来打包成浏览器端可运行版本，这样开发效果很高，但感觉也并没有使用 es6的全部特性，因为全部特性需要 runtime环境，而这个环境的 shim不小，我看有 promise-shim，感觉应该只用了部分功能，然后转换。但在一定的程度上也可以提高开发效率～
localStorage的应用
使用 localStorage来缓存静态文件的手法很常见，但 so的方式很新颖：
- cookie里使用2位版本号存放，这样很能减少 cookie的体积，由其是在流量很大的站
- 常用模块也使用 localStorage来存在，如果不存在则异步请求，这样也很省流量呢，比如iscroll、城市code数据，你懂的～
之前写的一个： 设计localStorage自动更新
事件管理
整个页面统一由 MSO.observer接管，公用事件统一 trigger（在这里叫 publish），我相信 so内部肯定有这方面的文档，并且有公用事件详细的说明～
比如页面加载完成有 load事件、搜索框聚焦时有 search:focus事件，这样的事件 hook可以很好的使不同模块之间的通信和判断
其他的一些
比如容错做的很好，不至于你关了 cookie或者 ls就报错，还有使用了 webp，并且我看上面有 window.ENV变量，应该是 server端判断了ua信息输出的
当然还有很多有特我的发现～
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：电影结束效果的实现_html/css_WEB-ITnoseNächster Artikel：请教一个关于前端样式的问题_html/css_WEB-ITnose