Skip to content

Latest commit

 

History

History
698 lines (474 loc) · 16.3 KB

README_CN.md

File metadata and controls

698 lines (474 loc) · 16.3 KB

fecmjs

前端常用方法集合

npm download license

特点

  1. 前端常用方法收集集合，方便平时开发（部分方法来自网上）
  2. 模块化开发，方便引用
  3. 支持tree shaking，以便减少打包体积

模块

用法

  • 使用npm方式
npm i fecmjs

// 1. 使用所有模块
import * as Fecmjs from 'fecmjs';
const flag = Fecmjs.isEmail('[email protected]');
console.log(flag); // true
// 2. 当你只需要用部分功能的时候，可以引入部分模块（推荐）
import {isEmail} from 'fecmjs';
const flag = isEmail('[email protected]');
console.log(flag); // true
  • 使用<script></script>方式引入
<script src="https://cdn.xxxx/fecmjs.min.js"></script>
<script>
    var flag = fecmjs.checkEmail('[email protected]');
    console.log(flag); // true
</script>

Date

  • getCurrentTimestamp

    获取当前时间戳

    示例:

    import {getCurrentTimestamp} from 'femcjs';
console.log(getCurrentTimestamp()) // 1730129184412

  • getDateByFewdays

    根据时间，获取该时间的前几天或后几天日期

    参数名 说明 默认值
    fewdays 要获取的距离目标日子的多少天 0
    time 目标时间 new Date().getTime()
    备注：
    1. 当fewdays为正整数，则获取目标日期的后几天
    2. 当fewdays为负整数，则获取目标日期的前几天

    示例:

    // 获取2024-10-28日的前30天
import {getCurrentTimestamp} from 'femcjs';
console.log(getCurrentTimestamp(-30, '2024-10-28')); // 2024-09-28

// 获取2024-10-28日的后30天
console.log(getCurrentTimestamp(30, '2024-10-28')); // 2024-11-27

  • getDateByTimestamp

    根据传入的时间戳获取时间

    参数名 说明 默认值
    timestamp 时间戳
    needHMS 是否需要返回时分秒 false

    示例:

    import {getDateByTimestamp} from 'femcjs';
console.log(getDateByTimestamp('1730129184412')); // 2024-10-28
console.log(getDateByTimestamp('1730129184412', true)); // 2024-10-28 23:26:24

  • getTimestampByDate

    根据具体日期获取时间戳

    参数名 说明 默认值
    time 具体日期。格式与new Date()传入的格式一样 new Date().getTime()
    备注：
    1. 默认返回当前时间的时间戳
    2. 入参形式与new Date()方法相同

    示例:

    import {getTimestampByDate} from 'femcjs';
console.log(getTimestampByDate()); // 1730131646512
console.log(getTimestampByDate('2024-10-29')); // 1730160000000
console.log(getTimestampByDate('2024-10-29 01:30')); // 1730136600000

Dom

  • $

    返回Dom对象

    参数名 说明 默认值
    selectName css选择器
    备注：
    1. 如果有多个Dom，则返回数组
    2. 如果只有一个Dom，则返回单个Dom

  • addClass

    给某个Dom对象增加类名

    参数名 说明 默认值
    selectName css选择器或者是dom对象
    nameList 要添加的类名
    备注：
    1. 想添加多个类名时，nameList可传入数组
    2. 想添加单个类名时，nameList可传入字符串

    示例:

    import {addClass} from 'femcjs';
addClass('#dom', ['name1', 'name2', 'nam3']);

  • getClass

    获取某个Dom对象类名

    参数名 说明 默认值
    selectName css选择器或者是dom对象
    备注：

    返回该对象类名组成的数组

  • removeClass

    删除某个Dom对象一个或多个类名

    参数名 说明 默认值
    selectName css选择器或者是dom对象
    nameList 要删除的类名
    备注：
    1. 想删除多个类名时，nameList可传入数组
    2. 想删除单个类名时，nameList可传入字符串

  • setStyle

    设置某个Dom对象的样式

    参数名 说明 默认值
    selectName css选择器或者是dom对象
    style 要设置的样式
    备注：
    1. 想设置多个样式时，style可传入对象
    2. 想设置单个样式时，style可传入字符串

    示例:

    import {setStyle} from 'femcjs';
