国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

zhoutao / 849人閱讀

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

項(xiàng)目介紹

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

源碼地址

API

version

collection

項(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}/mcaksga {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中編寫了每一個(gè)API的用法，可以打開(kāi)文件查看。

example

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

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

cd eutitls

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");

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/... （star 190，css js）

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/104364.html

相關(guān)文章

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

    摘要：項(xiàng)目介紹該項(xiàng)目整理了前端比較常用的工具集，包括工具和工具當(dāng)我們新建一個(gè)前端項(xiàng)目時(shí)，只需要引入這個(gè)包，就可以省去很多寫工具的重復(fù)工作源碼地址項(xiàng)目規(guī)范函數(shù)使用小駝峰方式命名對(duì)象使用大駝峰方式命名項(xiàng)目使用構(gòu)建，支持按需引入支持直接引入編譯前的源文 項(xiàng)目介紹 該項(xiàng)目整理了前端比較常用的工具集，包括js工具和css工具；當(dāng)我們新建一個(gè)前端項(xiàng)目時(shí)，只需要引入這個(gè)npm包，就可以省去很多寫工具的重復(fù)...

    asoren 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)者指南（2017）

    摘要：第二部分學(xué)習(xí)前端開(kāi)發(fā)第二部分指出了學(xué)習(xí)成為一個(gè)前端開(kāi)發(fā)者所需的自學(xué)資源和教學(xué)資源譯者注教學(xué)資源包括有講師指導(dǎo)的付費(fèi)課程計(jì)劃學(xué)院和訓(xùn)練營(yíng)。第三部分前端開(kāi)發(fā)工具第三部分簡(jiǎn)要地介紹和指出了一些前端圈內(nèi)的工具。 參與者（排名不分先后）：blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993;...

    kviccn 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)者指南（2017）

    摘要：第二部分學(xué)習(xí)前端開(kāi)發(fā)第二部分指出了學(xué)習(xí)成為一個(gè)前端開(kāi)發(fā)者所需的自學(xué)資源和教學(xué)資源譯者注教學(xué)資源包括有講師指導(dǎo)的付費(fèi)課程計(jì)劃學(xué)院和訓(xùn)練營(yíng)。第三部分前端開(kāi)發(fā)工具第三部分簡(jiǎn)要地介紹和指出了一些前端圈內(nèi)的工具。 參與者（排名不分先后）：blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993;...

    Salamander 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

zhoutao

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<