app-base-web

web development common base package.

安装环境

切换node版本

sudo n 11.0.0

安装包

npm i npm audit fix npm audit fix --force

编译js

npm run build

编辑css

gulp build

平时编译并复制到对应的工程

gulp build && gulp copy

发布时

gulp build && npm publish

项目应用

npm i app-base-web //or yarn add app-base-web

####  `modules`

import utils from 'app-base-web' //or import utils from 'app-base-web/utils'

let arr = ['fengguoqu','patrick','somebody'] let num = 'string' let date = new Date()

console.log(utils.array.remove(arr,'somebody')) console.log(utils.check.isNumber(num)) console.log(utils.date.format(date,'YYYY-MM-DD hh:mm'))

// [ 'fengguoqu', 'patrick' ] // false // 2019-04-25 21:40

//or import {array as arrayUtil,check as checkUtil,date as dateUtil} from 'app-base-web'

console.log(arrayUtil.remove(arr,'somebody')) console.log(checkUtil.isNumber(num)) console.log(dateUtil.format(date,'YYYY-MM-DD hh:mm'))

//dependency module import numeral from 'app-base-web/numeral'

let num = numeral('1,000') console.log(num.value()) //1000

import _ from 'app-base-web/lodash' _.chunk(['a', 'b', 'c', 'd'],2) //[['a', 'b'], ['c', 'd']]

## `css`

import 'app-base-web/css/base.css'

API

For Utils Documentation, visit document

utils

• string
  • uuid 生成uuid
  • randomCode 生成数字字符随机组合
  • encrypt 编码
  • decrypt 解码
  • checkPwd 检测密码强度
  • remove 移除字符
  • replace 替换字符
  • ellipsis 省略号
  • filterTag 过滤html代码(把<>转换)
  • filterScript 过滤<script></script>转换
  • getRandomColor 获取十六进制随机颜色
  • domToString DOM转字符串
  • stringToDom 字符串转DOM
• number
  • random 随机数
  • randomGoods 抽奖概率
  • randomCode 随机验证码
  • formatSmallChinese 将数字转换成对应的中文小写
  • formatMoney 数字金钱表示
  • formatBigMoney 中文大写金钱表示
  • numberUnit 数字单位
• array
  • remove 移除元素
  • sort 排序
  • unique 去重
  • union 并集
  • intersect 交集
  • complement 补集
  • minus 差集
  • max 最大值
  • min 最小值
  • sum 求和
  • average 平均值
  • isRepeat 判断数组是否有重复的项
  • getItemByRandom 随机获取元素
  • getIndexByItem 通过元素获取下标
  • getItemByIndex 通过下标获取元素
  • setItemByIndex 通过下标设置元素
  • removeByItem 移除元素
  • removeByIndex 通过下标移除元素
• check
  • isBrowser 检查是什么浏览器
  • isMobile 返回手机操作系统
  • isPC 检查是否为PC
  • isString
  • isNumber
  • isBoolean
  • isFunction
  • isNull
  • isUndefined
  • isObj
  • isArray
  • isDate
  • isError
  • isSymbol
  • isPromise
  • isSet
  • isEmpty
  • isFalse
  • isInt
  • isPhone
  • isTel
  • isUsername
  • isPassword
  • isPostal
  • isQQ
  • isEmail
  • isMoney
  • isURL
  • isIP
  • isEnglish
  • isChinese
  • isLower
  • isUpper
  • isHTML
  • isSpace
  • isIdCard
  • isBankCard
  • isChineseIdCard
• date
  • format 日期格式化 默认如：YYYY-MM-DD hh:mm:ss
  • countTime 计算时间的year,month,day,hour,minute,seconds,week,daytime,when 如：早晨，25秒以前等等
  • countDown 倒计时
  • getHMS 根据秒数返回时分秒格式 如：getHMS(3610) -> 1小时0分10秒
  • countMillisecond 计算毫秒数
  • formatMillisecond 转换毫秒数
  • getTime 当天当前时间距离1970年1月1日的毫秒数
  • getMilliseconds 当天当前时间的毫秒数
  • getSeconds 当天当前时间的秒数
  • getMinutes 当天当前时间的分钟数
  • getHours 当天几点
  • getHours12 当天几点（12小时制时）
  • getDay 当月多少号
  • getWeek 当月星期几
  • getMonth 当年几月
  • getPeriod 当年第几季度
  • getYear 获取年份
  • daysOfYear 当年有多少天
  • daysOfMonth 当月有多少天
  • dayOfYear 当年中的第几天
  • dayOfMonth 当月中的第几天
  • weekOfYear 当年的第几周
  • weekOfMonth 当月中的星期几
  • firstDayOfYear 当年的第一天
  • lastDayOfYear 当年的最后一天
  • firstDayOfMonth 当月的第一天
  • lastDayOfMonth 当月最后一天
  • firstTimeOfDay 当天的开始时间
  • lastTimeOfDay 当天的结束时间
  • firstDayOfWeek 当周的第一天
  • lastDayOfWeek 当周的最后一天
  • firstDayOfNextMonth 下个月的第一天
  • betweenMillSecond 获取两个时间间隔毫秒数
  • betweenSecond 获取两个时间间隔秒数
  • betweenMinute 获取两个时间间隔分钟数
  • betweenHour 获取两个时间间隔小时数
  • betweenDay 获取两个时间间隔天数
  • betweenMonth 获取两个时间间隔月数
  • betweenYear 获取两个时间间隔年数
  • plusMillisSeconds 在一个时间上加上多少毫秒
  • plusSeconds 在一个时间上加上多少秒
  • plusMinutes 在一个时间上加上多少分钟
  • plusHours 在一个时间上加上小时数
  • plusDays 在一个时间上加上天数
  • plusMonths 在一个时间上加上多少个月,这里是按照一个月30天来计算天数的
  • plusYears 在一个时间上加上多少年,这里是按照一年365天来计算天数的，isLoop是否闰年
  • minusMillisSeconds 在一个时间上减去多少毫秒
  • minusSeconds 在一个时间上减去多少秒
  • minusMinutes 在一个时间上减去多少分钟
  • minusHours 在一个时间上减去小时数
  • minusDays 在一个时间上减去天数
  • minusMonths 在一个时间上减去多少个月,这里是按照一个月30天来计算天数的
  • minusYears 在一个时间上减去多少年,这里是按照一年365天来计算天数的，isLoop是否闰年
  • isEq 判断两个时间是否一样
  • isAfter 判断date2是否晚于date1
  • isBefore 判断date2是否早于date1
