ReactTraining/history v4 类库源码注解(未完)

类型一览

路径

Pathname

路径名。

type Pathname = string;

Search

查询。

type Search = string;

Hash

哈希。

type Hash = string;

Path

路径。

type Path: string;

路径是由路径名,查询,哈希三部分共同组成。

地址

Href

超链接。

type Href = string;

LocationState

地址状态。

type LocationState = any;

LocationKey

地址键。

type LocationKey = string;

LocationDescriptorObject

地址描述器对象。

interface LocationDescriptorObject<S = LocationState> {
  pathname?: Pathname;
  search?: Search;
  hash?: Hash;
  state?: S;
  key?: LocationKey;
}

LocationDescriptor

地址描述器。

type LocationDescriptor<S = LocationState> = Path | LocationDescriptorObject<S>;

地址描述器类型实例用于构造下面的地址类型实例。它是一个联合类型,可是路径也可是路径描述器对象。

Location

地址。

interface Location<S = LocationState> {
  pathname: Pathname;
  search: Search;
  hash: Hash;
  state: S;
  key?: LocationKey;
}

WindowDocument 接口类型下面都有一个 location 属性,这个属性的类型是 Location,但是这个 Location 类型与上面列出的地址类型有很多共同点,但是它对浏览器地址栏中的 URL 进行了完整的抽象。比如,它还提供了协议类型、主机名、端口等等信息。但是我们这里的地址类型侧重于 URL 的路径部分,并额外提供了状态和键属性,所以要注意区别。

历史

Action

行为。

type Action = 'PUSH' | 'POP' | 'REPLACE';

行为是针对历史堆栈的,分为压入,弹出和替换。

History

历史。

interface History {
  length: number;
  action: Action;
  location: Location;
  push(path: Path, state?: LocationState): void;
  push(location: LocationDescriptorObject): void;
  replace(path: Path, state?: LocationState): void;
  replace(location: LocationDescriptorObject): void;
  go(n: number): void;
  goBack(): void;
  goForward(): void;
  block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
  listen(listener: LocationListener): UnregisterCallback;
  createHref(location: LocationDescriptorObject): Href;
}

History 接口类型是对 HTML5 history api 的封装,并在之上提供了额外的功能。

转换

TransitionHook

转换钩子。

type TransitionHook = (location: Location, callback: (result: any) => void) => any;

TransitionPromptHook

转换提示钩子。

type TransitionPromptHook = (location: Location, action: Action) => string | false | void;

函数功能

PathUtils

  • addLeadingSlash:添加路径前置斜杠

    function addLeadingSlash(path: Path): Path
    
  • stripLeadingSlash:删除路径前置斜杠

    function stripLeadingSlash(path: Path): Path
    
  • hasBasename:路径中是否含有基路径

    function hasBasename(path: Path, prefix: string): boolean
    
  • stripBasename:删除路径中的基路径

    function stripBasename(path: Path, prefix: string): Path
    
  • stripTrailingSlash:删除路径后置斜杠

    function stripTrailingSlash(path: Path): Path
    
  • parsePath:将路径转化为 Location 类型

    function parsePath(path: Path): Location
    

    说明:此方法只解析路径中的路径名、查询字符串和 hash。

    示例:

    input: '/pathname?query=string#hash=value'
    output: { 
      pathname: '/pathname',
      search: '?query=string',
      hash: '#hash=value'
    }
    
  • createPath:将 LocationDescriptorObject 类型对象转换为 Path 字符串

    function createPath(location: LocationDescriptorObject): Path
    

    说明:此方法只根据地址对象中的路径名,查询字符串和 hash 数据拼装路径字符串。

LocationUtils

  • createLocation:创建地址

    function createLocation(
      path: LocationDescriptor, 
      state?: LocationState, 
      key?: LocationKey, 
      currentLocation?: Location
    ): Location
    
  • locationsAreEqual:判断两个地址对象是否相等

    function locationsAreEqual(lv: LocationDescriptor, rv: LocationDescriptor): boolean
    

DOMUtils

  • canUseDOM:判断是否可以使用 DOM

    const canUseDOM: boolean
    
  • isExtraneousPopstateEvent:判断 popstate 事件是否为无关的 WebKit 事件

    const isExtraneousPopstateEvent(event): boolean
    

    说明:iOS 上的 Chrome 浏览器会触发此类事件。

  • getConfirmation:获取消息的确认信息,并使用 callback 函数执行回调

    function getConfirmation(message: string, callback: (result: boolean) => void): void
    
  • supportsHistory:判断是否能够使用 HTML5 historty 接口

    function supportsHistory(): boolean
    
  • supportsGoWithoutReloadUsingHash:判断是否支持在使用 hash 的时候,调用 history 对象的 go 接口不会导致整个页面的刷新

    function supportsGoWithoutReloadUsingHash(): boolean
    

    说明:Firefox 不支持。

  • supportsPopStateOnHashChange:路径 hash 值发生变更的时候是否会触发 popstate 事件

    function supportsPopStateOnHashChange(): boolean
    

    说明:IE10/11 不支持。

参考资料

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

推荐阅读更多精彩内容

  • 本文翻译自[https://medium.com/@pshrmn/a-little-bit-of-history-...
    jochenshi阅读 15,091评论 0 16
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,644评论 18 139
  • 如果我爱你, 绝不会对你许下海誓山盟。 凌云豪情终究易碎, 平淡的才属于永恒。 如果我爱你, 绝不花费心思想要讨好...
    炎凌玉阅读 324评论 6 10
  • 平常练习的思维,晚上做梦的时候,梦里也会练习。 平常过的日子苦,晚上的梦也苦。 平常过的日子潇洒,晚上的梦也潇洒。...
    威董阅读 1,065评论 0 0
  • 1. 蓝牙 概念 1.1 中央设备(接收数据)常用 1.2 外围设备(发送数据) 1.3 相关类 2. WiFi
    平安喜乐698阅读 14,165评论 0 3