TypeScript重写设计模式库的搭建

栏目: 后端 · 发布时间: 6年前

内容简介:说明: 这篇文章并不是教大家如何用和如何写设计模式,而是给大家一个参考:如何搭建一个练习的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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

引爆用户增长

引爆用户增长

黄天文 / 机械工业出版社 / 2017-11-1 / 79.00

本书是用户增长领域的开创性著作,是作者在去哪儿、360、百度等知名企业多年用户增长工作的经验总结。宏观层面,从战略高度构建了一套系统的、科学的用户增长方法论;微观层面,从战术执行细节上针对用户增长体系搭建、用户全生命周期运营等总结了大量能引爆用户增长的实操方法和技巧。 不仅有方法论和技巧,而且非常注重实操。对电商、团购、共享经济、互联网金融等4大行业的50余家企业(360、美团、滴滴等)的1......一起来看看 《引爆用户增长》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具