前端開發工具集 eutils

項目介紹

該項目整理了前端比較經常使用的工具集,包括js工具和css工具;
當咱們新建一個前端項目時,只須要引入這個npm包,就能夠省去不少寫工具的重複工做;javascript

項目規範

  • 函數使用小駝峯方式命名
  • 對象使用大駝峯方式命名
  • 項目使用webpack構建,支持按需引入
  • 支持直接引入編譯前的源文件:less文件、es6文件

安裝

$ npm install @jnlong/eutilscss

使用

js

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

    eutils.date.format('2018-9-6', '{y}/{m}/{d} {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'

style

// 引入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

能夠運行樣例查看examplejava

  • git clone git@github.com:jnlong/eutils.git
  • cd eutitls
  • npm install --save-dev
  • npm run dev
  • 用瀏覽器打開 http://localhost:8088/查看example,也能夠同時打開瀏覽器的控制檯查看console信息

API

tools

爲了方便調用,tools目錄的API生成在eutils根目錄,調用方法:eutils.log(), eutils.toast(msg)webpack

log

  • 調用方法:eutils.log(arg1, arg2, arg3, ...);
  • 參數:log(args),接受多個參數;
  • 打印日誌,能夠經過window.isDebug來全局控制是否打印的開關,實現只在測試環境打印日誌;
  • 爲了提升可讀性,在打印時對一個參數設置了顏色

deepCopy

object深拷貝,使用深拷貝的目的是:避免複製後的對象的更改,傳遞給源對象;
調用方法:eutils.deepCopy(obj);ios

參數

參數 類型 必填 說明
data Object 須要執行深拷貝的object

返回

參數 類型 說明
data Object 執行深拷貝後的對象

checkLs

  • 判斷所在瀏覽器是否支持localStorage;
  • 調用方法:eutils.checkLs();
  • 返回:Boolean

toast

toast彈窗,調用後彈出一個toast;
調用方法:eutils.toast('我是一個toast');
git

versionCompare

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

參數

參數 類型 必填 說明
v1 String 版本號1
v2 String 版本號2

返回

參數 類型 說明
res Number v1=v2, 返回0;v1大於v2, 返回1;v1小於v2,返回-1;

date

format

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

參數

參數 類型 必填 說明
date Date 須要格式化的日期
format String 格式樣式,例如'YYYY-MM-DD [at] HH:mm:ss'

返回

參數 類型 說明
res String 返回樣例 '2018-10-15 at 08:06:20'

calDuration

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

參數

參數 類型 必填 說明
d1 Date 日期1
d2 Date 日期2

返回

參數 類型 說明
res String 返回時間2 比 時間1,間隔的時長,如 '3個月前'、'5小時後'等等

add

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

參數

參數 類型 必填 說明
d1 Date 日期1
d2 Date 日期2

返回

參數 類型 說明
res String 時間2 比 時間1,間隔的時長,如 '3個月前'、'5小時後'等等

cookie

get

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

參數

參數 類型 必填 說明
name String cookie的名稱

返回

參數 類型 說明
res String cookie的value

set

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

參數

參數 類型 必填 說明
opt Json json格式,其中days表示失效時間(單位天)

del

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

參數

參數 類型 必填 說明
name String cookie的名稱

urlparse

search

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

參數

參數 類型 必填 說明
name String 須要查找的query名稱;
url String query所在的url,默認是location.search;

返回

參數 類型 說明
res String name在url中對應的value,查找不到則返回空字符串('')

add

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

參數

參數 類型 必填 說明
name String query的名稱;
value String query的值;
url String 須要添加參數的url,默認是location.search;

返回

參數 類型 說明
res String 添加參數後的url

remove

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

參數

參數 類型 必填 說明
name String 須要查找的query名稱;
url String query所在的url,默認是location.search;

返回

參數 類型 說明
res String 刪除參數後的url

replace

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

參數

參數 類型 必填 說明
name String 須要查找的query名稱;
newValue String 須要替換的value;
url String query所在的url,默認是location.search;

返回

參數 類型 說明
res String 替換參數後的url

jsonToQuery

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

參數

參數 類型 必填 說明
obj JSON

返回

參數 類型 說明
res String 轉換後的url

queryToJson

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

參數

參數 類型 必填 說明
url String 默認是location.search;

返回

參數 類型 說明
res Json 轉換後的json對象

load

爲了方便調用,load目錄的API生成在eutils根目錄

loadCss

動態加載外部css連接,而且經過id校驗來避免重複添加;
調用方法:eutils.loadCss(href, id);

參數

參數 類型 必填 說明
href String css連接
id String 不傳參數,則不作重複添加的校驗

loadScript

動態加載script,而且經過id校驗來避免重複添加;
調用方法:eutils.loadScript(src, cb, id);

參數

參數 類型 必填 說明
src String script連接
cb Functon 資源下載成功的回調函數,若是不須要回調,能夠傳null
id String 不傳參數,則不作重複添加的校驗

loadImg

(src, cb, id)

參數

參數 類型 必填 說明
src String img連接
cb Functon 資源下載成功的回調函數,若是不須要回調,能夠傳null
id String 不傳參數,則不作重複添加的校驗

type

爲了方便調用,type目錄的API生成在eutils根目錄,調用方法如:eutils.isSupportWebP()

isSupportWebP

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

isString(obj)

判斷obj是否是String類型
返回:Boolean

isNumber(obj)

判斷obj是否是Numbe類型
返回:Boolean

isArray(obj)

判斷obj是否是Arra類型
返回:Boolean

isFunction(obj)

判斷obj是否是Function類型
返回:Boolean

isDate(obj)

判斷obj是否是Date類型
返回:Boolean

checkType

類型判斷:判斷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

detector

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

parse

調用方法,eutils.detector.parse(ua);

參數

參數 類型 必填 說明
ua String 須要校驗的ua,默認是navigator.userAgent

返回

返回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
    }
}

css

common

經常使用樣式

  • word-nowrap: 文本-強制不換行
  • word-wrap: 文本-強制換行
  • ellipsis: 多出部分用省略號表示 , 用於一行
  • ellipsis2: 多出部分用省略號表示 , 用於兩行
  • ellipsis3: 多出部分用省略號表示 , 用於三行
  • flex: flex佈局
  • flex-center: flex佈局,水平居中
  • flex-middle: flex佈局,垂直居中
  • flex-cm: flex佈局,垂直、水平都居中
  • center: 在父元素中,水平、垂直居中;
  • mask: 遮罩層
  • bg: 背景圖樣式設置

reset

爲了保持各種瀏覽器初始樣式的一致性,執行格式重置;

normalize.css

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

參考

相關文章
相關標籤/搜索