好搜移动端页面研究_html/css_WEB-ITnose

首先声明，我并不是好搜员工，研究源码只是爱好，并没有别的意思，下面的代码是在 pc-chrome模拟手机访问时截取的 m.so.com，并自己适当的修改了些变量名（因为源码被混淆、压缩了），只是学习用，如果有冒犯贵司之处，还请【联系我】 ，我会第一时间删除～

先看整个无缓存时的源码：源码部分变量我修改过，注释是我根据上下文添加的～

html
    ...

总结

开发模式

看代码应该是使用的 es6开发，使用 webpack来打包成浏览器端可运行版本，这样开发效果很高，但感觉也并没有使用 es6的全部特性，因为全部特性需要 runtime环境，而这个环境的 shim不小，我看有 promise-shim，感觉应该只用了部分功能，然后转换。但在一定的程度上也可以提高开发效率～

localStorage的应用

使用 localStorage来缓存静态文件的手法很常见，但 so的方式很新颖：

1. cookie里使用2位版本号存放，这样很能减少 cookie的体积，由其是在流量很大的站
2. 常用模块也使用 localStorage来存在，如果不存在则异步请求，这样也很省流量呢，比如iscroll、城市code数据，你懂的～

之前写的一个： 设计localStorage自动更新

事件管理

整个页面统一由 MSO.observer接管，公用事件统一 trigger（在这里叫 publish），我相信 so内部肯定有这方面的文档，并且有公用事件详细的说明～

比如页面加载完成有 load事件、搜索框聚焦时有 search:focus事件，这样的事件 hook可以很好的使不同模块之间的通信和判断

其他的一些

比如容错做的很好，不至于你关了 cookie或者 ls就报错，还有使用了 webp，并且我看上面有 window.ENV变量，应该是 server端判断了ua信息输出的

当然还有很多有特我的发现～