前端常用函数积累

farmerz

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


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.stylindex.styl之外的所有。
阅读 1.5K

前端这两年(2016~)
近几年来前端的变化记录

可可西里,可可西里,我只是想去看一看。

1.2k 声望
53 粉丝
0 条评论

可可西里,可可西里,我只是想去看一看。

1.2k 声望
53 粉丝
宣传栏