npm 包 one-base 使用教程

什么是 npm 包 one-base

npm 包 one-base 是一个前端开发常用工具包，集成了常用的 JavaScript 工具函数和一些 DOM 操作方法，并提供了简洁易用的 API。

目前该工具包已支持大部分主流浏览器，并提供了 TypeScript 声明文件，可以在类型检查的同时享受代码提示。

安装和引用

你可以通过以下命令在你的项目中安装 one-base：

npm install one-base

在项目中引用 one-base，可以通过 import 或 require 的方式来使用其中的函数和方法：

import { addClass } from 'one-base'
addClass(dom, 'active')

或者：

const { addClass } = require('one-base')
addClass(dom, 'active')

常用 API 演示

类名操作

addClass

为元素添加 class。

import { addClass } from 'one-base'

const dom = document.getElementById('test')
addClass(dom, 'active')

hasClass

判断元素是否含有指定的 class。

import { hasClass } from 'one-base'

const dom = document.getElementById('test')
if (hasClass(dom, 'active')) {
  console.log('该元素含有 class "active"')
}

removeClass

移除元素指定的 class。

import { removeClass } from 'one-base'

const dom = document.getElementById('test')
removeClass(dom, 'active')

DOM 操作

getStyle

获取元素的计算样式。

import { getStyle } from 'one-base'

const dom = document.getElementById('test')
const width = getStyle(dom, 'width')

setStyle

设置元素的样式。

import { setStyle } from 'one-base'

const dom = document.getElementById('test')
setStyle(dom, {
  width: '200px',
  height: '100px'
})

on

绑定事件。

import { on } from 'one-base'

const dom = document.getElementById('test')
function handleClick() {
  console.log('click')
}
on(dom, 'click', handleClick)

数组操作

unique

去重。

import { unique } from 'one-base'

const arr = [1, 2, 2, 3, 4, 4, 5]
const uniqueArr = unique(arr)

shuffle

洗牌。

import { shuffle } from 'one-base'

const arr = [1, 2, 3, 4, 5]
const shuffledArr = shuffle(arr)

总结

npm 包 one-base 是一个功能丰富，易用性极高的前端开发工具包，提供了多种常用 API 方便开发者使用。在项目中使用该工具包，可以大幅度提升开发效率，减少代码冗余。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c281e8991b448d3918