項目介紹

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

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、郊區(qū)網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為郊區(qū)等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

• 源碼地址
• API
• version
• collection

項目規(guī)范

• 函數(shù)使用小駝峰方式命名
• 對象使用大駝峰方式命名
• 項目使用webpack構(gòu)建，支持按需引入
• 支持直接引入編譯前的源文件：less文件、es6文件

安裝

$ npm install @jnlong/eutils

使用

js

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

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

可以運行樣例查看example

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

API

tools

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

log

• 調(diào)用方法：eutils.log(arg1, arg2, arg3, ...);
• 參數(shù)：log(args)，接受多個參數(shù);
• 打印日志，可以通過window.isDebug來全局控制是否打印的開關(guān)，實現(xiàn)只在測試環(huán)境打印日志；
• 為了提高可讀性，在打印時對一個參數(shù)設(shè)置了顏色
  

deepCopy

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

參數(shù)

參數(shù)	類型	必填	說明
data	Object	是	需要執(zhí)行深拷貝的object

返回

參數(shù)	類型	說明
data	Object	執(zhí)行深拷貝后的對象

checkLs

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

toast

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

versionCompare

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

參數(shù)

參數(shù)	類型	必填	說明
v1	String	是	版本號1
v2	String	是	版本號2

返回

參數(shù)	類型	說明
res	Number	v1=v2, 返回0；v1大于v2, 返回1；v1小于v2，返回-1；

date

format

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

參數(shù)

參數(shù)	類型	必填	說明
date	Date	是	需要格式化的日期
format	String	是	格式樣式，例如'YYYY-MM-DD [at] HH:mm:ss'

返回

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

calDuration

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

參數(shù)

參數(shù)	類型	必填	說明
d1	Date	是	日期1
d2	Date	是	日期2

返回

參數(shù)	類型	說明
res	String	返回時間2 比 時間1，間隔的時長，如 '3個月前'、'5小時后'等等

add

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

參數(shù)

參數(shù)	類型	必填	說明
d1	Date	是	日期1
d2	Date	是	日期2

返回

參數(shù)	類型	說明
res	String	時間2 比 時間1，間隔的時長，如 '3個月前'、'5小時后'等等

cookie

get

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

參數(shù)

參數(shù)	類型	必填	說明
name	String	是	cookie的名稱

返回

參數(shù)	類型	說明
res	String	cookie的value

set

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

參數(shù)

參數(shù)	類型	必填	說明
opt	Json	是	json格式，其中days表示失效時間（單位天）

del

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

參數(shù)

參數(shù)	類型	必填	說明
name	String	是	cookie的名稱

urlparse

search

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

參數(shù)

參數(shù)	類型	必填	說明
name	String	是	需要查找的query名稱;
url	String	否	query所在的url，默認(rèn)是location.search;

返回

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

add

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

參數(shù)

參數(shù)	類型	必填	說明
name	String	是	query的名稱;
value	String	是	query的值;
url	String	否	需要添加參數(shù)的url，默認(rèn)是location.search;

返回

參數(shù)	類型	說明
res	String	添加參數(shù)后的url

remove

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

參數(shù)

參數(shù)	類型	必填	說明
name	String	是	需要查找的query名稱;
url	String	否	query所在的url，默認(rèn)是location.search;

返回

參數(shù)	類型	說明
res	String	刪除參數(shù)后的url

replace

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

參數(shù)

參數(shù)	類型	必填	說明
name	String	是	需要查找的query名稱;
newValue	String	是	需要替換的value;
url	String	否	query所在的url，默認(rèn)是location.search;

返回

參數(shù)	類型	說明
res	String	替換參數(shù)后的url

jsonToQuery

將json轉(zhuǎn)換成url格式；
調(diào)用方法：eutils.urlparse.jsonToQuery(obj);

參數(shù)

參數(shù)	類型	必填	說明
obj	JSON	是

返回

參數(shù)	類型	說明
res	String	轉(zhuǎn)換后的url

queryToJson

將url轉(zhuǎn)換成json格式
調(diào)用方法：eutils.urlparse.queryToJson(url);

參數(shù)

參數(shù)	類型	必填	說明
url	String	否	默認(rèn)是location.search;

返回

參數(shù)	類型	說明
res	Json	轉(zhuǎn)換后的json對象

load

為了方便調(diào)用，load目錄的API生成在eutils根目錄

loadCss

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

參數(shù)

參數(shù)	類型	必填	說明
href	String	是	css鏈接
id	String	否	不傳參數(shù)，則不做重復(fù)添加的校驗

loadScript

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

參數(shù)

參數(shù)	類型	必填	說明
src	String	是	script鏈接
cb	Functon	是	資源下載成功的回調(diào)函數(shù)，如果不需要回調(diào)，可以傳null
id	String	否	不傳參數(shù)，則不做重復(fù)添加的校驗

loadImg

(src, cb, id)

參數(shù)

參數(shù)	類型	必填	說明
src	String	是	img鏈接
cb	Functon	是	資源下載成功的回調(diào)函數(shù)，如果不需要回調(diào)，可以傳null
id	String	否	不傳參數(shù)，則不做重復(fù)添加的校驗

type

為了方便調(diào)用，type目錄的API生成在eutils根目錄，調(diào)用方法如：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；
調(diào)用方法：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

根據(jù)ua判斷瀏覽器環(huán)境、版本號；

parse

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

參數(shù)

參數(shù)	類型	必填	說明
ua	String	否	需要校驗的ua，默認(rèn)是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: 背景圖樣式設(shè)置

reset

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

normalize.css

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

參考

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：前端開發(fā)工具集eutils-創(chuàng)新互聯(lián)
新聞來源：http://www.rwnh.cn/article20/dosdjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、云服務(wù)器、建站公司、營銷型網(wǎng)站建設(shè)、虛擬主機、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)