1.Angular Ivy 执行变更检测
2.nestjsåeggjsåªä¸ªå¥½ï¼
Angular Ivy 执行变更检测
在Angular框架的进化中,Ivy渲染引擎的引入成为了关键转折点,它带来了性能提升、维护性和代码可读性的显著改善。本文将通过可视化的方式,深入探讨Ivy在变更检测机制上的疫情统计系统源码运作,同时,我们也将从零构建基于Ivy的demo应用,以直观展示其工作原理。
首先,为了更好地理解本文内容,我们提供了一个在线demo,它展示了如何在不同的生命周期区块内触发变更检测流程。只需要在Sub-Child组件的输入框中输入文本,即可体验到变更检测的物理内存源码实时响应。
在Angular中,视图(View)是底层抽象的核心,它用于描述模板结构,包含了用于反射模板的数据。以ChildComponent为例,其视图结构包含了特定的模板。在传统渲染引擎中,视图定义通过工厂创建节点,并将节点存储在视图定义的nodes数组中。而在Ivy中,使用ngComponentDef.template函数创建LNodes,并将其存储在data数组中。此外,data数组还包括绑定信息,淘宝电影源码这些信息按照模板中出现的顺序存储,起始位置为bindingStateIndex参数的值。
要获取ChildComponent的view实例,可以通过ComponentInstance.__ngHostLNode__属性或使用注入ChangeDetectorRef的方式。通过这种方法,Angular首先创建root view,并将宿主元素定位在data数组中下标为0的位置。之后,遍历所有组件并为每个view填充data。
接下来,让我们深入了解变更检测机制。ChangeDetectorRef是抽象类,包含detectChanges和markForCheck等方法。在注入ChangeDetectorRef时,C源码分享实际上获取的是从ChangeDetectorRef类拓展得到的ViewRef实例。为了更深入了解Ivy中的变更检测机制,本文将详细探讨内部方法,包括detectChanges、tick、scheduleTick、markViewDirty和markDirty等。
detectChanges方法以同步方式在一个组件及其子组件上执行变更检测。尽管在某些情况下,直接调用detectChanges触发变更检测是合理的,但通常更推荐使用markDirty函数,等待未来的某个时间点通过调度器调用该函数。这是因为单个用户操作可能导致多个组件失效,同时,宠物 平台源码对每个组件进行变更检测效率较低。等待所有组件都被标记为dirty后,执行单次变更检测更为高效。
用于在整个应用层面触发变更检测的tick方法类似于detectChanges方法,但仅在根组件上调用。此外,tick还会执行生命周期钩子,并基于组件的ChangeDetectionStrategy和dirty状态有条件地检查组件。
scheduleTick用于调度整个应用的变更检测计划,它将多个调用合并在一个变更检测轮询中执行。当视图需要重新渲染时,通常通过调用markDirty方法间接调用scheduleTick方法。
markViewDirty(markForCheck)将当前视图及其所有祖先视图标记为dirty。在Angular 5中,该方法向上遍历并确保对所有父级view进行检查。值得注意的是,在Ivy中,markForCheck并不会触发任何变更检测循环。
markDirty将组件标记为dirty,这意味着调度器将在未来的某个时间点对该组件进行变更检测。对已标记为dirty的组件再次标记不会产生额外效果,每个组件树只会被调度一次变更检测。(使用不同的renderComponent构造的组件拥有不同的处理器)。
checkNoChanges方法通常不包含新的内容。
在调试新的变更检测机制时,发现忘记安装zone.js。然而,应用能够正常运行,即使没有依赖zone.js,没有cdRef.detectChanges或tick。基于当前设计,对于采用OnPush的组件,Angular只有在特定情况下才会触发变更检测。这些规则同样适用于Ivy,如子组件存在一个output绑定,通过(input)事件触发,调用markForCheck方法。这解释了为什么在没有zone.js的情况下,应用仍然可以正常运行。
关于ExpressionChangedAfterItHasBeenCheckedError问题,虽然操作类似,但顺序似乎有所变化。比如,Angular首先检测子组件,然后检测嵌入的视图。在demo中的ChildComponent展示了这种实现,应用动态方式观察这种变化,可以看到顺序与过去的视图引擎相似。
在demo中还有一个可选的run angular complier按钮,可以检测其他场景。
一次性字符串初始化在组件以字符串值方式接受颜色参数时,Angular将常量存储在负责创建和更新组件的代码之外,仅在创建模式中使用它。因此,Angular不再对这个绑定进行额外检查。
在Ivy中,Angular编译器将常量存储在创建模式中,只有在创建组件时使用它,这使得容器不再创建文本节点。
最后,通过构建一个小demo,我们展示了IDOM渲染的工作流程。IDOM关注构建和更新DOM树,其设计理念与Ivy有相似之处。通过测试方案,我们验证了更新文本节点的代码,使用浏览器工具可以观察到文本节点内容的变化。IDOM的核心理念是使用真实DOM与新树进行比较,以实现高效渲染。
感谢阅读本文,希望您通过本文对Angular Ivy渲染引擎的变更检测机制有了更深入的理解。如需更多详细内容,可参考相关文档或深入研究Angular源代码。
nestjsåeggjsåªä¸ªå¥½ï¼
nestjs为ä»ä¹ä¸ç«
å 为æä½ä¸ç®ä¾¿
Nest.jsæ¯ç¨äºæ建é«æä¸å¯ä¼¸ç¼©çæå¡ç«¯åºç¨ç¨åºçæ¸è¿å¼Node.jsæ¡æ¶ãæ¯æTypescriptãé¢åAOPç¼ç¨ãæ¯ætypeormãNode.jsççspringãæ建微æå¡åºç¨ã
Nest.jsæ¯ç¨äºæ建é«æä¸å¯ä¼¸ç¼©çæå¡ç«¯åºç¨ç¨åºçæ¸è¿å¼Node.jsæ¡æ¶ãæ¯æTypescriptãé¢åAOPç¼ç¨ãæ¯ætypeormãNode.jsççspringãæ建微æå¡åºç¨ã
å¹´å端æç«çææ¯æ¯ä»ä¹ï¼
æ认为çå¹´å端å¼åè æåºè¯¥ææ¡çä¸äºæ¯è¾ç«ççææ¯ä¸ç¥è¯ç¹ã
1ï¼å端æ¡æ¶åè¯è¨å±é¢
9æ份Vue3.0åå¸ï¼å£°ç§°å¯¹TypeScriptæçæ´å¥½çå¼åä½éªï¼éè¿ä»ä¸åæ¡æ¶çº§å«TSæ¯æä¸ï¼æ们å¯ä»¥çåºç¤¾åºçæ´ä¸ªé£åä»å¹´ç大家é½å»å¦ä¹ åºç¨TSï¼åæäºå¤§å®¶å¦ä½æTSç¨çæ´å¥½è¿ä¸ªæ¹åä¸æ¥äºã
æ以æ认为ä»å¹´TypeScriptçç«çç¨åº¦è¿æ¯åºè¯¥æåå¾é åçï¼æä»å¹´ä¹ä½¿ç¨TypeScriptéæäºDarukçæå¡æ¡æ¶æ¨åºäº2.0çæ¬ï¼è®©TSå¼åè æ¥ææ´å¥½çTSå¼åä½éªã
æ¥ä¸æ¥å°±æ¯ä¸¤å¤§éç£ æ¡æ¶çæ´æ°åç¨å¯¹æ¯ï¼Vue3åé¢è¯´äºä¸å¥ãèReactä¹å¨åæä¹åå¸äºReactçreleaseçæ¬ãè¿ä¸¤å¤§ä¸»æµæ¡æ¶çé¢ç¹æ´æ°ï¼ä¹è¯´æäºç¤¾åºåä½è é½å¨ä¸åæ¼åã
å¨Vue3ä¸é¤äºæ´å¥½çæ¯æTSå¤ï¼è¿æ´æ°äºCompositionAPIãèReact主è¦æ¯éä¸ç²¾åå¨å级ä½éªä¸ï¼è½ç¶æ²¡ææ°çFeatureä½æ¯æåäºå解å³äºå¾å¤ä¹åçæ¬æ½å¨çé®é¢ã
è¦è¯´åªä¸ªæç«è¿æ¯è¦ç个人å®é ç使ç¨åºæ¯åå好ï¼ä½æ¯å¹´æ¥çè¿æ²¡æå«çæ¡æ¶å¯ä»¥ä¸ä¹ä¸æã
2ï¼å¤§å端ç¸å ³ææ¯æ
ä»å¹´åºäºChromiumç微软edgeæµè§å¨ä¹å·²ç»æ¨åºãgoogleå¨web端çåå±äº§çäºå¯¹å¼åè æ·±å»çå½±åãChrome+ä¹å·²ç»åå¸å¤ä¸ªçæ¬ï¼æä¾äºä¸ç³»åçæ°ç¹æ§ï¼æ¯å¦CoreWebVitalsæ åï¼DesktopPWAçé½å¼å¾æ们å»å ³æ³¨ã
æ们说å®äºæµè§å¨ç¸å ³çé£ç¹ææ¯ä¹åï¼åèè大å端ç¸å ³çä¸äºææ¯å®è·µï¼æ¯å¦Flutterã
å¾å¤å端å¨ä»å¹´å·²ç»ä»webå¼å转å为Flutterå¼åï¼å¦ä¹ å使ç¨Dartææ¯æ¥æ建UIï¼è¿æ¯å¾å¤å¤§åçå端工ç¨å¸æ£å¨ç»åçäºæ ï¼å æ¬æçé¨é¨ä¹å¨å°è¯è¿ä¸ªäºæ ï¼ï¼è¿ä¸ªè¶å¿åºè¯¥å¨æªæ¥å å¹´è¿ä¼æç»ã
客æ·ç«¯electronå¨ä»å¹´ä¹æçé¿è¶³çè¿å±ï¼ä¸å¹´å å¤æ¬¡æ´æ°çæ¬ä¸è·¯å°äº.1.5ãéçç«æ å½±åï¼å½å å¨çº¿æè²çåä¸æ³¢å ´èµ·ãå¾å¤æ¡é¢è½¯ä»¶ï¼ç½è¯¾è½¯ä»¶é½å¨éç¨è¿ä¸ªææ¯æ¥è¿è¡å¼åï¼å¸åºä¸çå²ä½ä¹å¼å§åå¤ï¼electronææ¯å¯ä»¥è¯´å¨ä»å¹´ä¹æç«çè¶å¿ã
ç¶åæ们åççBFFå±ï¼nestjsä¾ç¶åæºï¼è¶æ¥è¶å¤ç人å¼å§è·³è¿å¦ä¹ expressåkoaå¼å§å¦ä¹ æ´ä¸°å¯çwebæ¡æ¶äºï¼æ¯å¦eggæè æçdarukï¼å¼åè å·²ç»å¨æ ¢æ ¢å½¢æå ±è¯ï¼å¨webframeworkçè·¯ä¸å¼å§è¶èµ°è¶è¿ï¼è£¸ånodejswebæå¡çæ¶ä»£å·²ç»å¼å§æ ¢æ ¢è¤ªå»ã
ä¸å¾ä¸æçè¿æserverlesså¨å端çæ®åï¼å¨å¹´å°è¾¾äºä¸ä¸ªæ°çé«æ½®ãé¿éäºï¼è ¾è®¯äºï¼å¤´æ¡äºççå½å çäºèç½ååä¹é½å¼å§å¤§ç©serverlessæ¦å¿µãä»å¯¹å æå¡å¼å§è½¬å对å¤æå¡ï¼æ®åçå¿å¤´å¾çï¼ä¹æè½å°çè¶å¿ååºæ¯ãä»å¹´çD2åæ ·ä¹æserverlessçä¸åºï¼å¯è§åéè§ç¨åº¦éæ¯å¯»å¸¸ã
3ï¼å·¥ç¨åææåä¸ªäººç´ è´¨æå
å离æ们è¿ä¸äºçæ¨å¨ç产åçææ¯ï¼æ¯å¦æ®ææç¥å¨ç¨CI/CDåpipeline管çä¸çº¿æµç¨çå ¬å¸è¶æ¥è¶å¤ï¼è¿ç§å»å¹´è¿å¯ä»¥åºå»å¹ä¸å¹çä¸è¥¿ï¼ä»å¹´ä¹éæ¥åæäºä¸çæ é åºç¡è½åï¼å¦æä¸ä¼çåå¦å¯è¦æç´§å¦ä¹ äºã
å¹´å大家é½ç¯çå槽é¢è¯å·mediumé¢ç®æ²¡ç¨ï¼èå¹´å大家å¼å§é»è®¤é¢è¯æäºå ¬å¸é½è³å°è¦å·å°mediumç¨åº¦çé¢ç®ãè¿å¯¹å¾å¤å端æ¥è¯´æ¯ä¸ä¸ªå¿æºåç´ è´¨çæåä¸è½¬åï¼å¤§å®¶å¨æ¥è§¦æ°ææ¯çåæ¶ï¼ä¹æ ¢æ ¢åç°ï¼å端æ´ä¸ªèä¸ç¯å¢çååï¼è¶æ¥è¶å¤çå ¬å¸å¯¹äººçæ´ä½ç»¼åç´ è´¨è¦æ±åé«äºã
eggjs为ä»ä¹å£ç¢ä¸å¥½è´¨éé®é¢ãeggjs为ä»ä¹å£ç¢ä¸å¥½çåå æ¯è´¨éé®é¢ï¼å 为eggjsè´¨éå·®ï¼å®ä»·é«ãå£ç¢ï¼æä¼äººå£å¤´çé¢æ¬ï¼æ³æä¼äººç议论ï¼ç¾¤ä¼çå£å¤´ä¼ 说ï¼ç¸å½äºä¸ç§å¤§ä¼å´è¾¹ç»å¸¸æèµ·çäºæ æç»ç»ã
NGå ¨å®¶æ¡¶å ¨æ 项ç®å®è·µæ»ç»Angularå¨å½å 使ç¨ç人并ä¸åå½å¤é£ä¹å¤ï¼åºæ¬é½æ¯å¤ä¼å¨ç¨ï¼ä½å ¶æ¡æ¶çææ³å´ä»å¯ä»¥ä¸ºæ们æåé´ï¼å¨æäºé®é¢æ²¡ææè·¯çæ¶åå¯ä»¥åèngç¸å ³çå¤çï¼ngå¤çæ¹å¼åæç»´ç¡®å®æ¯è¾è¶ åï¼ä½ä¹å æ¤èæ²é«å寡ãæ¬ææ¨å¨éè¿ngå ¨å®¶æ¡¶é¡¹ç®ï¼å端Angular+å端NestJS7ï¼çå®è·µæ¥æ»ç»å¯¹äºngæ¶æä¸ä¸äºäº®ç¹çå ³æ³¨ä¸æèï¼AngularåNestå¨åå端æ¡æ¶çå¤çä¸ååºä¸èï¼å¯¹æ¯èµ·æ¥æ´æåé´æä¹ã
[ç®å½ç»æ]
[ç®å½æè¿°]
æ´ä¸ªå端项ç®æ¯åºäºangularèææ¶çæçï¼å ¶åºæ¬ç®å½ç»ææ¯å¨srcçappä¸è¿è¡ç¸å ³ç»ä»¶å页é¢ç模åå¼åï¼main.tsåindex.htmlæ¯æ´ä¸ªå页åºç¨çä¸»å ¥å£ï¼æ ¹ç®å½ä¸angular.jsonç¨äºé ç½®ç¸å ³çæå ç¼è¯çç¯å¢é ç½®åæ°
[å®è·µå享]
[ç®å½ç»æ]
[ç®å½æè¿°]
å端项ç®æ¯åºäºnestjsæ¡æ¶ç大ååå°é¡¹ç®é ç½®ï¼api模å主è¦æ¯å¯¹å¤è¾åºçæ¥å£ï¼authãfiltersãguardãinterceptorsãmiddlewaresãpipesçæ¯å¯¹äºéè¦ç模åè¿è¡ç»ä¸çæ¶éå¤çï¼main.tsæ¯ä¸»å ¥å£æ件ï¼ç¨äºå¯å¨åç¸å ³é ç½®çï¼app.module.tsæ¯ç¨æ¥æ¶éææ模åçå¯¼å ¥ï¼ngåºäºæ¨¡åçæ¹å¼å¯ä»¥èµ·å°é常好çé离ææ
[å®è·µå享]
é¦å ï¼å¯¹äºæ²¡æç¨è¿ngçåå¦ç§æ®ä¸ä¸ï¼angularå ¶å®å为两个大çæ¬ï¼ä¸ä¸ªæ¯angular1.xçï¼ä¹å°±æ¯ng1ï¼ä¹å°±æ¯ç°å¨è¿æçangularjsï¼å¦ä¸ä¸ªçæ¬æ¯ng2以åççæ¬ï¼ng2ä¹å被谷ææ¶è´åï¼å®å ¨éåäºæ¡æ¶ï¼å¯ä¸å1.xç¸éç估计ä¹å°±å©é£å 个ææ³è¿å¨äºï¼æ¨¡ååãä¾èµæ³¨å ¥ãååç»å®ãMVCï¼å¯¹äº1.xæå ´è¶£çåå¦å¯ä»¥å»çVueç1.xççæ¬ï¼åºæ¬ç®æ¯ç®åççng1.xï¼Vue2ä¹åå°±ååæ¥çngåéæ¬é³äºï¼vue2主è¦æ¯ä»¥åå¸è®¢é æ¥æ¿ä»£ä¾èµæ³¨å ¥çæè·¯ï¼æ¯è¿äº...(ps:æ³çng1çæ¬çå¯ä»¥çè¿ä¸ªå°åï¼å± ç¶è¿ææ´æ°...angularjså®æ¹ä»åº)ï¼è¿éåæç主è¦æ¯Ngï¼ng8ä¹åé¤äºå¼å ¥Ivy(Ivyæ¶æå®æ¹ä»ç»)è¿ä¸ªç¼è¯æ¸²æå¨ä¹å¤ï¼å ¶å®æ¹å¨ä¸å¤§ï¼ä¸»è¦å°±æ¯å¨ä¼å以ååºé¤åæ°å»ºä¸äºapiççãNgçæºç å¾åºå¤§ï¼goggleèªç äºä¸ä¸ªbazelèªå¨åæå»ºå·¥å ·ï¼ngèªç¶ä¹æ¯é è¿ä¸ªæ建çï¼å¯¹bazelæå ´è¶£çåå¦ï¼å¯ä»¥çè¿ä¸ªGoogle软件æå»ºå·¥å ·Bazelåçå使ç¨æ¹æ³ä»ç»ï¼æè¿éå°±ä¸å±å¼ææçæºç ï¼æ´ä½çæ ¸å¿å¤§æ¡æ¶å¦ä¸ï¼
nestjsæ¯nodejsçwebåºç¨çä¸ä¸ªå¤§çéæï¼å®æåæ¯åºäºexpresså°è£ çä¸ä¸ªå端æ¡æ¶ï¼åæ¥å°æå¡ç«¯åç§ç念é½ä½¿ç¨jså®ç°äºä¸ä¸ï¼è½ç¶ä¸è½åæççæå¡ç«¯è¯è¨æ¡æ¶å¦javaçè¿è¡åª²ç¾ï¼ä½æ¯æå¡ç«¯æéè¦çä¸è¥¿åºæ¬é½å ·å¤äºï¼å¯¹äºæéæ±æ³è¦ä½¿ç¨jsæ¥å¼åå端çåå¦æ¯ä¸ªä¸éçéæ©ï¼ä¸ªäººè®¤ä¸ºç®åçbffï¼æ¯å¦æ³èªå·±æ¨¡æçå¼å个åå°æ¥æ¶è¯·æ±ï¼éæ©nodeç´æ¥åæè 使ç¨expressãkoaå°±å¯ä»¥ï¼å¯¹äºæä¸å®çä¸é´å±ç»å端å¤çï¼å¯ä»¥éç¨é¿éçeggï¼å¯¹äºå¦ä½åºäºeggæ建ä¸é´å±ï¼å¯ä»¥ççè¿ç¯æç« å¦ä½ä¸ºå¢éå®å¶èªå·±çNode.jsæ¡æ¶ï¼ï¼åºäºEggJSï¼ï¼å¯¹äºå¤§åçæå¡ç«¯ï¼å°¤å ¶æ¯å端æ¯ä»¥ng为主æ çï¼å¯ä»¥ä¼å èè使ç¨nestjsï¼å ¶æ¬¡å¯¹äºioè¾å¤è计ç®è¾å°çï¼jsæ¬èº«çç¹è´¨ï¼ï¼æè æå¡ç«¯éè¦ä¸c++é åçï¼å¤§åæå¡ç«¯åºç¨ä¹å¯ä»¥ä½¿ç¨nestãnesté»è®¤æ¯ä¸éç¨å¾®æå¡çå½¢å¼çï¼nestå°ä¸åçå¹³å°å°å¨äºä¸åçplatformä¸ï¼è¿éåªåææ®éç以express为platformçå½¢å¼ï¼å¯¹äºå欢微æå¡çåå¦ï¼å¯ä»¥å¯¹æ¯åjavaçspringcloudçåºå«ï¼è¿éå°±ä¸å表述äºï¼å ¶æ´ä½çæ ¸å¿ç»æ大è´å¦ä¸ï¼
è¿é主è¦å¨å¯¹ä¾èµæ³¨å ¥çå®ç°åä¸ä¸ªç®åçç解å享ï¼å ¶æè·¯æ¯ä¸èç¸æ¿çï¼å¯¹äºç解å端ç念çä¾èµæ³¨å ¥æå¾å¥½çç解ï¼è¿ä¹æ£æ¯å端å端åçä¸ä¸ªä½ç°ï¼ä¹æ¯ææ©çMVCæ¡æ¶ååæ¥çMVVMæ¡æ¶è¿åº¦çä¸ä¸ªåå²è¿ç¨ï¼ä¾èµæ³¨å ¥æ¹å¼å¯¹äºææ©çå端æ¡æ¶è¿æ¯æ纪念æä¹çï¼ä½æ¯å¯¹äºngå ¨å®¶æ¡¶æ¥è¯´ï¼è¿ç®æ¯å ¶åºæ¬å²å¦çä¸ä¸ªåºæ¬é¢
bAngular/b
å æ¥çä¸ä¸ngæ¯å¦ä½å®ç°injectorçï¼è¿ééç¹å¨äºä½¿ç¨äºæ½è±¡ç±»æ¥éè½½ä¸åå½æ°ç使ç¨ï¼å¯¹äºprovider循ç¯ä¾èµçå¤çï¼å©ç¨äºä¸ä¸ªMapæ°æ®ç»ææ¥åºåä¸åçProvider
bNest/b
åæ¥çä¸ä¸ï¼nestçå®ç°ï¼ä¸åäºngçå®ç°ï¼nestæ¯å©ç¨åæ°å继æ¿ç¶ç±»åæ°æ¥ç¡®å®æ´ä¸ªç循ç¯ä¾èµå ³ç³»çï¼å ¶æ²¡æ使ç¨éè½½æ¥å®ç°ï¼ä½é½å¯¹å¾ªç¯ä¾èµåäºå¤çï¼å ¶åºæ¬æè·¯æ¯ä¸è´çã
æ»ç»ï¼ä»nestång对injectorçå®ç°å¯ä»¥çåºï¼è½ç¶é½æ¯æ³¨å°å¨çå®ç°ï¼ä½æ¯ç±äºåç°æ¹å¼çä¸åï¼å èå¨å®ç°æ¹å¼ä¸ä¹ä¼ææä¸åï¼å¯¹äºtsèè¨ï¼éç¨interfaceè¿æ¯æ½è±¡ç±»ï¼ç¡®å®å¯ä»¥åé´javaç模å¼æè·¯ï¼å¯¹äºä¹ æ¯jsçæ们æ¥è¯´ï¼å¯¹äºæ´ä¸ªæ°æ®ç±»åçæ©å±ï¼å¦ï¼æ½è±¡ç±»ãæ¥å£ï¼çæ¯éè¦åå端åé´çãæ´ä½æ¥è¯´ï¼å¯¹äºä¾èµæ³¨å ¥çå®ç°æå ³é®çå°±æ¯å¨äºå¤çproviderçæ´ä¸ªä¾èµé®é¢ï¼è¿ä¸¤è é½æ¯éç¨tokençæ¹å¼æ¥åºåå¯¹å¾ å°åºæ¯å±äºåªä¸ä¸ªproviderï¼ç¶å对äºç¹æ®çç¸å ³ä¾èµå¾ªç¯çé®é¢å对åºçå¤ç
ngæ´ä¸ªçæä½ç³»å¨å½å åºç¨ç并ä¸å¹¿ï¼ä½å¹¶ä¸å¦¨ç¢å ¶ä½ä¸ºå端ç念çæ©å±å è¡è çè¿æ ·ä¸ä¸ªè§è²ï¼ä¸ªäººè®¤ä¸ºå ¶å¨é离æ§ä»¥åç³»ç»æ§æ¹é¢é½æ¯è¦ä¼äºvueåreactçï¼å è对äºç®åæ¯è¾æµè¡çå¾®å端æ¡æ¶(ps:对äºngçå¾®å端åºç¨ï¼å¯ä»¥åèè¿ç¯æç« ã第æã使ç¨Angularæé å¾®å端æ¶æçToBä¼ä¸çº§åºç¨)ï¼ä¸ªäººè§å¾å¨æ²ç®±é离çç³»ç»èåæ¹é¢ç¡®å®å¯ä»¥åé´ä¸ä¸ngçæäºæè·¯ï¼æ许æ£æ¯ç±äºè¿ä¸ªåå ï¼å®ææ¯ä¸å¤§æ¡æ¶ä¸æå ä¸tsçï¼ä¹æå¯è½æ´ä¸ªngçå¼åè æ´åæ¯ä¼ ç»ç软件工ç¨å¸ï¼å¯¹äºæ´ä¸ªå¼åè¦åå°å®ä¹æ°æ®ãå®ä¹æ¨¡åãç³»ç»è®¾è®¡ççï¼å¯¹äºå¤§å项ç®èè¨ï¼è¿æ ·ç¡®å®ä¼åå°å¾å¤å bugèéè¦éå¤ä¿®æ¹çæ¶é´ï¼ä½æ¯å¯¹äºå°å项ç®ï¼ä¸ªäººè®¤ä¸ºè¿æ¯vueæ´åéãè½ç¶å¯¹äºå½å ï¼ngåºæ¬å·²ç»å±äºææ¥é»è±äºï¼ä½æ¯å®çä¸äºç念å设计æ路确å®è¿æ¯å¼å¾åé´çï¼å¨è¿ä¸ªå å·çæ¶ä»£ï¼å大åºç¨é½å¨åçé«çº§åã大åååå±ï¼è¯´ä¸å®åªå¤©ngåå¨å½å éåå· å³°äºå¢ï¼è½ç¶å¾é¾~~åååï¼åä½å æ²¹ï¼
å大éé¸è®¾è®¡å¹è®ï¼nodeç¼ç¨å¼åææ¯çåå±è¶å¿ï¼nodeææ¯æ为webå端é¢åç主æµå¼åå·¥å ·å¯ä»¥è¯´æ¬èº«å°±æ¯ä¸ä¸ªç¾ä¸½ç误ä¼ï¼å½åè¿ä¸ªææ¯è¢«å¼ååºæ¥ä½¿ç¨çæ¶å主è¦æ¯ä¸ºäºè§£å³å端çé®é¢æåºç°çã
ä»å¤©ï¼æµåjava课ç¨å¹è®æºæå°±ä¸èµ·æ¥äºè§£ä¸ä¸nodeææ¯çåå±åç¨åæªæ¥çåå±è¶å¿ã
a)Node8è¿å ¥LTSæ¶ä»£Node.js大çååæ¯è¿å ¥Node8æ¶ä»£ï¼å®æ¯ä¸ä¸ªç¨³å®çé¿ææ¯æçæ¬(LTS)ï¼é¤äºæ§è½æåå¤ï¼è¿æ以ä¸å 个è¦ç¹ã
Async/Awaitæ¯æã
å ¶å®å¨Node.jsv7.6å°±å¯ä»¥éè¿flagæ¯æäºï¼å¨node8éç´æ¥è½å°ã
éè¿Asyncå½æ°å¯ä»¥æ´å¥½çè¿è¡å¼æ¥æµç¨æ§å¶ï¼è¿ç¦»CallbackHellã
å¨Asyncå½æ°éï¼ä½ å¯ä»¥éè¿awaitè°ç¨Promiseï¼ä»¥åéè¿coå 裹çgeneratorï¼å¯ä»¥è¯´ï¼ååæ¯å®ç¾çAsyncå½æ°ï¼ååä¹å®ç¾å ¼å®¹åç§éç代ç ï¼ç§°ä¸ºå¼æ¥ç»æ解å³æ¹æ¡ä¸ä¸ºè¿ã
ES6模åæ¯æã
éè¿vue/reactãwebpackãbabelåtypescriptçç«çåå±ï¼es6模åå¾å°äºå¹¿æ³æ®åååºç¨ï¼å¨Node.jsv8.5å¯ä»¥éè¿--experimental-modulesæ¥å¼å¯è¿ä¸ªä½éªçç¹æ§ã
å½ç¶ï¼ä½ æ³å¨Node.jsæ´æ©çæ¬é使ç¨ES6模åï¼å¯ä»¥éç¨@std/esm模åã
HTTP2æ¯æã
å¨Node.jsv8.8å°±å¼å§é»è®¤å¯ç¨äºï¼http2对æå¡å¨ç«¯æ¨éï¼å¤ééå¤ç¨çç¹æ§ï¼è½å¤æ´å¥½å°ä¸ºæµè§å¨ä¾¿å©ï¼æ¯æ§è½ä¼åçå©å¨ã
b)ä¼ä¸çº§Webå¼ååºç¡æ¡æ¶é¤äºåºç¨å¹¿æ³ç主æµWebæ¡æ¶Koaå¤ï¼Fastifyä¹æ¯ä¸ç´å²æï¼ä½è MatteoCollinaæ¯Node.jsæ ¸å¿å¼åï¼Streamæé¨ï¼æ§è½ä¼åä¸å®¶ã
FastifyåºäºSchemaä¼åï¼å¯¹æ§è½æåæå ¶ææ¾ã
ç¼å认为è¿æ¯ä¼ä¸çº§Webå¼åï¼ä»å¨è¿éç»æ们ä»ç»äº3个ç¥åæ¡æ¶ã
b1)Egg.jsé¿éå¼æºçä¼ä¸çº§Node.jsæ¡æ¶Eggåå¸2.0ï¼åºäºKoa2.xï¼å¼æ¥è§£å³æ¹æ¡ç´æ¥åºäºAsyncFunctionã
æ¡æ¶å±ä¼åä¸å«Node8带æ¥çæåå¤ï¼å¸¦æ¥%å·¦å³çæ§è½æåã
Eggéç¨çæ¯ãå¾®å æ ¸+æ件+ä¸å±æ¡æ¶ã模å¼ï¼å¯¹äºå®å¶ï¼çæï¼å¿«éå¼åæææ¾æåï¼å¦å¤å¼å¾å ³æ³¨çæ¯ç¨³å®æ§åå®å ¨ä¸ï¼ä¹æ¯æ为åºè²çã
b2)NestNestæ¯åºäºTypeScriptåExpressçä¼ä¸çº§Webæ¡æ¶ã
å¾å¤äººå¼ç©ç¬è¯´ï¼Nestæ¯åJavaå¼åæ¹å¼çï¼ç¡®å®ï¼Nestéç¨TypeScriptä½ä¸ºåºå±è¯è¨ï¼TypeScriptæ¯ES6è¶ éï¼å¯¹ç±»åæ¯æï¼é¢å对象ï¼Decorator(类似äºJavaé注解Annotation)çæ¯æã
å¨åæ³ä¸ï¼ä¿æJavaå¼åè çä¹ æ¯ï¼è½å¤å¸å¼æ´å¤äººå¿«éä¸æã
TypeScriptæ¯æå ä¹æ¯ç®åææNodeWebæ¡æ¶é½è¦åç头ç大äºï¼å¨å¹´Nestç®ä¸ªç¥å项ç®ï¼å¼å¾ä¸æã
b3)ThinkJSThinkJSæ¯ä¸æ¬¾æ¥æ±æªæ¥çNode.jsWebæ¡æ¶ï¼è´åäºéæ项ç®ä½³å®è·µï¼è§è项ç®è®©ä¼ä¸çº§å¢éå¼ååå¾æ´å ç®åï¼æ´å é«æã
ç§æ¿ç®æ´æç¨ç设计ååï¼å¨ä¿æåºè²çæ§è½åè³ç®ç代ç åæ¶ï¼æ³¨éå¼åä½éªåæç¨æ§ï¼ä¸ºWEBåºç¨å¼åæä¾å¼ºæåçæ¯æã
ThinkJSæ¯å½äº§èçWebæ¡æ¶ï¼å¨å¹´æåå¸v3çæ¬ï¼åºäºKoaå æ ¸ï¼å¨æ§è½åå¼åä½éªä¸ææ´å¥½çæåã
æ´ä½æ¥çï¼Node.jså¨ä¼ä¸Webå¼åé¢åæ¥æ¸æçï¼æ 论微æå¡ï¼è¿æ¯Apiä¸é´å±é½å¾å°äºé常好çè½å°ã
å¹´ï¼å¯ä¸éæ¾çæ¯Node.jså¨servlessä¸è¡¨ç°çä¸å¤ªå¥½ï¼ç¸å ³æ¡æ¶å®è·µåå°ã
c)ä¸å¯ä¸è§çApiä¸é´å±å端è¶æ¥è¶å¤æï¼å端æå¡åï¼ä»æ¥çå端è¦é¢ä¸´æ´å¤çææã
ä¸ä¸ªå ¸åçåºæ¯å°±æ¯å¨æå¡åæ¶æéï¼å端é¢ä¸´ç头ççé®é¢æ¯å¼æAPIï¼åå端èè°çæ¶åï¼å¤ä¸ªå端äºç¸æ¨è¯¿ï¼è¦ä¹ææ ¢ä¸çº¿è¿åº¦ï¼è¦ä¹è®©å端æ§è½åå¾æå ¶æ ¢ã
è¿åº¦æ ¢æ¾å端ï¼æ§è½å·®ä¹æ¾å端ï¼ä½è¿ä¸ªé çç该å端æ¥èä¹?Node.jsçApiä¸é´å±åºç¨å¾å¥½å°è§£å³äºè¿ä¸ªé®é¢ã
å端ä¸æ³æ¹çæ¶åï¼å®å¨ä¸è¡å°±å端èªå·±åï¼æ´çµæ´»ï¼æ´è½åºåã
éä¼ æ¥å£ï¼å¯¹äºå ç½æè éå®å ¨æ¥å£ï¼å¯ä»¥éç¨ä¸é´å±éä¼ ã
èåæ¥å£ï¼å¯¹å¼æAPIå¤çé常æ¹ä¾¿ï¼å¦æè½å¤æ¢³çmodelï¼åºåæ´å®¹æã
Mockæ¥å£ï¼éè¿Mockæ¥å£ï¼æä¾å端å¼åæçï¼å¯¹æµç¨ä¼åæææå ¶ææ¾ï¼æ¯å¦å»åªå¿å¼åçyapiå°±æ¯ä¸é¨è§£å³è¿ä¸ªé®é¢çã
é¤æ¤ä¹å¤ï¼å端å¦ææ³åä¸äºææ¯é©±å¨çäºå¿ï¼SSR(æå¡å¨ç«¯æ¸²æ)åPWA(æ¸è¿å¼Webåºç¨)ä¹æ¯é常ä¸éçéæ©ã
d)æ°é¢å(深度å¦ä¹ ãåºåé¾ç)