前端常用函数积累

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

hideMobile(mobile:string):string

格式化手机号码

hideMobile('13300002222)
// => 133****2222

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

ArrayToggle(arr:Array<any>,item<any>):Array<any>

对一个数组中的某个元素进行 toggle

initToken,getToken

获取 url 中的 token，适用于 axios 的设置。

cddValidate({rule,message,value}):boolean

对传入的规则和信息进行验证

class NumberTool

static

split

用来分割数字的表示

参数：(value:string,range?:number,separator?:string)

返回值：string

根据输入的值进行格式化
range: 默认3
separator: 默认,
eg:

NumberTool.split(1234.32); //=>1,234.32
NumberTool.split(1234.32, 3, "_"); //=>1_234.32

Duration

用来计算时间内区间的表示，

参数：

durationNum：number

属性：

days
hours
minutes
seconds

方法：

toString

eg:

const d = new Duration(3600*1000*24)

console.log(d.days)//=>1
console.log(d.hours)//=>24
console.log(d.toString())// 1天0时0分0秒

样式

新整理了样式关系

base-config.styl
基础的设置，如颜色尺寸什么的。
theme.styl
风格主题
lib.styl
主要是一些函数
mixins.styl
mixin 的一些样式
reset.styl
浏览器样式重置
index.styl
包含上述所有
libmix.styl
包含上述除了reset.styl和index.styl之外的所有。