走进开源项目 - urlcat 源码分析

1、在走进开源工程-urlcat中，对工程整体进行了分析，对如何做开源也有了 进一步的了解，该篇再深入研究下儿比源码。该工程到底做了什么？/ 常规写法一 const APIJJRL = s：/api.cxaMp(e /;fiAictio. getUseirPosts(id, blogld, offset) const request Uri =、于APLURL/scd/$id/勿。gs/$勿。g/d/posts?nAit =$= $offseF；/ send request)/ 常规写法二 const APLURL = 1 s:/api.exaiple.coWz;fiAnction getUser

2、Posts(id)blogld limit, offset) co八st escape41d = c八codeURCoM?oncnt(7d);const escapedBlogld = eicodeURICoipoiet(bloglcC);const patl = /seKS/$esca?cdld/勿ogs/$csca?cdB/og/dF；co八优 uH =八ew URL(p4Mb AP/_(JRL);urlsearch =八ew URLSearchParais( (iMit, offset );const 丫equcstUH = urLhref;/ send request)/ 使用 uir

3、lcat 之后的写法 c。八st AP/JJRL 二么ftps：/”画.0X4/.,。/;心八出。八 getUse丫Posts(id)livit, offset) covst vequestU” = urlcat(API_URLJ 7users/:id/posts1, offset );if (tgpcof pathTeplateOrParas = Ktr证g)cost baseUiri = baseUrlOrTiexpiate;coinst pathTeiplate = pathTeplateOrPara;coist params = iaybeParakv$;return udcatlpp

4、atKreplate, params, bascUH, config); else (covst baseTeiplate = bascUHOrTexpiate;coinst p4raMs = pathTeplateOrParais;return urlcatlkvpl(haseTekvplate, params, 6mdefMcd, co八fig);)这局部代码是利用Typescript定义重载函数类型，采用连续多个重载声明+ 一 个函数实现的方式来实现，其作用是为了保证在调用该函数时，函数的参数及返 回值都要兼容所有的重载。例如下列图，第三个参数类型在重载函数类型中并不存在。import

5、urlcat import urlcat from *./test1;const API_URL = s :api.example类型string”的梦数不能赋给类型“ParamMap”的参数.台糟问题没有可用的快速修复urlcat(API_URL, */users/:id/posts1t ,211);第三段以下代码是核心，作者通过职责别离的方式，将核心方法代码简化。/ 核心方法 function urlcatlipl(pathTeMpSte: string,paira： ParaMap,baseUH: string | a八defined,config: UrlCatCoinfigiArat

6、ioiri)/ 第一步 path(7users/:id/posts1, id: 1? /imit: 3(9 )返回 /aseKs/l/posts 和 liiit: 30covst reiaderedPath,忆侬证以gPa忆3s = path(pathTeMp(atc, params);/第二步 移除Mull或者U八dcfMcd属性const deaParais 二 reMoveNullOrUdereiaiigPara);/ 第三步(i*it: 30)转 livit=3Oconst re八deredQacrg = q“crg(c/c八4Ms, config);/ 第四步 拼接返回 /scd/1

7、/?osts?&it=：3。const ?“tkA八dQucrg = joi八(rodcredPaM ?-rehdercdQucrg);/第五步当haseUrl存在时，执行完整uH拼接return baseUri ? joiyFullUrl(reideiredPatl, baseUri, pathA八dQo(。:八dQucrg;)总结做开源并不一定要造个更好的轮子，但可以让这个轮子变得更好。通过该工程， 也发现自己在Typescript方面的缺乏，继续学习，再接再厉。参考文章 玩转Typescript工具类型(上)你不知道的Typescript高级类型请别误用Typescript重载函数类型拓

8、展阅读玩转Typescript工具类型（中）玩转Typescript工具类型（下）前端javascript源码分析开源/ send request）源码共267行，其中注释占了近0。，代码只有*$7行。注释跟代码接近工:工， 接下来我们逐段分析。第一段import qs, IStrMgifgOpti。八s / esliit-disabletypescript-esliit/ino-explicit-ainyexport type ParavMap =RecostKMg, ang;cxport type UirlCatC。八figuration =PartiakPickVStH八gifgOpti

9、。八sJaagFosm戏& objectForat:PaHiakPickJStH八gifgOptionsJfo夕mat1）该工程是在qs工程的基础上并使用typescript进行开发，其中定义了 2个类型, T几个不太了解知识点type、Recode、Partial和Perface 与 type 的区别相同点：都可以描述对象或者函数，且可以使用。笈八叁进行拓展不同点：Otype可以声明基本类型别名，联合类型，和元组等类型，但 interface 不行1O/ 基本类型别名 type Name = string | 八“kbcK； / 联合类型 interface Cowwov 八4nac: st

10、ring;jiiterface Persoi。乂tends Cowwov age: T;sex： Stirling;)type People = age: T;sex: Stirling; & COHAMO八；tgpc Pl = Pers。八。uMbcr| People;/ 元组 type P2 = Pers。八八儿匕, People;跟typeof结合使用const name = 小明;type T= typeof 八Record的用途Reacord 是 TypeScript 的一种工具类。/ 常规写法 interface Parags iaakvxe: string: Mg;)/ 高级写法

