1、 The conversion between flat structure data and tree structure data

1、 Download the installation instructions

npm install mj-tree-structure --save

2、 Function is introduced

This plug-in has two main functions .
Function one ： flat structure The data is transformed into A tree structure The data of , The point is that flat structure The data of must have a field to store its Parent id.
More capable two ： A tree structure The data is transformed into flat structure The data of .

3、 Function method introduction
The method of converting flat structure data to tree structure data

The parameters of the function ：treelization(list = [], parentId = 'parentId', key = 'children')

Parameter name	describe	Whether must
list	data source , Must be an array object	yes
parentId	Parent id, Parent id Must be associated with one of the source data id The values are equal	yes
key	The name of the field where the child data is stored , That is, the child name	yes

The method of converting tree structure data to flat structure data

The parameters of the function ：delayering(arr = [], configure = [], key)

Parameter name	describe	Whether must
arr	data source , Must be an array object	yes
configure	Store data fields , Is to put the fields to be obtained into this array , You must ensure that these fields exist in the source data , Otherwise, throw an exception	yes
key	Child attribute name , If the value passed in does not match in the source data , Then the source data is returned , And add this attribute to the first level of the source data , The value is undefined	yes

4、 Call mode
CDN introduce

<script src="./node_modules/mj-tree-structure/index.js"></script>
<script> // The method of converting flat structure data to tree structure data  console.log(treeStructure.treelization(arr, 'parentId', 'children')); // The method of converting tree structure data to flat structure data  console.log(treeStructure.delayering(arr, configure, 'children')); </script>

vue introduce

import {
 treelization, delayering } from "mj-tree-structure";
// let { treelization, delayering } = require("mj-tree-structure");
export default {

name: "treeStructure",
data() {

return {
};
},
mounted() {

// The method of converting flat structure data to tree structure data 
console.log(treelization(arr, 'parentId', 'children'));
// The method of converting tree structure data to flat structure data 
console.log(delayering(arr, configure, 'children'));
},
methods: {
},
};

2、 Anti shake and throttling

1、 Download the installation command

npm install mj-debounce-throttle --save

2、 Usage mode
2.1、CDN

<div>
<button onclick="onclickDebounce()"> Shake proof </button>
<button onclick="onclickThrottle()"> throttle </button>
</div>
<script src="./node_modules/mj-debounce-throttle/index.js"></script>
<script> // Shake proof  onclickDebounce = debounceThrottle.debounce(function () {
 console.log(" Shake proof "); }, 1000); // throttle  onclickThrottle = debounceThrottle.throttle(function () {
 console.log(" throttle "); }, 1000); </script>

2.2、vue
html

<template>
<div>
<el-button type="primary" @click="clickDebounce"> Shake proof </el-button>
<el-button type="primary" plain @click="clickThrottle"> throttle </el-button>
</div>
</template>

JavaScript

import {
 debounce, throttle } from "mj-debounce-throttle";
export default {

name: "debounceThrottle",
data() {

return {
};
},
methods: {

// Shake proof 
clickDebounce: debounce(function () {

console.log(" Shake proof ");
}, 1000),
// throttle 
clickThrottle: throttle(function () {

console.log(" throttle ");
}, 1000),
},
};

3、 Addition, subtraction, multiplication and division of floating point numbers

Preface

because JavaScript There is a loss of precision in the computation of floating point numbers in this language , So it encapsulates Add, subtract, multiply and divide Four ways , Each method can only pass two parameters , Parameters should be separated by commas .

1、 Download the installation instructions

npm install mj-calculation --save

2、 Methods of exposure

Method name	describe
addition	Add
subtraction	Subtraction
multiplication	Multiplication
division	division

3、 Usage mode
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);
// Usage and CDN equally 
},
};