推薦一個js常用工具函式庫

龔明華發表於2019-02-16
JS函式

etools

常用js函式整理

安裝和使用

  • 使用npm安裝：npm install -s etools

    通過es6模組引入，如import _ from "etools";console.log(_.extend(true,{},{"age":23}));

  • 下載並在頁面引入etools.js

    直接呼叫ETool物件中得方法，如console.log(ETools.extend(true,{},{"age":23}));

  • Git 倉庫地址 https://github.com/MarvenGong…

版本說明

  • 1.2.8 新增datetime下根據身份證號碼獲取年齡的方法getAgeByIDCard
  • 1.2.7 新增datetime下根據出生日期獲取年齡的方法getAgeByBirthday
  • 1.2.5 新增async相關函式用來處理非同步函式常用方法
  • 1.2.3 修正了部分bug，新增array陣列擴充套件，增加Array.filterBy方法
  • 1.2.2 修正了部分bug，新增string下的generateUUID和addNum方法
  • 1.0.9 修正了deparam函式依賴jquery的$.each函式的問題

詳細文件

物件相關

  • ETools.extend(deep,obj1,obj2)

    作用：類似於jquery.extend方法，合併json物件，並將合併後的物件儲存到obj1中作為返回值

    引數：

    1. deep,是否深度複製，設為true，會複製物件中巢狀的物件。
2. obj1,obj2,要合併的物件

案例：`ETools.extend(true,{"name":"zhangsan",gender:"male"},{"age":12})`
        輸出結果`{"name":"zhangsan",gender:"male","age":12}`

說明，我們可以將obj1設為空{}，用這個方法克隆一個物件，解決引用型別賦值的問題

url請求相關

  • ETools.deparam(str)

    將jquery序列化表單之後得到的引數字串轉換成標準的json物件

    str,即要格式化的字串

    ETools.deparam(“aaa=bbb&ccc=ddd”)輸出結果{aaa:bbb,ccc:ddd}

    檢視演示>>

  • ETools.urlParamToObj(url)

    將連線中的get請求引數轉換成json物件

    url:連結

    ETools.deparam("www.baidu.com?aaa=bbb&ccc=ddd")輸出結果{aaa:bbb,ccc:ddd}

事件

  • ETools.stopPropagation(event)

    阻止事件向上冒泡，點選某元素不會觸發父元素的事件

    event:事件物件

    ETools.stopPropagation(event)

非同步函式相關

  • ETools.async.wait(timestamp)

    在非同步函式中等待指定的時間

    timestamp 等待的時間的毫秒數
    async getUserList() {
    await ETools.async.wait(2000)
    }

時間日期相關

  • ETools.datetime.compareDate(starate,endDate)

    比較兩個日期的大小

    日期格式”yyyy-mm-dd”,如果返回值為-1，則前者大於後者，為0兩者相等，為1，後者大於前者

    ETools.datetime.compareDate("2015-12-11","2015-12-12")

  • ETools.datetime.compareTime(startTime,endTime)

    比較兩個時間的大小

    日期格式”yyyy-mm-dd h:mi:s”,如果返回值為-1，則前者大於後者，為0兩者相等，為1，後者大於前者

    ETools.datetime.compareDate("2015-12-11 12:10:00","2015-12-12 12:10:00")

  • ETools.datetime.arriveTimerFormat(s)

    將秒數轉換成對應的多少小時，多少分多少秒（用於倒數計時的顯示）

    s:要計算的秒數

  • ETools.datetime.arriveTimerFormat(52010)->[0, 14, 26, 50, "14:26:50"]
  • ETools.datetime.format(date,formatStr)

    將Date型別的時間轉換成指定格式的字串

    <p>date:日期型別的物件（如：new Data()）</p>formatStr：想要的時間格式如：”yyyy-mm-dd hs 星期w”

    ETools.datetime.Format(new Date(),”yyyy-MM-dd hs 星期w”)->”2015-16-24 15:16:15 星期四”

  • ETools.datetime.parse(timeStr)

    將時間字串轉換成對應的時間戳

    <p>timeStr:時間字串（如：”2015-16-24 15:16:15″）</p>

    ETools.datetime.parse("2015-16-24 15:16:15")->1461482175

  • ETools.datetime.getNewDay(dataStr,addNumber)

    日期加上天數得到新的日期

    dateTemp 需要參加計算的日期，days要新增的天數，返回新的日期，日期格式：YYYY-MM-DD

    引數：dataStr原來的日期（如：“2014-12-1”）

    addNumber要增加或減少的天數，減少就給負數值

    如：ETools.datetime.getNewDay(“2017-12-1”,2) — “2017-12-3”

    ETools.datetime.getNewDay(“2017-12-1”,-2) — “2017-11-29”

  • ETools.datetime.getAgeByBirthday(birthdatStr)

    根據出生日期獲取年齡

    birthdatStr 出生日期標準格式的字串 如：1991-08-20

    ETools.datetime.getAgeByBirthday(“1991-08-20”) — 27

    • ETools.datetime.getAgeByIDCard(idcard)

      根據出生日期獲取年齡 如果傳入的不是標準的身份證則返回false

      idcard 身份證號 如：”*19951208x”

      ETools.datetime.getAgeByIDCard(“*19951208x”) — 23

html格式操作

  • ETools.html.htmlEncode(str)

    把html中的常見符號轉換成特殊符號碼，如”<“轉換成<pre>”&lt;”</pre>

    引數str，要轉換的html程式碼

  • ETools.html.htmlDecode(str)

    把html程式碼轉換成html元素

    引數str，要轉換的html字串

