cdd-lib

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,item):Array

对一个数组中的某个元素进行 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秒

cddStore 本地 localStorage 时效存储

在浏览器 localStorage 中存储具有时效的数据。

import { CddStore } from "cdd-lib";

let store = new CddStore([
  { key: "name", value: "cdd" }, //默认是半天
  { key: "age", value: 23, hours: 4 }, //设置时效是4个小时
  { key: "name2", value: "今晚打老虎", days: 0.8, hours: 4 }, //设置时效是0.8天加上4个小时
  {
    key: "session",
    value: "sdfasf",
    hours: 0.5,
    refresh() {
      return "dfasdfas";
    },
  }, //设置失效是30分钟，过时后可以使用refresh自动获取
]);

// 使用数据
assert(store.name.value==='cdd')
assert(store.age.value===23)

copyIt(message:string):Promise<void|{errMsg:string}> 浏览器环境复制文字

如果返回错误则表示复制失败，否则成功。

imageMin() 图片压缩方法

用户更改图片分辨率，或者压缩图片质量。

样式

新整理了样式关系

• base-config.styl 基础的设置，如颜色尺寸什么的。

• theme.styl 风格主题

• lib.styl 主要是一些函数

• mixins.styl mixin 的一些样式

• reset.styl 浏览器样式重置

• index.styl 包含上述所有

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