# dazi

**Repository Path**: xiangheng08/dazi

## Basic Information

- **Project Name**: dazi
- **Description**: 使用 js 实现打字效果
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-01
- **Last Updated**: 2023-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简介

dazi.js 顾名思义一个实现打字效果的包，包提供三种导入方式全局导入、ES6 的 import 和 CommonJS 的 require。

### 文件说明

在 lib 目录下有6个文件分别对应着全局、ES6 和 CommonJS 导入方式的文件

其中文件名带有

- global：代表全局导入，直接在 window 对象的 _dazi 属性中，可直接通过script标签导入
- es：代表遵循了 ES6 的暴露方式，可通过 import 导入
- cjs：代表遵循了 CommonJS 的暴露方式，可通过 require导入

> ES6 和 CommonJS 的暴露方式均为默认暴露
>
> 文件名带有 min 就代表经过了压缩，代码的体积会更小
>
> 默认导入的是 es.min.js

## 使用

```js
import dazi from 'dazi';

const dom = document.getElementById('text');

// 第一个参数为要执行打字的效果的dom
// 第二个参数为配置的项
new dazi(dom, {
    text:[
        'hello JavaScript!',
        'hello world!'
    ]
})
```

### 配置项：

| 参数              | 说明                                                         | 类型          | 可选值            | 默认值 |
| ----------------- | ------------------------------------------------------------ | ------------- | ----------------- | ------ |
| text              | 要展示的文字                                                 | string/array  | -                 | -      |
| showCursor        | 是否展示光标                                                 | boolean       | -                 | true   |
| cursorFlickerTime | 光标闪烁周期时间                                             | number        | -                 | 1000   |
| backtrack         | 是否回溯                                                     | boolean       | -                 | true   |
| speed             | 打字速度                                                     | number        | -                 | 100    |
| pauseTime         | 停顿时间                                                     | number        | -                 | 3000   |
| deleteSpeed       | 文字删除速度                                                 | number        | -                 | 30     |
| mode              | 输出模式（循环/随机/单次）                                   | string        | cycle/random/once | cycle  |
| once_backtrack    | 在单次输出模式下，最后一次输出是否回溯                       | boolean       | -                 | true   |
| once_showCursor   | 在单次输出模式下，最后一次输出完后光标是否展示               | boolean       | -                 | true   |
| random_first      | 在随机输出模式下，第一次输出的内容(数字表示 text 配置项为数组的情况下的索引) | string/number | -                 | -      |

> 注意：mode 为 random 时，需要 text 为数组且长度大于2

## 提示：

**此包刚写出来，没有在各个浏览器和各个版本的浏览测试过，请谨慎使用。**

## 开发趣事

1. 刚开始本来想叫 typing.js 的，结果我去 npm 一搜有已经有了，去看了他个那个演示页面，他那个怎么说呢，属实nb！，真的，后来一想这要是一搜我这个和他的同时出来，一对比还是有点那啥，所以我果断改名。
2. 我想应该会有人想为什么我会还弄个使用 CommonJS 暴露的文件，这个呢是因为我写了一个自动化打包的文件，本来没想加上的，后来一想，万一以后用得到呢，到时候要用了，copy 一下就好了，还得加上，反正多个循环的事吗