介绍
j-echo 是一个轻量级的前端库,它提供了一个能够简单地输出信息的函数,可用于开发过程中的调试和信息输出。它能够在控制台输出信息,并且支持将信息输出到 html 页面上,十分方便。
安装
使用 npm 安装 j-echo:
npm install j-echo --save
使用
安装完毕后,在需要使用的地方引入库:
// ES6 方式 import echo from 'j-echo'; // CommonJS 方式 const echo = require('j-echo');
API
j-echo 提供了两个 API:
echo(msg: string | object, toEl?: HTMLElement, attrs?: Object)
输出信息并打印在控制台上。如果 toEl
参数指定为 html 元素,信息将会被输出到该元素上。
msg: string | object
- 需要输出的信息,可以是字符串或者对象。toEl?: HTMLElement
- 指定输出信息的 html 元素,如果没有,则信息只会被打印在控制台上。attrs?: Object
- 传入的 html 元素属性,比如 class、id 等。
例如:
echo('Hello, World'); // 输出 Hello, World 并打印到控制台上
set(options: Object)
设置 j-echo 输出的默认配置。
options: Object
- 配置对象。
默认配置如下:
{ outputToConsole: true, toEl: null, attrs: {}, stringifyObject: true }
属性:
outputToConsole: boolean
- 是否输出到控制台,默认为 true。toEl: HTMLElement | null
- 指定输出信息的 html 元素,默认为 null。attrs: Object
- 传入的 html 元素属性,默认为 {}。stringifyObject: boolean
- 是否将输出的对象转换为 JSON 字符串,默认为 true。
例如:
//设置默认输出到 id 是 app 的元素 echo.set({ toEl: document.getElementById('app') } // 输出到控制台和指定元素 echo('Hello, World', document.getElementById('app'));
示例代码
输出信息到控制台
import echo from 'j-echo'; echo('Hello, World');
输出信息到指定的 html 元素
<div id="app"></div>
import echo from 'j-echo'; echo.set({ toEl: document.getElementById('app') }); echo('Hello, World');
属性配置
<div id="app"></div>
-- -------------------- ---- ------- ------ ---- ---- --------- ---------- ----- ------------------------------- ------ - ------ ---------- - --- ------------ --------展开代码
输出对象
import echo from 'j-echo'; echo.set({ stringifyObject: false }); const obj = { a: 1, b: '2' }; echo(obj);
以上代码将输出 { a: 1, b: '2' }
。如果用默认配置,将输出 {"a":1, "b":"2"}
。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005601981e8991b448de422