Webuylibs NPM | npm.io

前端常用工具代码库

目的：通过各业务线平时需求开发过程中积累的经验，保证各业务线共用一套公共库，提高平时业务需求开发的效率！

安装使用

直接引用 cdn 上的webuylibs.min.js使用
使用 npm 安装

浏览器

<script src="http://cdn.webuy.ai/lib/webuyLibs/current/build/webuylibs.min.js"></script>
<script>
  const changeNickName = webuylibs.changeNickName;
</script>

npm

$ npm install --save-dev webuylibs
$ npm install webuylibs --production
PS：小程序此处请务必使用--production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。

// 全量引入
import webuylibs from 'webuylibs';
...
Vue.prototype.webuylibs = webuylibs; // vue原型挂载全量方法库

// 单目录引入
import { date } from 'webuylibs';
...
Vue.prototype.date = date; // vue原型挂载该类型方法目录

// 单文件引入
import { get } from 'webuylibs';
...
Vue.prototype.get = get; // vue原型挂载单个方法文件

API

Date

format 通用时间格式化

/**
 * [format 时间格式化]
 * @param  {[type]} time      [时间戳]
 * @param  {String} formatter [格式(e.g.:YYYY年MM月DD日) 默认2018-10-17 10:28:40]
 * @return {[String]}           [格式化之后的时间]
 */

format(1557221102562, 'YYYY-MM-DD');

isLeapYear 是否为闰年

/**
 * [是否为闰年]
 * @param {Number} year
 * @returns {Boolean}
 */
isLeapYear(2018);

isSameDay

/**
 * [判断是否为同一天]
 * @param  {Date} date1
 * @param  {Date} date2 可选／默认值：当天
 * @return {Boolean}
 */
isSameDay(2018);

Dom

getElementTop

/**
 * [获取元素高度]
 * @param  {DOM} element
 * @return {Number} 元素高度
 */
getElementTop(2018); // 0

getScrollEventTarget

/**
 * [获取滚动目标]
 * @param  {DOM} element
 * @param  {DOM} rootParent
 * @return {DOM} 滚动目标
 */
getScrollEventTarget(document.querySelector('#scroll'), window);

getScrollTop

/**
 * [获取滚动节点上层滚动边界]
 * @param  {DOM} element
 * @return {Number}
 */
getScrollTop(document.querySelector('#scroll'));

getVisibleHeight

/**
 * [获取元素高度]
 * @param  {DOM} element
 * @return {Number} 元素高度
 */
getVisibleHeight(document.querySelector('#scroll')); // 500

setScrollTop

/**
 * [元素滚动到指定位置]
 * @param  {DOM} element
 * @param  {Number} 滚动Y轴位置
 */
setScrollTop(document.querySelector('#scroll'), 100);

Filter

addImgSuffix

/**
 * 根据oss返回图片资源规则
 * 添加后缀，显示不同大小图片
 *
 * @param {String} url 图片地址
 * @param {Number} width 需要显示的图片宽度
 * @param {Number} suffix 转换的格式
 * @param {Boolean} showInterlace 是否渐显
 */
let url = 'https://cdn.haoyiku.com.cn/assets/file/2019/03/05/n_1551772957009_2112.jpg';
url = addImgSuffix(url, 200, 'jpg'); // https://cdn.haoyiku.com.cn/assets/file/2019/03/05/n_1551772957009_2112.jpg?x-oss-process=image/resize,w_750,x-oss-process=image/format,jpg

changeNickName

/**
 * [昵称加密]]
 * @param  {[String]} nickname [昵称]
 * @return {[String]}      [加密之后的昵称]]
 */
let name = '我的昵称需要加密';
name = changeNickName(name); // '我****密'

filterHyk

/**
 * [过滤货号]
 * @param  {[String]} str [需要过滤货号的字符串]
 * @return {[String]}      [过滤之后的字符串]
 */
let name = 'hyk123.商品';
filterHyk(name); // 商品

formatMoney

/**
 * [价格格式化]
 * @param  {[Number]} sum [需要处理的价格]
 * @param  {[Number]} num [价格精度]
 * @return {[Number]}      [处理之后的价格]
 */
formatMoney(123, 2); // 123.00

formatNumber

/**
 * [数字格式化]
 * @param  {[Number]} sum [需要处理的数字]
 * @param  {[Number]} num [数字精度]
 * @return {[Number]}      [处理之后的数字]
 */
formatNumber(123, 2); // 123.00

Function

classnames

/**
 * [jsx class处理]
 * @param  {[String|Object]} sum [需要处理的字符串或者对象]
 * @return {[String]}
 */
classnames('foo', 'bar'); // => 'foo bar'
classnames('foo', { bar: true }); // => 'foo bar'
classnames({ 'foo-bar': true }); // => 'foo-bar'
classnames({ 'foo-bar': false }); // => ''
classnames({ foo: true }, { bar: true }); // => 'foo bar'
classnames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classnames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

debounce

/**
 * [函数防抖]
 * @param {Function} func
 * @param {number} [wait=0]
 *  触发间隔
 * @param {Object} [options={}]
 * @param {boolean} [options.leading=false]
 *  是否第一次触发立即执行
 * @param {number} [options.maxWait]
 *  最大等待时间
 * @param {boolean} [options.trailing=true]
 *  超时执行
 * @returns {Function}
 */

throttle 函数节流

/**
 * [throttle 函数节流]
 * @param {Function} func
 * @param {number} [wait=0]
 * @param {Object} [options={}]
 * @param {boolean} [options.leading=true]
 * @param {boolean} [options.trailing=true]
 * @return {Function}
 */