Giter VIP home page Giter VIP logo

ndx-npm-private's Introduction

ndx-npm-private

一、说明和用法

PS:接下来每一个版本的md文档都会更新!!!!

[TOC]

1、本包连接GitHub

更新前请先上传到GitHub:https://github.com/ndx2527/ndx-npm-private.git

2、上传

# 版本更新
npm version patch

# 上传到npm
npm publish

3、使用方法

1)安装模块

npm i ndx-npm-private

2)按需导入模块

import { deepClone } from "ndx-npm-private";

const obj1 = {
  name: "tom",
  age: 20,
  arr: [1, 2, 3, 4],
};

// 深度拷贝 obj1 ,使用的是自己封装的方法
const obj2 = deepClone(obj1);

obj2.name = "ndx";
console.log(obj1);
console.log(obj2);

4、扩展:修改源

查看源:npm config get registry

配置淘宝镜像源:npm config set registry https://registry.npm.taobao.org

配置官方源: npm config set registry https://registry.npmjs.org/

二、总览

  • 深度拷贝:deepClone
  • 计算时差:timeDiffer
  • 时间戳转日期:formatDate
  • 获取设备类型:getDeviceType
  • 防抖:debounce
  • 节流:throttle
  • 金额转大写:digitUppercase
  • 重置一个对象的所有key的值:resetObject
  • URL解析:parseQueryString

三、详情

1、deepClone-深度克隆

说明:深度克隆一个对象或者数组。

参数:传入参数为一个对象/数组,返回一个深度克隆后的对象。

示例:

const obj1 = {
  name: 'tom',
  age: 20,
  arr: [1, 2, 3, 4]
}
const obj2 = dealDate.deepClone(obj); // 返回深度克隆后的对象

2、timeDiffer-计算时差

说明:时间差值显为易读形式。

​ 1.小于60s,显示刚刚

​ 2.大于60s,小于1个小时,?分钟前

​ 3.大于1小时,小于24小时,?小时前

​ 4.大于24小时,小于一个月,?天前

​ 5.大于一个月,小于12个月,?个月前

​ 6.大于12个月,?年前

参数:第一个参数为过去时间,第二个参数为之后时间(不传默认为当前时间),参数是时间戳!

示例:

var t1 = new Date("2020-10-11 15:21:57");
var t2 = new Date(); // 获取当前时间
console.log(timediffer(t1, t2));

3、formatDate处理日期格式

说明:传入时间戳,可以转换成你想要的格式

用法:

/**
 * @description: 时间戳转日期对象 默认当前日期
 * @param {number} date 时间戳
 * @param {string} pattern 时间格式
 * @return {*}
 */
var time = new Date()
console.log(formatDate(time , 'yyyy-MM-dd hh:mm:ss')); // 2022-04-26 17:45:30
console.log(formatDate(time , 'yyyy-M-dd hh:mm')); // 2022-4-26 17:45

4、获取设备类型

说明:返回bool值,true移动端;反之PC端

/**
 * @description: 获取设备类型
 * @return { boolean }  facility:true移动端;反之PC端
 * @return {*}
 */
console.log(getDeviceType()); // true移动端;反之PC端

5、防抖

说明:一定时间内重复触发,仅执行最后一次操作,例如(搜索框)

/**
 * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数
 * @description: 防抖
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @return null
 */

// 使用示例
<template>
  <div>
    <el-button @click="printTest">按钮</el-button>
  </div>
</template>

<script setup>
import { debounce } from "ndx-npm-private";

const printTest = () => {
  console.log('1');
  debounce(() => {
    console.log("一定时间内,只有最后一次操作,再过wait毫秒后才执行函数");
  }, 1000);
};
</script>

6、节流

说明:一定时间内多次触发仅执行一次。例如:抢票按钮

/**
 * 节流原理:在一定时间内,只能触发一次
 * @description: 节流
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @return null
 */
 // 使用示例见防抖

ndx-npm-private's People

Contributors

ndx0612 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.