前端开发工具集 eutils

项目介绍

该项目整理了前端比较常用的工具集,包括js工具和css工具;
当我们新建一个前端项目时,只需要引入这个npm包,就可以省去很多写工具的重复工作;

项目规范

  • 函数使用小驼峰方式命名
  • 对象使用大驼峰方式命名
  • 项目使用webpack构建,支持按需引入
  • 支持直接引入编译前的源文件:less文件、es6文件

安装

$ npm install @jnlong/eutils

使用

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

可以运行样例查看example

  • git clone [email protected]:jnlong/eutils.git
  • cd eutils
  • npm install --save-dev
  • npm run dev
  • 用浏览器打开 http://localhost:8088/查看example,也可以同时打开浏览器的控制台查看console信息

API

tools

为了方便调用,tools目录的API生成在eutils根目录,调用方法:eutils.log(), eutils.toast(msg)

log

  • 调用方法:eutils.log(arg1, arg2, arg3, ...);
  • 参数:log(args),接受多个参数;
  • 打印日志,可以通过window.isDebug来全局控制是否打印的开关,实现只在测试环境打印日志;
  • 为了提高可读性,在打印时对一个参数设置了颜色

deepCopy

object深拷贝,使用深拷贝的目的是:避免复制后的对象的更改,传递给源对象;
调用方法:eutils.deepCopy(obj);

参数

参数 类型 必填 说明
data Object 需要执行深拷贝的object

返回

参数 类型 说明
data Object 执行深拷贝后的对象

checkLs

  • 判断所在浏览器是否支持localStorage;
  • 调用方法:eutils.checkLs();
  • 返回:Boolean

toast

toast弹窗,调用后弹出一个toast;
调用方法:eutils.toast(‘我是一个toast‘);

versionCompare

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

参数

参数 类型 必填 说明
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‘);

参数

参数 类型 必填 说明
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) ;

参数

参数 类型 必填 说明
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

参考

原文地址:https://blog.51cto.com/14375721/2404245

时间: 2024-10-10 14:29:37

前端开发工具集 eutils的相关文章

Visual Studio 2015和ASP.NET 5中可用的前端开发工具集

最近微软发布了一本白皮书,谈到了一些可以和Visual Studio 2015和ASP.NET 5配合使用的JS/前端Web开发工具(比如:函数库.任务执行器.框架等). 由于现在前端开发的生态系统在快速增长,也变得越来越复杂和庞大.所以,微软特意发布了这么一个白皮书来讲解一些可以集成到VS 2015用于ASP.NET 5开发的前端工具库.这些前端工具库,都能很好的被VS2015所支持,比如提供智能提示等内置特性. 每个涉及的工具库都给出了入门介绍.基本概念,以及在VS和ASP.NET中的用法.

常用前端开发工具合集

1.Firebug http://getfirebug.com/最流行的前端开发工具 2.HttpWatch http://www.httpwatch.com/集成在IE和Firefox上的监听HTTP和HTTPS的工具 3.Fiddler http://www.fiddler2.com/fiddler2/Fiddler是一个记录你电脑和网络之间所有HTTP(S)请求的网络调试代理 4.HttpFox https://addons.mozilla.org/eu/firefox/addon/664

五个值得尝试的前端开发工具

在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加. 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案.同时,Javascript的应用也越来越常广泛,而且它还能和Node.JS在后端协同工作,快速搭建易于扩展的网络应用.实际上,为了应对前端开发复杂度所带来的挑战,开发人员创建了许多工具来简化开发流程.从测试框架,到分析工具,前端开发工具已经非常成熟了,正是得益于这些有用的工具才

WEB前端开发工具总结

前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. webstorm针对前端er. 他们的详细对比: http://www.36ria

对网站前端开发工具和浏览器的介绍

Web 前端开发工具 1.NotePad ① 占用内存小,微软自带,免安装. ② 不方便编辑代码,一次只能打开一个文件. ③ 不可扩展插件,写代码效率低. ④ 对于代码缩进不太友好. ⑤ 通常来说支持基本的纯文字编辑工作.格式不是很好控制. 2.EditPlus ① 小巧但功能强大,占用内存小. ② 颜色标记智能代码提示以及高亮显示. ③ 同时编辑多个文件 ④ 可支持各类丰富的插件. ⑤ 支持代码高亮显示,并且支持多种语言. ⑥ NotePad开源且跨平台. ⑦ 方便编辑代码.可以同时编辑多个文

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

一个前端开发工具

最近一直在琢磨着做一个前端开发工具,自身需求如下: 1. 开源 2. 基于Jquery和bootstrap 3. 所见即所得 4. 良好的扩展性 5. WinForm程序 昨天搭了一个框架出来,发现比我想像的工作量还要大一些. 本来我个人的人生哲学是“知难而退”,可是又想想出来混了这么多年,用了人家多少代码,是该还的时候了,尽早的事儿. 所以下定决心,准备坚持一下. 没钱就不能干点活了,什么社会啊?

sublime+emmet前端开发工具

Sublime简直神一样的存在! 逗的了python,耍的了json,玩得起HTML,撩的了CSS.反正目前能用到几种代码的都能用它编辑. 上手容易,界面清晰,简洁方便,可扩展性强.eclipse,dw什么的启动起来实在慢.而且黑色背景很炫酷.还有各种惊喜随时等你去发现. 恩,说正事,今天开始接触D3.js,本来打算安装myeclipse+tomcat的(用不习惯DW这种半自动的前端开发工具,没开发过很复杂的网站,所以都是前端后台都在eclipse上做,虽然前端大部分都是找模板修改一下),突然意

便捷的前端开发工具

便捷的前端开发工具 说到工具?那是可是不得了的东西,它是人类文明进步的基石.人类,从石器时代发展到现代社会,也是工具,从石具到现代高科技的演变过程史!当然啦!我们现在互联网时代,前端开发,也是离不开工具的.使用工具是为了创造更好的工具,为了更高的效率.那作为前端爱好者或前端开发者们,你们知道哪些前端开发工具吗?享受了它们的便捷了吗?今天,我就给大家介绍几个开发者工具吧! CSS检查工具-CKStyle 之前的几篇文章给大家介绍有关CSS有关的知识点,想必有不少人已经遇到过有关CSS压缩或检查的问