佛山网站建设灵格,网络架构方法,离我最近的广告公司在哪里,网站都有什么功能第九章 前后端框架 9.1 前端框架 Typescript特别适合用于开发前端应用。Typescript对JSX有很好的支持#xff0c;而且能安全地建模不可变性#xff0c;从而提升应用的结构和安全性#xff0c;写出的代码正确性高#xff0c;便于维护。 9.1.1 React JSX/TSX内容等 详情…第九章 前后端框架 9.1 前端框架 Typescript特别适合用于开发前端应用。Typescript对JSX有很好的支持而且能安全地建模不可变性从而提升应用的结构和安全性写出的代码正确性高便于维护。 9.1.1 React JSX/TSX内容等 详情请到React官方学习 9.1.2 Angular 详情请到Angular学习 依赖注入控制反转 9.1.3 Vue 详情请到Vue官方学习 Vue3全面支持Typescript 9.2 类型安全的API 针对REST式API的swagger针对GraphQI的Apollo针对RPC的gRPC 9.3 后端框架 Nest.js完全支持Typescript 通过Typescript访问数据库TypeORM超好用 第十章 命名空间和模块 在一个程序中我们可以在不同的层级上进行封装。在最底层函数封装行为对象和列表等数据结构封装数据。函数和数据还可以放在类中还可以把函数放在单独的数据库或数据存储器中把函数和数据放入独立的命名空间中。 通常一个类或一系列使用函数放在一个文件中。再向上一层我们可能会把多个类或多组使用函数组织在一起构建成包package发布到NPM中。 模块module是一个重要概念 我们要知道编译器TSC是如何解析模块的 要知道构建系统Webpack,GulpVite等)是如何解析模块的 还要知道模块在运行时是如何加载到应用的使用script/标签SystemJS等。 对JavaScript来说这些操作往往都由单独的程序执行有点混乱。CommonJS和ES2015模块标准简化了这三个程序之间的互操作Webpack等强大的打包程序进一步抽象了这三个解析过程背后涉及的操作。 本章着重讨论这这三种工具中的第一种即Typescript解析和编译模块所用的工具第12章再讨论构建系统和运行时加载程序。 实现命名空间和模块的不同方式导入和导出代码的不同方式在代码增长的过程中弹性伸缩这些方法。模块模式与脚本模式的比较声明合并的概念及其作用 10.1 JavaScript模块简史 由于Typescript最终编译成JavaScript并与JavaScript互操作因此Typescript要支持JavaScript程序使用的各种模块标准。 起初1995JavaScript并不支持任何模块系统。由于没有模块一切都在全局命名空间中声明导致应用非常难以构建和弹性伸缩。而且我们无法显式指明各个模块对外开放哪些API。 为了解析问题人们通过对象或理解调用函数IIFE表达式模拟模块把对象或IIFE附加到全局对象window上供当前应用 window.emailListmModule {renderList(){}}window.emailComposerModule {renderComposer(){}}window.appModule {renderApp(){window.emailListmModule.renderList()window.emailComposerModule.renderComposer()}}可是加载和运行JavaScript会阻塞浏览器UI浏览器会变得越来越慢。 于是有了新方案在页面加载完成之后动态加载JavaScript而不同时加载。 在页面加载完毕之后惰性通常是异步加载JavaScript代码为了实现异步惰性需要做到以下三点 模块要适当的封装否则不断流入的依赖会导致页面崩溃模块之间的依赖要显示声明否则不知道需要加载什么模块以及以什么顺序加载。每个模块在应用中都要有一个唯一标识符。否则无法指定需要加载哪个模块。 nodejs大哥采用用的是Commonjs模块标准 // emailBaseModule.jslet emailList require(emailListModule)let emailComposer require(emailComposerModule)module.exports.renderBase function(){}可是Commjs处理事情的方式有几个问题包括require必须同步调用Commonjs模块解析算法不适合在web使用。Commjs的代码在某些情况下不会做静态分析。 因为module.exports可能出现在任何位置甚至可能在不会执行的分支require调用可以出现任何位置而且可以包含任意字符串和表达式就导致静态链接JavaScript不能确认被 引用的文件真实存在也无法确保被引用的文件真正的到处了声称的代码。 然后ECMAScript语言第六版即ES2015为导入和导出引入了一个新标准句法更简洁而且支持静态分析。 // emailBaseModule.jsimport emailList from emialListModuleimport emailComposer from emailCpmposerModuleexport function rederBase(){}如今我们在JavaScript和Typescript中使用的就是这个标准。不是每个JavaScript引擎都原生支持这个标准所以要把代码编译成被支持的格式在nodejs中编译成commonjs格式在浏览器环境中编译成全局或单个模块可加载的格式 TSC的构建系统还支持针对不同的目标环境编译模块包括全局ES2015CommonjsAMDSystemjsUMD。 10.2 importexport 除非迫不得已不要在Typescript中使用Commjs全局或命名空间下的模块。 // a.tsexport function foo(){}export function bar(){}​import {foo,bar} from ./a​export let result bar()// ./c.tsexport default function meow(){}import meow form ./cmeow()import * as a from ./a​a.foo()export * from ./aexport {result} from ./bexport meow from ./由于我们编写的是Typescript而不是JavaScript代码所以除了值外还可以导出类型和接口。因为类型和值位于不同的命名空间中所以可以导出两个同名的内容一个在值层面一个在类型层面。Typescript将推导出你值得是类型还是值 // g.tsexport let X 3;export type X {y:string}​// h.tsimport {X} from ./g​let a X 1let b:X {y:z}10.2.1 动态导入 应用变大后初次渲染的时间将不断增加。这对前端应用来说是不可忽视的问题。 进一步的优化措施是惰性加载分块在真正使用的时候才加载。 LABjs及其衍生库引入了真正需要时才惰性加载的概念这个概念正式的名称是“动态导入”dynamic imports),用法 let locale awat import(locale_cn-en)import可以作为一个语句使用作用是静态获取代码另外也可以作为一个函数调用此时返回结果是一个Promise 动态导入应该使用下面两种做法中的其中一种 直接把字符串字面量传给import不要事先赋值给变量把表达式传给import但要手动注解模块的签名 import {locale} form async function main(){let userlocal awat getuserlocal()let path ./loca-${userlocal}let local:typeof locale await import(path)}导入locale不过只作为类型这样写出代码不仅具有十足的类型安全而且能动态计算导入那个包。 10.2.2使用Commonjs和AMD模块 使用Commjs或AMD标准的JavaScript模块时可以直接从模块中导入名称就像使用es2015模块一样 import {something} from ./commonjs/module默认情况下commonjs的默认导出不能与es2015的默认导出互操作使用默认 导出要借助通配符 import * as fs from fsfs.readFile(some/file.txt)​// import { readFile } from fs;​// readFile​// import * as fs from fs// fs.readFile10.2.3 模块模式与脚本模式 Typescript采用两种模式编译Typescript文件模块模式和脚本模式 文件中有没有import或export语句如果有使用模块模式如果没有使用脚本模式 目前为止我们使用的都是模块模式 在脚本模式下声明的顶层变量子啊项目中的任何文件都可以使用无需导入可以放心使用UMD模块中的全局导出不用事先导入下述情况使用脚本模式 快速验证不打算编译成任何模块系统的浏览器代码{“module”:”none”},在html文件中直接使用script/标签引入创建类型声明11.1节 其实在使用Typescript编写代码时基本上应该始终使用模块模式通过import导入代码通过export导出代码供其他文件使用。 10.3 命名空间 Typescript还提供了另一种封装代码的方式namespace关键字。很多javaC#CPHP和python都支持。 要注意一点虽然Typescript支持命名空间但这并不是封装代码的首选方式。如果你不确定使用命名空间还是模块首选模块 命名空间所做的抽象摒弃了文件在文件系统中的目录结构我们无需知道.mine函数保存在a/b/c/d中若想使用这个函数使用简洁的命名空间A.B.C.D.mine即可 假设有两个文件一个文件是发起http get请求的模块另一个文件使用该模块发起请求 // Get.tsnamespace Network {export function getT(url: string): PromiseT {return new Promise((){})}}// App.tsnamespace App {Network.getGitRepo(api.github.com/repos/)}命名空间必须有名称命名空间可以导出函数变量类型接口和其他命名空间。namespacekuai中没有显示导出的代码为所在块的私有代码。由于命名空间可以导出命名空间因此命名空间可以嵌套。 namespace Netwok {export namespace HTTP {export function getT(url:string):PromiseT{return new Promise((){})}   }export namespace TCP{export function listenerCount(port:number){​}function test(){​}}export namespace UDP{​}}Netwok.HTTP.getNetwok.TCP.listenerCountNetwok.TCP.test // 找不到命名空间也可以分散在多个文件中。Typescript将递归合并名称相同的命名空间 为了使用方便可以创建别名 namespace A {export namespace B{export namespace C {export let d 3}}}import d A.B.C.dlet e d*3console.log(e);//910.3.1 冲突 导出相同名称的代码会导致冲突 // 报错namespace Network {export function request(){}}namespace Network {export function request(){}}​特例改进函数类型时对外参ambient函数声明的重载不导致冲突 10.3.2 编译输出 与导入和导出不一样命名空间不遵循tsconfig.json中的module设置始终编译成全局变量。 模块优于命名空间 为了更符合JavaScript标准为了更明确地指定依赖较之命名空间应该更多的使用常规的模块 明确指明依赖的好处很多可以提示代码可读性可以强制模块隔离还可以做静态分析。 在大型项目中建议全部使用模块不要用命名空间 10.4 声明合并 目前我们接触到了Typescript所做的三种合并 合并值和类型根据使用情况区分一个名称是引用值还是类型把多个命名空间合并成一个把多个接口合并成一个 Typescript支持很多类型的合并让一些难以表达的模式变为可能。