setStyle('#dom', {color: 'red', backgroundColor: '#000'}); // 设置多个样式
setStyle('#dom', 'color: red'); // 设置单个样式

  • getDomInfo

    获取某个dom的信息，或者获取某组NodeList的信息

    参数名 说明 默认值
    selectName css选择器或者是dom对象，或者是一组NodeList
    备注：
    1. 如果selectName是一组NodeList，则返回这个NodeList组成的信息数组

    示例:

    import {setStyle} from 'femcjs';
console.log(getDomInfo($('li'))); // [DOMRect, DOMRect]

  • isExceedParentHeight

    判断子元素是否超出父元素高度

    参数名 说明 默认值
    parentSelectName 父元素类名选择器或者是dom对象
    childSelectName 子元素类名选择器或者是dom对象
    备注：

    父元素得设置高度

  • isShowOnVisualArea

    判断某个元素是否出现在可视区

    参数名 说明 默认值
    selectName 元素类名选择器或者是dom对象

  • setPageNoScroll

    设置页面不能滚动

  • restorePageScroll

    恢复页面滚动

Device

  • isAndroid

    当前是不是安卓系统

  • isIos

    当前是不是ios系统

  • isIpad

    当前是不是ipad设备

  • isIphone

    当前是不是iphone设备

  • isMoblie

    当前是否为移动端

  • isPc

    当前是否为pc端

  • isWechat

    当前是否为微信环境

File

  • getFileName

    获取上传的file名字

    参数名 说明 默认值
    file file对象

  • getFileSuffix

    获取上传的file文件后缀

    参数名 说明 默认值
    file file对象

  • getFilePreviewSrc

    获取上传的file预览地址

    参数名 说明 默认值
    file file对象
    备注：
    1. 主要用于预览上传的图片
    2. 注意使用revokeObjectURL方法回收内存

    示例:

    import {getFilePreviewSrc, $} from 'femcjs';
const previewSrc = getFilePreviewSrc(file);
$('#preview_img').src = previewSrc;

  • isFileAudioType

    上传的文件是不是音频类型

    参数名 说明 默认值
    file file对象

  • isFilePicType

    上传的文件是不是图片类型

    参数名 说明 默认值
    file file对象

  • isFileVideoType

    上传的文件是不是视频类型

    参数名 说明 默认值
    file file对象

  • isContentSrtFormat

    内容格式是不是srt文件格式

    参数名 说明 默认值
    textStr 内容文本

Object

  • emptyObj

    当前对象是否没有值

  • isArr

    当前是否为array类型

  • isDate

    当前是否为Date类型

  • isFn

    当前是否为function类型

  • isNull

    当前是否为null

  • isNum

    当前是否为number类型

  • isObj

    当前是否为object类型

  • isStr

    当前是否为string类型

  • isUndefined

    当前是否为Undefined类型

  • isHtmlObj

    当前是否为htmlDom对象

  • isNodeList

    当前是否为NodeList对象

Array

  • chunkArrBySize

    返回根据指定大小分好组的数组

    参数名 说明 默认值
    array 被操作的数组
    size 要指定的大小

    示例:

    import {chunkArrBySize} from 'femcjs';
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const SIZE = 3;
console.log(chunkArrBySize(arr, SIZE)); // [[1,2,3], [4,5,6], [7,8]]

  • removeArrayItem

    删除数组某项

    参数名 说明 默认值
    array 被操作的数组
    item 要删除的项
    newone 是否返回一个新的数组，不改变原数组大小 false
    备注：
    1. item只能是字符串或者数值类型
    2. 如果newone = false；会改变原始数组大小
    3. 如果newone = true；不会改变原始数组大小，返回一个新的目标数组

    示例:

    import {removeArrayItem} from 'femcjs';
const arr = [1, 2, 3, 4, 'hello', 'lee', 7, 8];
console.log(removeArrayItem(arr, 'hello', true)); // [1, 2, 3, 4, 'lee', 7, 8];
console.log(arr); // [1, 2, 3, 4, 'hello', 'lee', 7, 8];

Storage

  • getLocalStorage

    获取本地储存某个值

    参数名 说明 默认值
    key 要获取的key值
    备注：
    1. 如果获取的key值是对象，则直接返回key值对应的对象
    2. 否则返回key值对应的字符串

    示例:

    // 如果localStorage存储了info: {"name":"lee","age":29}, name: test