11、 tgpc Params = RecodcstrihgaiyPartial的用途将传入的属性变为可选项interface D4code/ 八he: st力八gage: iuiheraddress： string)let store: DataModel = 八hAC： age： O)address:)fc(八cti。八 updateStore (store: DataModel,payload: Partial):D”仅Mode/ return .store,.payload)store = updateStorestore, 八he: UppLage: 18!)Pick的用途从类型Type中

12、，挑选一组属性组成一个新的类型返叵I。这组属性由Keys限定, Keys是字符串或者字符串并集。interface Person 八 mg stringage:id: string/ 幼儿没有 idtgpe Toddler = PickPcd。八 J八%g生一田第一取/兴兴Bui以s a URL “sing the base template aid specified paraieteirs.String baseTeiplate a URL template that c。八taihs zero or ixore :paramspairai Object paraws 八 object w

13、ith properties that correspond to the ：paramsin the base template. (J八sed properties become quevg par4Has.*returns String a URL with path paraws sabstit认ted aid query paraws appended为* examp(c* wiArlcat(llttp：/api.exaiple.coi/iAsers/:id,J id: 42, search foo )/ - :/api.cxamp(e /(ASCBS/42?scarch二f。美、e

14、xport default 缶八cti。八 urlcat(baseTekvplate: string, par4Ms: ParaMap): string；/大美Concatenates the base URL ad the patkx specified losing 7 as a separator为 If a 71 occurs at the coicateiatioi boixidary M either parameter, it is removed.兴parai (String haseUrl the first part of the URLparav String path

15、the second part of the URL兴returns String the result of the coicateiatioi美example* / -ktt?：/？AcxanA?/c.coHA/seKS为、Vexport default fiAccti。八 urlcat(baseUrl: string, path string): string;/兴兴Concatenates the base URL aid the path specified “sing 7Z as a separatorIf a 71 occurs at the coicateiatioi boui

16、dary iin eitherit is removed.SiAbstitutes path parameters with the properties of the scc object and appeals八sed properties i八 the path 4s qtxcrg params.为,paraw String baseUri the first part of tke URL24K4ha Stnhg) path the second part of the URLpairaiv Object ?匕4Ms Object with properties tkat corres

17、pond to the :pairavsi八 the base template. U八sed properties become querg params.美returns String URL with params substituted aind query params appended兴* cxamp(e* 2 ts* urlcatC -y/api.exaiple.coi/1, 7users/:iz. id: 421search foo1 )/ - kttp:/api.cxamp(c /iASed/42?scaYch=f。为、Vexport default f(Auction ui

18、rlcat(baseUri: string)pathTemplate: string,para： ParaiMap):string;Concatenates the base URL aid the path specified using 7 as a separatorIf a 7 occurs at th。coicateiatioi bouidairy in either parameter, it is removed.Substitbctes path parameters with the properties of the sec params object “nd appends八sed properties M the path as qmeiry params.兴pairav (String baseUd the first part of the URL¶w String path the second part of the URLparai Object params Object with properties that correspond to the :24K4sin