cdd-lib

个人常用库积累

说明

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

路径和引用说明

1. /index.js

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

2. /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

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():Promise 图片压缩方法

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

imageMinByUrl():Promise

压缩图片方法，返回url

样式

新整理了样式关系

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

• theme.styl 风格主题

• lib.styl 主要是一些函数

• mixins.styl mixin 的一些样式

• reset.styl 浏览器样式重置

• index.styl 包含上述所有

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