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一样
    },
};