内容简介:说明: 这篇文章并不是教大家如何用和如何写设计模式,而是给大家一个参考:如何搭建一个练习的ts版设计模式库js 的设计模式是经常使用的,但是最近在转 ts,所以就打算用 ts 重写 js 的设计模式. 说是重写其实也是模仿.主要技术点:webpack +typescrpt +jest +
说明: 这篇文章并不是教大家如何用和如何写设计模式,而是给大家一个参考:如何搭建一个练习的ts版 设计模式 库
TypeScript版设计模式
js 的设计模式是经常使用的,但是最近在转 ts,所以就打算用 ts 重写 js 的设计模式. 说是重写其实也是模仿.
主要技术点:webpack +typescrpt +jest + ts-jest
使用 jest 测试的原因是使用和配置相对简单,并且支持 ts 文件(不需要编译成 js 文件后测试),也是 react 的推荐测试框架(毕竟 facebook 自己产品).
好了开始我们的旅程.
创建 package.json 文件及配置
npm init 复制代码
如下:
{ "name": "ts-design-pattern", "version": "1.0.0", "description": "ts design pattern", "main": "index.js", "scripts": {}, "keywords": ["ts", "design", "pattern"], "author": "wwmin", "license": "ISC", "devDependencies": {} } 复制代码
更多配置请查看npm init
安装依赖
cnpm i typescript jest ts-jest @types/jest --save-dev 复制代码
并设置 script 后 package.json 文件如下:
{ "name": "ts-design-pattern", "version": "1.0.0", "description": "ts design pattern", "main": "index.js", "scripts": { "test": "jest" }, "keywords": ["ts", "design", "pattern"], "author": "wwmin", "license": "ISC", "devDependencies": { "@types/jest": "^23.3.10", "jest": "^23.6.0", "ts-jest": "^23.10.5", "typescript": "^3.2.1" } } 复制代码
配置 typescript
tsc --init 复制代码
后生成 tsconfig.json 文件内容如下
{ "compilerOptions": { "target": "es2015", "module": "commonjs", "strict": true, "noImplicitAny": true } } 复制代码
更多配置请查看tsconfig.json
配置 jest
npx ts-jest config:init 复制代码
后生成 jest.test.js 文件内容如下
module.exports = { preset: 'ts-jest', testEnvironment: 'node', }; 复制代码
更多配置请查看 ts-jest
创建文件夹及文件
| .gitignore | jest.config.js | package.json | README.md | tsconfig.json | +---src | Adapter.ts | \---test Adapter.test.ts 复制代码
整体文件夹结构大致就是这样, 这里也把.gitignore 内容放上,方便大家参考
.DS_Store node_modules/ /dist/ npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.map 复制代码
src 下和 test 的文件是完成的代码
创建第一个设计模式 adapter
在 src 下新建 Adapter.ts
代码如下:
interface MediaPlayer { play(type: string, fileName: string): void; } interface AdvanceMediaPlayer { playVlc?(fileName: string): void; playMp4?(fileName: string): void; } class VlcPlayer implements AdvanceMediaPlayer { playVlc(fileName: string) { console.log("playing vlc file......." + fileName); } } class Mp4Player implements AdvanceMediaPlayer { playMp4(fileName: string) { console.log("playing mp4 file......." + fileName); } } class MediaAdapter implements MediaPlayer { player: AdvanceMediaPlayer; constructor(type: string) { // 根据type 生成哪一个播放类 if (type === "vlc") { this.player = new VlcPlayer(); } else if (type === "mp4") { this.player = new Mp4Player(); } else { this.player = new Mp4Player(); // 默认使用mp4player } } play(type: string, fileName: string) { // 因为特定的播放类有特定的播放方法,所以还需要再根据type调用特定的播放类 if (type === "vlc") { if (this.player.playVlc) this.player.playVlc(fileName); } else if (type === "mp4") { if (this.player.playMp4) this.player.playMp4(fileName); } else { return null; } } } export class AudioPlayer implements MediaPlayer { play(type: "mp3" | "mp4" | "vlc", fileName: string): boolean { if (type === "mp3") { console.log("播放器内置支持mp3, " + fileName + "已开始播放."); return true; } else if (type === "vlc" || type === "mp4") { let ma = new MediaAdapter(type); ma.play(type, fileName); return true; } else { console.log("不支持当前格式"); return false; } } } 复制代码
然后创建测试文件 在 test 文件夹下新建 Adapter.test.ts 内容如下:
import { AudioPlayer } from "../src/Adapter"; test("playing to be true", () => { let player = new AudioPlayer(); expect(player.play("mp3", "aa.mp3")).toBe(true); expect(player.play("mp4", "bb.mp4")).toBe(true); expect(player.play("vlc", "cc.vlc")).toBe(true); }); 复制代码
关于 jest 的使用请参考jest
完成代码后开始测试
npm run test 或 npm test 复制代码
内容如下
PASS test/Adapter.test.ts √ playing to be true (18ms) console.log src/Adapter.ts:49 播放器内置支持mp3, aa.mp3已开始播放. console.log src/Adapter.ts:18 playing mp4 file.......bb.mp4 console.log src/Adapter.ts:12 playing vlc file.......cc.vlc Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.002s, estimated 2s Ran all test suites. 复制代码
可以看到绿色的 passed 字样,如果测试没有通过则会有红色的错误提示.
好了,这就完成了 ts 版的设计模式库的搭建,后面我也会继续将设计模式慢慢补充完整,
代码可以参考我的 github
https://github.com/wwmin/ts-design-pattern
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 能用js重写的都会被typescript重写
- 重写equals的详细说明
- SpringSession:请求与响应重写
- 什么时候要重写equals
- 如何重写object虚方法
- 重写Jekyll的Relate功能
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入体验Java Web开发内幕
张孝祥 / 电子工业出版社 / 2007-12 / 55.00元
《深入体验Java Web开发内幕:高级特性》是《深入体验Java Web开发内幕——核心基础》的姊妹篇,Java Web开发的初学者在阅读《深入体验Java Web开发内幕:高级特性》前,应该先学习《深入体验Java Web开发内幕——核心基础》。《深入体验Java Web开发内幕:高级特性》详细阐述了Java Web应用开发中的各种高级特性——Apache文件上传组件的源码分析及应用和编写原理......一起来看看 《深入体验Java Web开发内幕》 这本书的介绍吧!