cdd-lib

个人常用库积累

说明

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

路径和引用说明

/index.js

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

/dist

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

browser.js，umd供浏览器或者amd,cjs使用。
main.cjs.js， commmonjs模式。
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

方法有

isString
isNumber
isBoolean
isFunction
isNull
isUndefined
isObj
isArray
isDate
isRegExp
isSymbol
isPromise
isSet
isNaN
isFalse
isTrue
isIos
isPc
browserType\IE11|Edge|FF|Opera|Safari|Chrome
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标签
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]

参数：

arr:[obj] 对象数组，需要排序的目标
property:string|[string|{[prope:string]:boolean}] 要按排序的对象属性名称
order:string|boolen 排序的方向，true为从小到大s
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
  get?(url: string, config?: any): Promise
  post?(url: string, data?: anyObj, config?: any): Promise
  put?(url: string, data?: anyObj, config?: any): Promise
  head?(url: string, config?: any): Promise
  options?(url: string, config?: any): Promise
  delete?(url: string, config?: any): Promise
  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 | 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之外的所有。

前端常用函数积累