1、扁平结构数据与树形结构数据之间的转换
1、下载安装指令
npm install mj-tree-structure --save
2、功能介绍
本插件主要有两个功能。
功能一：扁平结构的数据转化成树形结构的数据，关键点在于扁平结构的数据必须有一个字段存储其父级id。
更能二：树形结构的数据转化成扁平结构的数据。
3、函数方法介绍
扁平结构数据转为树形结构数据的方法
函数的参数：
treelization(list = [], parentId = 'parentId', key = 'children')
参数名 描述 是否必须 list数据源，必须是数组对象 是parentId父级id，父级id必须与源数据的某个id值相等是key存放子级数据的字段名称，也就是子级名称 是
树形结构数据转为扁平结构数据的方法
函数的参数：
delayering(arr = [], configure = [], key)
参数名 描述 是否必须 arr数据源，必须是数组对象 是configure存放数据字段，就是把需要获取的字段放到此数组中，必须保证这些字段在源数据中都存在，否则抛出异常 是key子级属性名，如果不传或传入的值在源数据中匹配不上，则返回源数据，并且源数据的第一级添加此属性，值为 undefined是
4、调用方式
CDN引入
<script src="./node_modules/mj-tree-structure/index.js"></script>
<script>
// 扁平结构数据转为树形结构数据的方法
console.log(treeStructure.treelization(arr, 'parentId', 'children'));
// 树形结构数据转为扁平结构数据的方法
console.log(treeStructure.delayering(arr, configure, 'children'));
</script>
vue引入
import {
treelization, delayering } from "mj-tree-structure";
// let { treelization, delayering } = require("mj-tree-structure");
export default {
name: "treeStructure",
data() {
return {
};
},
mounted() {
// 扁平结构数据转为树形结构数据的方法
console.log(treelization(arr, 'parentId', 'children'));
// 树形结构数据转为扁平结构数据的方法
console.log(delayering(arr, configure, 'children'));
},
methods: {
},
};
2、防抖与节流
1、下载安装命令
npm install mj-debounce-throttle --save
2、使用方式
2.1、CDN
<div>
<button onclick="onclickDebounce()">防抖</button>
<button onclick="onclickThrottle()">节流</button>
</div>
<script src="./node_modules/mj-debounce-throttle/index.js"></script>
<script>
// 防抖
onclickDebounce = debounceThrottle.debounce(function () {
console.log("防抖");
}, 1000);
// 节流
onclickThrottle = debounceThrottle.throttle(function () {
console.log("节流");
}, 1000);
</script>
2.2、vue
html
<template>
<div>
<el-button type="primary" @click="clickDebounce">防抖</el-button>
<el-button type="primary" plain @click="clickThrottle">节流</el-button>
</div>
</template>
JavaScript
import {
debounce, throttle } from "mj-debounce-throttle";
export default {
name: "debounceThrottle",
data() {
return {
};
},
methods: {
// 防抖
clickDebounce: debounce(function () {
console.log("防抖");
}, 1000),
// 节流
clickThrottle: throttle(function () {
console.log("节流");
}, 1000),
},
};
3、浮点数的加减乘除
前言
因为
JavaScript这门语言在计算浮点数时存在精度丢失，所以封装了加减乘除四个方法，每个方法只允许传两个参数，参数之间需要用逗号隔开。
1、下载安装指令
npm install mj-calculation --save
2、暴露的方法
方法名 描述 addition 加法 subtraction 减法 multiplication 乘法 division 除法
3、使用方式
CDN
<script src="./node_modules/mj-calculation/index.js"></script>
<script>
console.log('calculation:', calculation.addition(0.1, 0.2));
// 0.3
console.log('calculation:', calculation.subtraction(0.1, 0.2));
// -0.1
console.log('calculation:', calculation.multiplication(0.1, 0.2));
// 0.02
console.log('calculation:', calculation.division(0.1, 0.2));
// 0.5
</script>
vue
import {
addition, subtraction, multiplication, division } from "mj-calculation";
// const calculation = require("mj-calculation");
export default {
name: "App",
data() {
return {
};
},
mounted() {
// console.log("calculation:", calculation);
// calculation: {addition: ƒ, subtraction: ƒ, multiplication: ƒ, division: ƒ}
console.log(addition, subtraction, multiplication, division);
// 使用方式与CDN一样
},
};