頁面操作

  • ETools.page.addFavorite(url,title)

    將頁面新增到瀏覽器收藏夾

    url:要新增的地址資訊。title:在收藏夾中的名字

    ETools.page.addFavorite(“www.baidu.com”,”百度”)

  • ETools.page.addHome(url)

    將頁面設為瀏覽器的首頁

    url:要新增的地址資訊。

    ETools.page.addFavorite(“www.baidu.com”)

動態載入

  • ETools.loadStyle(styleUrl)

    動態載入樣式表

    styleUrl：要載入的樣式檔案的地址

    ETools.loadStyle(“css/style.css”)

瀏覽器資訊獲取

  • ETools.getExplorerInfo()

    返回瀏覽器的名稱以及版本資訊{browerName:”google”,version:”3.10.101.1″}

字串操作

  • ETools.string.getStrLength(str)

    獲取字串長度，中文字元按兩個長度計算

    str:要計算的字串

    ETools.string.getStrLength(“ilove你”)->7

  • ETools.string.trim(str)

    去掉字串左右的空格

    str:要去空格的字串

    ETools.string.getStrLength(” aaa “)->”aaa”

  • ETools.string.number2String(number)

    引數 number ： 要轉換的數字

    把1,2,3,4….,99999 型別的數字轉換成中文字串

    如：ETools.string.number2String(123) -> “一百二十三”

  • ETools.string.generateUUID()

    生成一個唯一標識的字串（UUID演算法）

  • ETools.string.addNum(number1, number2)

    引數 number1;number2 ： 要相加的兩個數字

    包含浮點數的兩個數相加，解決丟失精度的問題

    如：ETools.string.addNum(1.1， 1.2) -> “2.3” 如果直接執行1.1+1.2會出現等於2.299999999999999999999的情況

表單驗證

  • ETools.vertify.isURL(str)

    驗證url地址

    ETools.vertify.isURL(“www.baidu.com”)->true

  • ETools.vertify.isEmpty(str)

    驗證是否為空

    ETools.vertify.isEmpty(” “)->true

  • ETools.vertify.isDigit(str)

    驗證是否是數字

    ETools.vertify.isDigit(“2.0”)->false

  • ETools.vertify.isTelephone(str)

    驗證固定電話

    ETools.vertify.isTelephone(“023-55813950”)->true

  • ETools.vertify.isMobile(str)

    驗證手機號碼

    ETools.vertify.isMobile(“15696544221”)->true

  • ETools.vertify.isQQ(str)

    驗證QQ號

    ETools.vertify.isQQ(“1634251421”)->true

  • ETools.vertify.isEmail(str)

    驗證郵箱地址

    ETools.vertify.isEmail(“2542152@qq.com”)->true

  • ETools.vertify.isIDCard(str)

    驗證身份證號碼

    ETools.vertify.isIDCard(“500235199008205570”)->true

  • ETools.vertify.isPlusDigit(str)

    驗證是否是無符號正整數

    ETools.vertify.isPlusDigit(“52”)->true

  • ETools.vertify.isChinese(str)

    驗證中文字元

    ETools.vertify.isChinese(“我愛你”)->true

  • ETools.vertify.isDate(str)

    驗證日期

    ETools.vertify.isDate(“2015-12-12”)->true

  • ETools.vertify.isPostalCode(str)

    驗證郵政編碼

    ETools.vertify.isPostalCode(“400521”)->true

  • ETools.vertify.isRegisterUserName(str)

    驗證登入名，只能輸入5-20個以字母開頭、可帶數字、“_”、“.”的字串

    ETools.vertify.isRegisterUserName(“gong163”)->true

  • ETools.vertify.isTrueName(str)

    校驗使用者姓名：只能輸入1-30個以字母開頭的字串

    ETools.vertify.isTrueName(“龔明華”)->true

  • ETools.vertify.isPassword(str)

    校驗密碼：只能輸入6-20個字母、數字、下劃線

    ETools.vertify.isPassword(“gong1632542142”)->true

陣列相關

  • Array.filterBy(key, value)
    從物件陣列中根據物件的key篩選值等於value的物件，如果鍵值對唯一則返回物件，如果不唯一則返回物件陣列。

    key: 物件中的鍵，value: 要篩選的鍵所對應的值

    [{name: `張三`,age: 12},{name: `張三`,age: 33},{name: `lisi`,age: 22}].filterBy(`name`, `張三`) -> [{name: `張三`,age: 12},{name: `張三`,age: 33}];

Cookie操作

  • ETools.cookie.setCookie(name, value, Hours)

    設定Cookie值

    name:cookie的key，value:cookie的value，Hours：Cookie的超時時間

    ETools.cookie.setCookie(“username”, “xiaoming”, 0.5)

  • ETools.cookie.getCookie(name)

    獲取Cookie值

    name:cookie的key

    ETools.cookie.getCookie(“username”)->”xiaoming”

  • ETools.cookie.delCookie(name)

    刪除Cookie

    name:cookie的key

    ETools.cookie.delCookie(“username”)

html格式操作

  • ETools.openWindow(url,windowName,width,height)

    開啟一個彈窗視窗

    url開啟的連結，windowName視窗的title，width視窗寬度，height視窗高度

    ETools.openWindow(“www.baidu.com”,”百度”,500,600)

jquery外掛

  • checkAll()

    表格的行的全選和反全選

    $(".checkAll").checkAll();

    需要給核取方塊繫結checkAll()事件。為其加上data-table屬性，屬性值指向要執行全選的table的id。

    如果有多個核取方塊共同作用於同一個表格，給這些核取方塊加上相同的data-table屬性值即可

相關文章