摘要：項目介紹該項目整理了前端比較常用的工具集，包括工具和工具當我們新建一個前端項目時，只需要引入這個包，就可以省去很多寫工具的重復工作源碼地址項目規范函數使用小駝峰方式命名對象使用大駝峰方式命名項目使用構建，支持按需引入支持直接引入編譯前的源文

該項目整理了前端比較常用的工具集，包括js工具和css工具；
當我們新建一個前端項目時，只需要引入這個npm包，就可以省去很多寫工具的重復工作；

源碼地址

API

version

collection

函數使用小駝峰方式命名

對象使用大駝峰方式命名

項目使用webpack構建，支持按需引入

支持直接引入編譯前的源文件：less文件、es6文件

$ npm install @jnlong/eutils

    // js引用方法1
    import eutils from "eutils";

    eutils.date.format("2018-9-6", "{y}/{m}/bhbhlbz {h}:{i}:{s}");

    // js引用方法2
    import {type, urlParse, date, log as ulog} from "eutils";
    date.format(new Date(), "YYYY-MM-DD HH:mm:ss.SSS");

    // 按需引入js源文件
    import date as uDate from "eutils/src/js/date"

    // 引入css
    @import "eutils/dist/index.css";

    // 引入less：webpack需要配置less解析
    @import "eutils/src/style/index.less";
    @import "eutils/src/style/index.less";

在 example/main.js中編寫了每一個API的用法，可以打開文件查看。

可以運行樣例查看example

git clone git@github.com:jnlong/eutils.git

cd eutitls

npm install --save-dev

npm run dev

用瀏覽器打開 http://localhost:8088/查看example，也可以同時打開瀏覽器的控制臺查看console信息

為了方便調用，tools目錄的API生成在eutils根目錄，調用方法：eutils.log(), eutils.toast(msg)

調用方法：eutils.log(arg1, arg2, arg3, ...);

參數：log(args)，接受多個參數;

打印日志，可以通過window.isDebug來全局控制是否打印的開關，實現只在測試環境打印日志；

為了提高可讀性，在打印時對一個參數設置了顏色

object深拷貝，使用深拷貝的目的是：避免復制后的對象的更改，傳遞給源對象；
調用方法：eutils.deepCopy(obj);

判斷所在瀏覽器是否支持localStorage;

調用方法：eutils.checkLs();

返回：Boolean

toast彈窗，調用后彈出一個toast；
調用方法：eutils.toast("我是一個toast");

調用方法：eutils.versionCompare(v1, v2);

日期格式化;
調用方法：etuils.date.format(new Date(), "YYYY-MM-DD [at] HH:mm:ss");

計算時間2比時間1，間隔的時長，同時支持之前和之后；如 1年前，3個月前，20天前，5分鐘前，2秒前，5個月后，3小時后；
調用方法：eutils.date.calDuration(d1, d2) ;

(new Date(), unit, count) 對一個日期對象，加上某個單位的數量；比如給一個日期加3天：add(new Date(), "d", 3)
調用方法：eutils.date.calDuration(d1, d2) ;

獲取cookie；
調用方法：eutils.cookie.get(name) ;

添加cookie；
調用方法：eutils.cookie.set({name: "", value: "", days: 3, path: "/"}) ;

刪除cookie；
調用方法：eutils.cookie.del(name) ;

調用方法：eutils.urlparse.search(name, url);

在url上添加參數，并且返回新的url；
調用方法：eutils.urlparse.add(name, value, url);

在url上刪除參數；
調用方法：eutils.urlparse.remove(name, url);

調用方法：eutils.urlparse.replace(name, newValue, url);

將json轉換成url格式；
調用方法：eutils.urlparse.jsonToQuery(obj);

將url轉換成json格式
調用方法：eutils.urlparse.queryToJson(url);

為了方便調用，load目錄的API生成在eutils根目錄

動態加載外部css鏈接，并且通過id校驗來避免重復添加;
調用方法：eutils.loadCss(href, id);

動態加載script，并且通過id校驗來避免重復添加;
調用方法：eutils.loadScript(src, cb, id);

(src, cb, id)

為了方便調用，type目錄的API生成在eutils根目錄，調用方法如：eutils.isSupportWebP()

判斷是否支持webp格式的圖片
返回：Boolean

判斷obj是不是String類型
返回：Boolean

判斷obj是不是Numbe類型
返回：Boolean

判斷obj是不是Arra類型
返回：Boolean

判斷obj是不是Function類型
返回：Boolean

判斷obj是不是Date類型
返回：Boolean

類型判斷：判斷str是否是指定類型，返回Boolean；
調用方法：eutils.checkType(str, type)；
正則校驗的類型: IP、QQ、english、chinese、tel、phone、postal、email、money、url、date
例如：
eutils.checkType("13812560000", "phone"); // 返回 true
etutil.checkType("aaaxxx", "url"); // 返回false

根據ua判斷瀏覽器環境、版本號；

調用方法，eutils.detector.parse(ua)；

返回json，格式如下：

{
    device: {
        name: "iphone",
        version: -1,
        fullVersion: "-1",
        [iphone]: -1
    },
    os: {
        name: "ios",
        version: 6.1,
        fullVersion: "6.1",
        [ios]: 6.1
    },
    browser: {
        name: "chrome":
        version: 26.0,
        fullVersion: "26.0.1410.50",
        mode: 26.0,
        fullMode: "26.0.1410.50",
        compatible: false,
        [chrome]: 26.0
    },
    engine: {
        name: "webkit",
        version: 536.26,
        fullVersion: "536.26",
        mode: 523.26,
        fullMode: "523.26",
        compatible: false,
        [webkit]: 536.26
    }
}

常用樣式

word-nowrap： 文本-強制不換行

word-wrap： 文本-強制換行

ellipsis： 多出部分用省略號表示 , 用于一行

ellipsis2： 多出部分用省略號表示 , 用于兩行

ellipsis3： 多出部分用省略號表示 , 用于三行

flex： flex布局

flex-center: flex布局，水平居中

flex-middle： flex布局，垂直居中

flex-cm： flex布局，垂直、水平都居中

center： 在父元素中，水平、垂直居中；

mask： 遮罩層

bg: 背景圖樣式設置

為了保持各類瀏覽器初始樣式的一致性，執行格式重置；

normalize.css v8.0.1
來源地址：github.com/necolas/normalize.css

工具集utils: https://github.com/cd-dongzi/... （star 190，css js）

工具集outils: https://github.com/proYang/ou... （start 1189 js）