前端經常使用函數積累

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