前端经常使用函数积累

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以外的全部。