好搜移动端页面研究_html/css
来源:懂视网
责编:小采
时间:2020-11-27 16:30:30
好搜移动端页面研究_html/css
好搜移动端页面研究_html/css_WEB-ITnose:首先声明,我并不是好搜员工,研究源码只是爱好,并没有别的意思,下面的代码是在 pc-chrome模拟手机访问时截取的 m.so.com,并自己适当的修改了些变量名(因为源码被混淆、压缩了),只是学习用,如果有冒犯贵司之处,还请【联系我】 ,我会第一时间删除~
导读好搜移动端页面研究_html/css_WEB-ITnose:首先声明,我并不是好搜员工,研究源码只是爱好,并没有别的意思,下面的代码是在 pc-chrome模拟手机访问时截取的 m.so.com,并自己适当的修改了些变量名(因为源码被混淆、压缩了),只是学习用,如果有冒犯贵司之处,还请【联系我】 ,我会第一时间删除~

首先声明,我并不是好搜员工,研究源码只是爱好,并没有别的意思,下面的代码是在 pc-chrome模拟手机访问时截取的 m.so.com,并自己适当的修改了些变量名(因为源码被混淆、压缩了),只是学习用,如果有冒犯贵司之处,还请【联系我】 ,我会第一时间删除~
先看整个无缓存时的源码:源码部分变量我修改过,注释是我根据上下文添加的~
html360搜索,SO靠谱 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信息
输出的
当然还有很多有特我的发现~
好搜移动端页面研究_html/css
好搜移动端页面研究_html/css_WEB-ITnose:首先声明,我并不是好搜员工,研究源码只是爱好,并没有别的意思,下面的代码是在 pc-chrome模拟手机访问时截取的 m.so.com,并自己适当的修改了些变量名(因为源码被混淆、压缩了),只是学习用,如果有冒犯贵司之处,还请【联系我】 ,我会第一时间删除~