Dazi NPM | npm.io

简介

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	输出模式（循环/随机/单次）	string	cycle/random/once	cycle
once_backtrack	在单次输出模式下，最后一次输出是否回溯	boolean	-	true
once_showCursor	在单次输出模式下，最后一次输出完后光标是否展示	boolean	-	true
random_first	在随机输出模式下，第一次输出的内容(数字表示 text 配置项为数组的情况下的索引)	string/number	-	-

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

提示：

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

开发趣事

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

打字效果

@everything-registry/sub-chunk-1452

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago