web前端之JavaScript的插件下载指令及介绍npminstallsaverequire

Posted 2022-06-25 web半晨

目录

• 1、扁平结构数据与树形结构数据之间的转换
• 2、防抖与节流
• 3、浮点数的加减乘除

---

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