@muguilin/utils/README.md

Web前端 JavaScript 常用功能、函数、工具库

# JavaScript 常用功能、函数、工具库

[![MIT License](https://img.shields.io/npm/l/utilsjs.svg?style=flat-square)](https://www.npmjs.com/package/mu-tooljs)

> JavaScript 常用功能、函数、工具库，整合在 Web 项目中经常使用的JS函数和方法。

#### 下载安装：

```shell
# 使用npm命令下载安装
$ npm i @muguilin/utils

# 使用yarn命令下载安装
yarn add @muguilin/utils
```

#### 使用方法：

- 通过 JS Module(模块)方式导入使用

  ```html
  <!-- ES6模块导入使用 -->
  <script type="module">
    /**
     * 1、全部引入使用
     **/
    import * as mu from "@muguilin/utils";

    // 在浏览器控制台中打印mu-utiljs的所有方法
    console.log(mu);

    // 深拷贝使用实例
    const oldObj = { key: "value" };
    const newObj = mu.deepCopy(oldObj);

    /**
     * 2、按需引入使用
     **/
    import { deepCopy, debounce, throttle } from "@muguilin/utils";

    // 深拷贝使用实例
    const oldObj = { key: "value" };
    const newObj = deepCopy(oldObj);
  </script>
  ```

- 通过 script 标签以 CDN 的形式引入使用

  ```html
  <!-- 将@muguilin/utils下载后，在html文件中引入本地脚本 -->
  <script src="./js/@muguilin/utils/index.js"></script>
  <script>
    // 在浏览器控制台中打印mu-utiljs的所有方法
    console.log(mu);
  
    // 深拷贝使用实例
    const oldObj = { key: "value" };
    const newObj = mu.deepCopy(oldObj);
  </script>
  ```

#### 支持情况：

- **deepCopy() 深拷贝**

  > 对各种数据类型、对象的进行深度拷贝！

  ```js
  /**
   * @param {Object|Array} par // 拷贝的对象
   * @returns Array or Object
   */

  const oldObj = {x:'xxx',...} || ['x',...];
  const newObj = mu.deepCopy(oldObj); // 返回一个新的对象
  ```

- **debounce() 防抖**

  > 通过延迟执行函数来控制事件在短时间内连续触发时的执行次数，在一段时间内，无论事件触发多少次，只有最后一次会被执行。

  ```js
  /**
   * @param {function} fn // 要进行防抖操作的函数
   * @param {number} delay = 300 // 间隔时间（默认300毫秒）
   * @returns function
   */
  function submitAjaxFn(){
      // 防止重复提交请求
      ...
  };
  mu.debounce(submitAjaxFn, 300);
  ```

- **throttle() 节流**

  > 通过控制在一定的时间间隔内只执行一次函数，来限制事件的触发次数，它确保在一个时间段内，事件处理函数被执行的最大频率为指定的间隔时间。

  ```js
  /**
   * @param {function} fn // 要进行节流操作的函数
   * @param {number} delay = 300 // 间隔时间（默认300毫秒）
   * @returns function
   */
  
  function pageScrollFn(){
      // 限制页面滚动触发次数
      ...
  };
  mu.throttle(pageScrollFn, 500);
  ```

- **getFileSuffix() 获取文件后缀名**

  > 获取文件的后缀名！

  ```js
  /**
   * @param {string} fileName // 要获取带后缀的文件名
   * @returns string
   */
  
  const suffix = mu.getFileSuffix('./upload/xxx.doc');
  console.log(suffix); // doc
  ```

- **getFileUnit() 获取文件大小单位**

  > 主要用于上传文件时（计算文件大小的单位）！

  ```js
  /**
   * @param {string} fileSize // 要进行计算的文件大小
   * @returns string
   */
  
  const unit = mu.getFileUnit(65535);
  console.log(unit); // 64.00KB
  ```

- **query() 获取 url 参数**

  > 主要用于获取 url 参数 如 ?id=666&uid=888！

  ```js
  /**
   * @param {string} key // 要获取url参数名
   * @returns string
   */
  
  // https://www.xxx.com/index.html?id=666
  const id = mu.query('id');
  console.log(id); // 666
  ```

- **getNowDate() 获取当前日期**

  > 获取当前日期：年、月、日

  ```js
  /**
   * @name 获取当前日期
   * @description  返回当前日期：年、月、日、时、分、秒 或返回完整的 年 月 日 时 分 秒
   * @param {string:['YYYY' | 'MM' | 'DD' | hh | mm | ss] par, zh = false }
   * @returns {string}
   */
  
  mu.getNowDate(); // '2020-01-01 12:00:30'
  mu.getNowDate('', true); // '2020年01月01日 12时00分30秒'
  mu.getNowDate('YYYY'); // 2020
  mu.getNowDate('MM'); // 01
  mu.getNowDate('mm'); // 00
  ```

- **uuid() 生成 uuid**

    > 主要用于生成一个唯一的 uuid！

    ```java
    /**
     * @param {string} prefix // uuid 前缀(可选参数)
     * @returns string
     */
    
    const uuid = mu.uuid();
    console.log(uuid); //'ea571ef56a774ae3890694a86be88d55'
    ```

    

- **is() 数据类型判断**

    > 判断是否是指定的数据类型，返回Boolean值

    ```javascript
    /**
     * @name 数据类型判断
     * @description 判断是否是指定的数据类型
     * @param {*} any 
     * @returns Boolean
     */
    console.log('查看相关方法：', mu.is);
    
    mu.is.isArray([]) // true
    mu.is.isObject({}) // true
    mu.is.isNumber(123) // true
    
    mu.is...
    ```

    

- Updating 。。。！