前端常用工具代码库

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

安装使用

1. 直接  引用 cdn 上的webuylibs.min.js使用
2. 使用 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}
 */

Mina

• netWork  网络检测
• getUrlParams  解析扫小程序码进来的参数
• getWXParam  获取小程序参数
• downloadImg  下载图片
• saveImg  保存图片授权
• downloadVideo  下载视频
• saveVideo  保存视频授权
• getLoginCode  获取 login code

Object

• deepClone  深拷贝
• isEmptyObject  深判断是否为空对象
• get 参考 lodash

Util

• json2Form json 数据转 form 表单数据
• cutStrForNum  截取字符串
• formatMoney  价格格式化
• formatNumber  数字格式化
• isNumber  检测是否为数字
• filterHyk  过滤货号
• convertThousand 数字千位格式化
• changeNickName 昵称加密

Q

1.完善与维护

1.1 添加新方法

• 在相应的模块添加方法

• 测试

• 发布到 cdn

  git tag 1.0.0

  git push origin 1.0.0

• 发布到 npm(加一下 package.json 的版本号)

  npm run build
  
  npm publish .

  2.新旧项目的引入

拓展

• 不断累计
• 编写完整的测试(karma+mocha+power-assert)
• yarn...
• more...

参考文档

karma Mocha power-assert lodash