• event
  • debounce 空闲控制
  • throttle 频率控制
  • hit 检测两个物体是否相撞
  • frequency 随机间歇执行
• file
  • formatSize 格式文件大小单位
  • getExt 获取文件的后缀名
  • getName 获取文件名称
  • getFileName 根据路径获取文件全名
  • isImageFile gif|jpg|jpeg|png|GIF|JPG|PNG
  • isVideoFile mp4|mp3|flv|wav
  • isDocumentFile doc|docx|xls|xlsx|pdf|txt|ppt|pptx|rar|zip|html|jsp|sql|htm|shtml|xml
  • isOfficeFile doc|docx|xls|xlsx|pdf|txt|ppt|pptx
• net
  • getBreadcrumbs 获取path数组
  • getParam 获取url参数
  • getParams 获取所有url参数
  • ajax http请求
  • fetch fetch请求
  • request dependency superagent see superagent
  • cookie dependency js-cookie see js-cookie
    • parse 转换字符串cookie
    • getFromString 从headrs中获取cookie值
    • getJSON
    • get
    • set
    • remove
  • localStorage
    • set
    • get
    • remove
    • clear
  • sessionStorage
    • set
    • get
    • remove
    • clear
• xlsx
  • read
  • write

dependency module

• moment dependency moment see momentjs
• numeral dependency numeral see numeraljs
• math dependency mathjs see mathjs
• anime dependency animejs see animejs
• interact dependency interactjs see interactjs
• jquery dependency jquery see jquery
• lodash dependency lodash see lodash
• d3 dependency d3 see d3
• Mock dependency mockjs see mockjs
• Sortable dependency sortablejs see sortablejs
• Two dependency two.js see two.js
• Three dependency threejs see threejs
• Web3 dependency web3 see web3

common.css class

• show display: none;
• hide display: none;
• invisible visibility: hidden;
• transparent opacity: 0;
• usn user-select: none;
• mask create a mask
  • -cover background-size: cover;
  • -cover-all background-size: 100% 100%;
• font
  • -indent text-indent: 2em;
  • -bold font-weight: bold;
  • -normal font-weight: normal;
  • -fz12 font-size: 12px;
  • -fz14 font-size: 14px;
  • -fz16 font-size: 16px;
  • -fz18 font-size: 18px;
  • -fz20 font-size: 20px;
  • -fz24 font-size: 24px;
  • -fz26 font-size: 26px;
  • -fz28 font-size: 28px;
  • -fz32 font-size: 32px;
• text
  • -tal text-align: left;
  • -tar text-align: right;
  • -tac text-align: center;
  • -taj text-align: justify;
  • -ellipsis overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
    • -clamp height: inherit; /*必须设置高度才生效*/
• menu
  • -icon width: 16px;height: 16px;...
  • -text vertical-align: middle;
• fixed position: fixed;
  • -tl top: 0;left: 0;
  • -tr top: 0;right: 0;
  • -tc top: 0;left: 50%;
  • -bl bottom: 0;left: 0;
  • -br bottom: 0;right: 0;
  • -bc bottom: 0;left: 50%;
  • -cc bottom: 50%;left: 50%;
• float
  • -l float: left;
  • -r float: right;
  • -c clear: both;...
• flex
  • -b-half flex-basis: 50%;
  • -b-quarter flex-basis: 25%;
  • -b-fifth flex-basis: 20%;
  • -auto flex-grow: 1;
  • -shrink flex-shrink: 1;
  • -row flex-flow: row wrap;...
  • -row-sa justify-content: space-around;
  • -row-sb justify-content: space-between;
  • -row-c justify-content: center;
  • -row-end justify-content: flex-end;
  • -col flex-flow: column nowrap;
  • -col-sa justify-content: space-around;
  • -col-sb justify-content: space-between;
  • -col-c justify-content: center;
  • -col-end justify-content: flex-end;
  • -center align-items: center;
  • -center-sa justify-content: space-around;
  • -center-sb justify-content: space-between;
  • -center-c justify-content: center;
• grid
  • -row display: grid;
  • -inline display: inline-grid;
• margin
  • -center position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
• transform
  • -center position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
• vertical
  • -center display: inline-block;text-align: center;
  • -inner-center width: inherit;height: inherit;text-align: center;display: table-cell;vertical-align: middle;

Note:

• grid.css see Foundation XY Grid
• visibility.css see Foundation Visibility Classes