1.0.4 • Published 1 year ago

dazi v1.0.4

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

简介

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

使用

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输出模式(循环/随机/单次)stringcycle/random/oncecycle
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 一下就好了,还得加上,反正多个循环的事吗
1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago