前端知识点

browserHistory和hashHistory

首先 browserHistory 其实使用的是 HTML5 的 History API,浏览器提供相应的接口来修改浏览器的历史记录,不少方法还是实验性的,而且 E10 以下不支持;而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录;

History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法,所以并没有替换历史记录的功能。但 react-router 通过 polyfill 实现了此功能,具体实现没有看,好像是使用 sessionStorage。

另一个原因是 hash 部分并不会被浏览器发送到服务端,也就是说不管是请求 #foo 还是 #bar ,服务只知道请求了 index.html 并不知道 hash 部分的细节。而 History API 需要服务端支持,这样服务端能获取请求细节。

还有一个原因是因为有些应该会忽略 URL 中的 hash 部分,记得之前将 URL 使用微信分享时会丢失 hash 部分。

前端开发单页应用,为什么在 url #后传参

问号以及后面的结构浏览器通常称为 Search,服务端通常称为 Query,这部分是会传到服务器的。而井号以及后面的部分浏览器端是称为 Hash,是不会传到服务器上的。

通常单页面应用的路由及页面间的传参不需要服务器处理,也就不需要传给服务器。

最重要的一点是如果在 Search中传参整个页面是会刷新的,而单页面应用的设计就是想要避免用户在使用过程中页面刷新。Hash 的修改通常就不会刷新。

例如从列表页进入详情页,直接 js 获取详情页内容然后直接在当前页面显示了详情页,这时候如果变更 url 前半部分会照成浏览器重新加载页面。

当然现在新浏览器支持不重新加载页面变更 url,但是还是老问题,为了兼容老浏览器很多还是只变更 # 后面。

? 传参走的是 form 提交,浏览器认为 url 变了会刷新页面的,是同步的做法,现在都是异步,查询都是走 XHR 或者 fetch 的,不需要刷新页面,#传参是个大框架都支持的路由传参方法,不过也有缺点,有些第三方 API 默认会过滤#传的参数,导致 redirect 失败,比如微信的 API,号称是为了安全性

用#hash 还有个好处上面都没提到,就是 http 的 referer(引用) 会带上?search,不会带上#hash。如果页面资源多、?search 也很长的话,就会产生许多带有很长?search 的 referer,浪费带宽;而且带有?search 的 referer 请求外部资源,还有可能把敏感信息暴露给第三方。

js 有什么原生的方法可以吧 object 转为 string key=value 形式吗?

例如对象 { test:1, test2:2 } 转成字符串 test=1&test2=2

Object
 .entries(o)
 .reduce((arr, [k, v])
  => arr.concat(encodeURIComponent(k) + '=' + encodeURIComponent(v)), [])
 .join('&')

//在 Node.js 里自带 querystring 模块 
const querystring = require('querystring') 
querystring.stringify(obj)

渲染模式

以前后端渲染模式,访问一个页面---浏览器发出请求,服务器后台读取数据,渲染模板,浏览器拿到 HTML 开始渲染,请求图片等资源,用户看到一个完整网页;
现在浏览器渲染模式,访问一个页面---浏览器发出请求,从 CDN 或服务器得到静态页面(此页面只包含极少部分页面内容),浏览器开始渲染,看到部分静态内容,请求静态资源,解析 js 脚本,发出请求,服务器响应请求,返回数据,js 拿到数据,拼装内容,浏览器渲染,用户看到完整网页

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容