import {getLocalStorage} from 'femcjs';
console.log(getLocalStorage(info)); // {name: lee, age} 对象
console.log(getLocalStorage(name)); // test 字符串

  • setLocalStorage

    设置本地储存某个值

    参数名 说明 默认值
    key 要设置的key值
    val 要设置的key对应的值
    备注：

    val可以为对象，也可以为字符串

    示例:

    import {setLocalStorage} from 'femcjs';
setLocalStorage('info', {name: 'lee', age: 29}); // info ->  {"name":"lee","age":29}

  • removeLocalStorage

    删除本地储存某个或多个值

    参数名 说明 默认值
    key 要删除的key值
    备注：
    1. 如果key为数组，则可以删除多个对应的key值
    2. 如果key为字符串，则删除单个值

    示例:

    import {removeLocalStorage} from 'femcjs';
console.log(removeLocalStorage(['info', 'test'])); // 将删除info,test对应的值

  • clearLocalStorage

    清除本地存储

    示例:

    import {clearLocalStorage} from 'femcjs';
console.log(clearLocalStorage());

Url

  • getUrlValue

    获取url的参数的值

    参数名 说明 默认值
    key 要获取的值的key ''
    url 要获取的url链接 window.location.href
    备注：
    1. 当key为空，会返回url所有的参数对应值组成的对象
    2. 当key为某个值，则返回url这个key的值

    示例:

    import {getUrlValue} from 'femcjs';
const url = 'http://localhost:5501/test/?name=lee&age=29'
console.log(getUrlValue('', url)); // {name: 'lmc', age: 29}
console.log(getUrlValue('name', url)); // 'lmc'

  • setUrlWithNorefresh

    设置url，并且不刷新页面

    参数名 说明 默认值
    value 要设置的值 {}

    示例:

    import {setUrlWithNorefresh} from 'femcjs';
console.log(setUrlWithNorefresh({name: 'lmc', age: 29}); // http://localhost:5501/test/?name=lmc&age=29

validate

  • containCN

    是否包含中文

    参数名 说明 默认值
    textStr 内容文本
    备注：

    只要有中文，就返回true

  • containEN

    是否包含英文

    参数名 说明 默认值
    textStr 内容文本
    备注：

    只要有英文，就返回true

  • containCNSpecialChar

    是否包含中文特殊字符

    参数名 说明 默认值
    textStr 内容文本
    备注：

    只要有中文特殊字符，就返回true

  • containENSpecialChar

    是否包含英文特殊字符

    参数名 说明 默认值
    textStr 内容文本
    备注：

    只要有英文特殊字符，就返回true

  • isAllCN

    是否全是中文

    参数名 说明 默认值
    textStr 内容文本
    备注：

    是否为纯中文（含中文特殊字符和数字；不含英文和特殊英文字符）

  • isAllEN

    是否全是英文

    参数名 说明 默认值
    textStr 内容文本
    备注：

    是否纯英文 （含英文特殊字符和数字；不含英文和特殊英文字符）

  • isEmail

    是不是邮件格式

    参数名 说明 默认值
    email 邮件

  • isPhoneNum

    是不是手机号格式

    参数名 说明 默认值
    phoneNumber 手机号码
    备注：

    验证中国大陆手机号

  • isIntlPhone

    是不是国际手机号码

    参数名 说明 默认值
    phoneNumber 国际手机号码

Format

  • formatFileSize

    格式化文件大小

    参数名 说明 默认值
    file 文件对象 {}

    示例:

    import {formatFileSize} from 'femcjs';
console.log(formatFileSize(file)); // 1.37KB

  • formatVideoDuration

    格式化视频时长

    参数名 说明 默认值
    totalSeconds 视频时长 0

    示例:

    import {formatVideoDuration} from 'femcjs';
console.log(formatVideoDuration(3600)); // 01:00:00

Animation

  • vue动画

    支持的动画有：

    • fade-in：淡入
    • fade-right-to-left：从右往左淡入
    • fade-top-to-bottom：从上往下淡入
    • fade-zoom-in：放大淡入

    示例:

    <Transition name="fade-right-to-left">
    <components v-if="show" />
</Transition>

  • css动画

    备注：

    具体可查看dist/styles/css-ani.css

    示例:

    <!-- 该元素将会延迟500ms，以750ms，进行循环闪烁动画 -->
<div class="shine time750 delay500"></div>