前端開(kāi)發(fā)工具集eutils

項(xiàng)目介紹

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

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括薩爾圖網(wǎng)站建設(shè)、薩爾圖網(wǎng)站制作、薩爾圖網(wǎng)頁(yè)制作以及薩爾圖網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，薩爾圖網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到薩爾圖省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

源碼地址
API
version
collection

前端開(kāi)發(fā)工具集 eutils

項(xiàng)目規(guī)范

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

安裝

$ npm install @jnlong/eutils

使用

js

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

    eutils.date.format('2018-9-6', '{y}/{m}/92mx2dk {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中編寫(xiě)了每一個(gè)API的用法，可以打開(kāi)文件查看。

example

可以運(yùn)行樣例查看example

git clone git@github.com:jnlong/eutils.git
cd eutils
npm install --save-dev
npm run dev
用瀏覽器打開(kāi) http://localhost:8088/查看example，也可以同時(shí)打開(kāi)瀏覽器的控制臺(tái)查看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)，接受多個(gè)參數(shù);
打印日志，可以通過(guò)window.isDebug來(lái)全局控制是否打印的開(kāi)關(guān)，實(shí)現(xiàn)只在測(cè)試環(huán)境打印日志；
為了提高可讀性，在打印時(shí)對(duì)一個(gè)參數(shù)設(shè)置了顏色

deepCopy

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

參數(shù)

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

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

checkLs

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

toast

toast彈窗，調(diào)用后彈出一個(gè)toast；
調(diào)用方法：eutils.toast('我是一個(gè)toast');
前端開(kāi)發(fā)工具集 eutils

versionCompare

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

參數(shù)

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

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

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

calDuration

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

參數(shù)

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

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

add

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

參數(shù)

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

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

cookie

get

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

參數(shù)

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

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

set

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

參數(shù)

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

del

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

參數(shù)

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

urlparse

search

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

參數(shù)

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

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

add

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

參數(shù)

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

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

remove

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

參數(shù)

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

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

replace

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

參數(shù)

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

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

jsonToQuery

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

參數(shù)

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

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

queryToJson

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

參數(shù)

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

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

load

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

loadCss

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

參數(shù)

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

loadScript

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

參數(shù)

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

loadImg

(src, cb, id)

參數(shù)

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

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)；
正則校驗(yàn)的類型: 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)境、版本號(hào)；

parse

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

參數(shù)

參數(shù)	類型	必填	說(shuō)明
ua	String	否	需要校驗(yàn)的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：文本-強(qiáng)制不換行
word-wrap：文本-強(qiáng)制換行
ellipsis：多出部分用省略號(hào)表示 , 用于一行
ellipsis2：多出部分用省略號(hào)表示 , 用于兩行
ellipsis3：多出部分用省略號(hào)表示 , 用于三行
flex： flex布局
flex-center: flex布局，水平居中
flex-middle： flex布局，垂直居中
flex-cm： flex布局，垂直、水平都居中
center：在父元素中，水平、垂直居中；
mask：遮罩層
bg: 背景圖樣式設(shè)置

reset

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

normalize.css

normalize.css v8.0.1
來(lái)源地址：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）

當(dāng)前標(biāo)題：前端開(kāi)發(fā)工具集eutils
轉(zhuǎn)載來(lái)于：http://jinyejixie.com/article42/pdchhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、Google、企業(yè)建站、動(dòng)態(tài)網(wǎng)站、

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

前端開(kāi)發(fā)工具集eutils

項(xiàng)目介紹

項(xiàng)目規(guī)范

安裝

使用

js

style

用法

example

API

tools

log

deepCopy

參數(shù)

返回

checkLs

toast

versionCompare

參數(shù)

返回

date

format

參數(shù)

返回

calDuration

參數(shù)

返回

add

參數(shù)

返回

cookie

get

參數(shù)

返回

set

參數(shù)

del

參數(shù)

urlparse

search

參數(shù)

返回

add

參數(shù)

返回

remove

參數(shù)

返回

replace

參數(shù)

返回

jsonToQuery

參數(shù)

返回

queryToJson

參數(shù)

返回

load

loadCss

參數(shù)

loadScript

參數(shù)

loadImg

參數(shù)

type

isSupportWebP

isString(obj)

isNumber(obj)

isArray(obj)

isFunction(obj)

isDate(obj)

checkType

detector

parse

參數(shù)

返回

css

common

reset