前端常用函数积累

2024年3月30日 139次阅读 来源: farmerz

cdd-lib

个人常用库积累

说明

本库是完全的es2015模块语法，也使用了ts源码。所以使用commonjs方式导致不可用。

路径和引用说明

  1. /index.js

根路径的index.js文件为node_modules对外输出的文件，是es6模块方式。

  1. /dist

在dist文件夹里有集成的es6,cjs,umd,borowser方式的文件。

  1. browser.js，umd供浏览器或者amd,cjs使用。
  2. main.cjs.js， commmonjs模式。
  3. module.es.js， es6模式。

安装

npm i cdd-lib

Time

  • 类
  • 实例属性与方法
  • constructor
interface $time {
  duration?: number
  everyDuration?: null | Function
  dateSeparator?: string
  timeSeparator?: string
  final?: null | Function
  finally?: null | Function
  times?: number
  date:any
}
declare function _Time(): $time;//构造函数
declare interface $time {//time实例
  isRuning: boolean//实例现在的运行状态
  hour: number//小时
  minutes: number//分钟
  seconds: number//秒
  year: number//年
  times:numer//执行timeout时倒数执行的次数
  month: number//月
  day: number//日期
  stamp:number//创建是的时间戳
  duration:number//间隔毫秒数默认1000
  dateSeparator: string//日期分隔符默认-
  timeSeparator: string//时间分隔符默认:
  date: string//日期
  time: string//时间
  ap: string//上午还是下午AM PM
  start(): any//开始循环执行
  stop(): any//结束循环执行
  everyDuration?(parms?: any): any//每次执行的函数
  timeout.timeout():any//倒数执行的函数
  final():cb倒数执行完时执行的回到函数
}

limitText

限制一段文字的长短并添加符号，类似String的padEnd，但是该方法是限制和替代而不是补全。

用法：

limitText(str:string,limit:10,rep:’.’)

eg:

let str = "你好啊，想要去那里，我想去一个好地方"
limitText(str)//=>你好啊，想要去...

htmlEscap

对输入的文字进行转义防止注入攻击的函数

deepClone

深层复制一个对象
虽然现在已经有了Object.assign这样的原生方法，但是有些地方还是要用到自己写的。

用法：

deepClone(obj|array)//=>新的 obj|array

该方法不会拷贝原型的属性。

addThrottle

对元素的某个对象的事件添加节流阀
使用方法:

addThrottle({el, event, handler, model?=0, threshold?=250})

参数：

  • el：element对象
  • event：事件名称
  • handler：监听器处理函数默认参数为e即事件对象
  • model: 节流阀的模式，0为间隔模式（每次停止时再执行），1为频率模式（比如threshold为250,则每秒发生4次。）
  • threshold?：可选的临界值，数字，默认是250（目前是指定事件发生的间隔）

如果移除这个监听的话直接使用元素对象的removeEvnetListener(event:string)就行了。

checkType

方法有

  1. isString
  2. isNumber
  3. isBoolean
  4. isFunction
  5. isNull
  6. isUndefined
  7. isObj
  8. isArray
  9. isDate
  10. isRegExp
  11. isSymbol
  12. isPromise
  13. isSet
  14. isNaN
  15. isFalse
  16. isTrue
  17. isIos
  18. isPc
  19. browserType\IE11|Edge|FF|Opera|Safari|Chrome

  20. CheckStr(str,type)常用验证
    type

    • phone 手机
    • tel 座机
    • card 身份证号
    • pwd 密码/字母开头长度6-18，只能包含字母数字下划线
    • postal 邮政
    • email 邮箱
    • QQ qq号
    • URL 网址
    • money 小数点两位金额
    • IP ip地址
    • date 日期
    • english 英文
    • chinese 中文
    • lower 小写
    • upper 大写
    • HTML html标签
  21. isCardID(sid) 严格身份证

parseTime

解析2018-12-12 12:12:12或者2018-12-12此类的文字为Date对象。

sortObj/sortObjArray

sortObj(旧)仍然可用，sorObjArray(新名字)。

sortObj/sortObjArray(
  arr:[obj], 
  property:string|[string|{[prope:string]:boolean}], 
  order:boolean = true, 
  isPromise:boolean=false
  ):[objSorted]

参数：

  1. arr:[obj] 对象数组，需要排序的目标
  2. property:string|[string|{[prope:string]:boolean}] 要按排序的对象属性名称
  3. order:string|boolen 排序的方向，true为从小到大s
  4. isPromise:boolean = false 是否使用Promise模式，默认为false，注意，使用该参数时前面的order必须传入。

使用场景

  • 1 想要排列一个对象数组，条件是根据这些对象中的某个属性。
var seed = [
  {name:'aaac',age: 12 },
  {name:'ecc',age: 12 },
  {name:'bccd',age: 12 },
  {name:'wds',age: 12 },
  {name:'esds',age: 12 },
  {name:'esds',age: 9},
];
// 根据名字从小到da排序
sortObjArrary(seed,'name')
// 根据名字从大到小排序
sortObjArrary(seed,'name',false)
  • 2 还是排序上面的数据，要求是，根据名字排序，如果名字相同则根据年龄排序
// 名字相同时根据年龄从小到大排序
sortObjArray(seed,['name','age'])
// 或者
sortObjArray(seed,['name',{age:true}])
// 名字相同时根据年龄从大到小排序
sortObjArray(seed,['name',{age:false}])

返回排序后的新的数组

对于对象数组根据其属性进行排序的方法

download(url:string)

下载文件

createDom(template:string)

创建dom

createRandowWrods(length:number=15)

生成指定长度的文字，最低为5个

clipFileExts(filename:string,keepDot:boolean=false)

截取文件的后缀名
filename:文件名字
keepDot:是否保持点’.’，默认为false

wxHttp

小程序请求，结合promise使用axios风格

interface $request {
  (url: string | anyObj | $reqSet, config?: anyObj): Promise<any>
  get?(url: string, config?: any): Promise<any>
  post?(url: string, data?: anyObj, config?: any): Promise<any>
  put?(url: string, data?: anyObj, config?: any): Promise<any>
  head?(url: string, config?: any): Promise<any>
  options?(url: string, config?: any): Promise<any>
  delete?(url: string, config?: any): Promise<any>
  interceptors?: {
    request: { use(a: $interRequest, b?: $interRequesError): any },
    response: { use(handle: $interResponse): any }
  }
  [name: string]: any
}

wxStore2

小程序中store2风格的本地存储

interface wxStore2 {
  (key?: any, data?: any): Promise<any> | void
  get(key: string): any
  set(key: string, data: any): any
  transact(key: string, data: Function): any
  clear(): void
  has(key: string): boolean
  remove(key: string): any
  getAll(): anyObj
  add(key: string, data: any): any
  keys(): any
  size(): number
  clearAll(): void
  isPromise: boolean
  nameSpace: string | undefined
  create(): $store2
}

camelToUnderline 驼峰转下划线

camelToUnderline(str:string,sperator?='_'):string

underlineToCamel 下划线转驼峰

underlineToCamel(str:string):string

样式

新整理了样式关系

  • base-config.styl

基础的设置，如颜色尺寸什么的。

  • theme.styl

风格主题

  • lib.styl

主要是一些函数

  • mixins.styl

mixin的一些样式

  • reset.styl

浏览器样式重置

  • index.styl

包含上述所有

  • libmix.styl

包含上述除了reset.styl和index.styl之外的所有。

    原文作者：farmerz
    原文地址: https://segmentfault.com/a/1190000016372934
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