JavaScript plug-in download instructions and introduction of the web front end, NPM, install, save, and require

Web half morning 2022-06-24 07:55:01 阅读数:608

javascriptplug-inplugdownloadinstructions


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 
},
};
copyright:author[Web half morning],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/175/202206240415389256.html