npm 包 magic.min.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

magic.min.js 是一款基于 JavaScript 的工具库，可以帮助前端开发者快速实现一些常用的效果，例如轮播图、动画特效等。该库支持 AMD、CommonJS 和全局变量三种调用方式，并且无需依赖其他库。

本文将详细介绍 magic.min.js 的使用方法，并且结合实例代码进行演示，希望对前端新手有所启发。

安装

通过 npm 安装 magic.min.js，执行以下命令：

npm install magic.min.js

或者使用 yarn：

yarn add magic.min.js

安装完成后，通过以下代码引入 magic.min.js：

import 'magic.min.js';
// 或者
const magic = require('magic.min.js');
// 或者
<script src="./node_modules/magic.min.js/dist/magic.min.js"></script>

功能列表

magic.min.js 提供了多种实用的功能，如下表所示：

功能	描述
animate	实现 CSS3 动画效果（可用于多个元素）
createCanvas	创建画布，并返回画布对象
createCanvasObject	创建画布对象
each	遍历数组或对象
fadeIn	淡入效果（可用于多个元素）
fadeOut	淡出效果（可用于多个元素）
on	添加事件监听器（可以处理事件委托和多个事件）
removeClass	删除元素的 CSS 类名
scrollTo	滚动到指定的目标位置
toggleClass	切换元素的 CSS 类名
transition	实现 CSS3 过渡效果（可用于多个元素）
addStyleSheet	动态添加样式表
formatDate	格式化日期字符串
remove	移除元素
replaceClassName	替换元素的 CSS 类名
toArray	将类数组对象转换为数组
unique	数组去重
style	元素 CSS 样式的读取和设置方法
sprite	直接使用 SVG 的 sprite 符号
throttle	节流函数（避免频繁执行函数）
debounce	防抖函数（避免频繁执行函数，仅会在最后一次调用时执行一次）
parseNumber	解析数字字符串，并返回其中的数字部分
parseUrl	解析 URL，返回其中的协议、主机、路径和参数等信息

使用示例

animate

-- -------------------- ---- -------
----- ------- - -
  --------- ----- -- ------
  ------- ----------------- -- ----
  ------ -- -- ------
  ----- -------- --- -- -- -- -
    -------------- -- -- --- -- ------- ------- -------------- ------------ -- ------------------------
  --
  --------- -------- -- -
    ---------------------- -----------
  --
  ----- - ----- ----- ---- ---- --
  --- - ----- ---- ---- --- --
--

-----------------------

createCanvas

const canvas = magic.createCanvas(300, 200);
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 100);
document.body.appendChild(canvas);

each

const arr = [1, 2, 3];
magic.each(arr, function (index, value) {
  console.log(index, value);
})

fadeIn

const elements = document.querySelectorAll('.fade-in');
magic.fadeIn(elements, {
  duration: 1000,
  easing: 'easeInOutQuart'
});

fadeOut

const elements = document.querySelectorAll('.fade-out');
magic.fadeOut(elements, {
  duration: 1000,
  easing: 'easeInOutQuart'
});

on

<ul id="list">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

magic.on('#list', 'click', 'a', function (event) {
  event.preventDefault();
  console.log(event.target.textContent);
});

removeClass

const element = document.getElementById('box');
magic.removeClass(element, 'active');

scrollTo

magic.scrollTo(0, 200, {
  duration: 1000,
  easing: 'easeInOutQuart'
});

toggleClass

const element = document.getElementById('box');
magic.toggleClass(element, 'active');

transition

-- -------------------- ---- -------
----- ------- - -
  --------- -----
  ------- -----------------
  ------ --
  ----- -
    -------- --
    ---------- -------------
  --
  --- -
    -------- --
    ---------- -----------
  --
--
--------------------------------------------------- ---------

addStyleSheet

const cssText = `
  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
`;
magic.addStyleSheet(cssText);

formatDate

const date = new Date();
const formattedDate = magic.formatDate(date, 'yyyy-MM-dd');
console.log(formattedDate);

remove

const element = document.getElementById('box');
magic.remove(element);

replaceClassName

const element = document.getElementById('box');
magic.replaceClassName(element, 'old-class', 'new-class');

toArray

const nodeList = document.querySelectorAll('li');
const arr = magic.toArray(nodeList);
console.log(arr);

unique

const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = magic.unique(arr);
console.log(uniqueArr);

style

const element = document.getElementById('box');
console.log(magic.style(element, 'width'));
magic.style(element, 'height', '100px');

sprite

-- -------------------- ---- -------
---- -----------------------------------
  ------- ------------------ ---------- - -- ----
    ----- ------------------- --------------------
  ---------
  ------- ----------------- ---------- - -- ----
    ----- ------------------- -------------
  ---------
------

---- -------------------------- ----------------------------------------
---- ------------------------- ---------------------------------------

throttle

function handleScroll() {
  console.log('handleScroll');
}

window.addEventListener('scroll', magic.throttle(handleScroll, 100));

debounce

function handleInput() {
  console.log('handleInput');
}

const debouncedHandleInput = magic.debounce(handleInput, 300);
document.getElementById('input').addEventListener('input', debouncedHandleInput);

parseNumber

console.log(magic.parseNumber('12px'));
console.log(magic.parseNumber('1.2rem'));

parseUrl

const url = 'https://www.example.com:8080/path/to/resource?key1=value1&key2=value2#fragment';
console.log(magic.parseUrl(url));

总结

通过本文的介绍，我们了解了 magic.min.js 的基本使用方法和功能列表，并且看到了多个实例代码的演示。magic.min.js 能够帮助开发者轻松实现一些常用的效果，提高开发效率。希望本文对前端新手有所帮助，也欢迎各位开发者使用和贡献该库。

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