jslever

打造自己的js开发武器库

使用方法

1. 直接在浏览器中引入dist目录下的jslever.min.js文件。jslever.min.js文件执行完成之后，会在浏览器的window对象上挂一个属性jslever，该属性是一个对象，可以通过该对象访问所有组件和功能函数。

2. 如果只需要使用jslever中的部分组件或者函数，可以通过ES6语法“import”在代码中按需引入功能组件或者函数。

功能组件或函数使用方法介绍

图片懒加载组件lazyloader

示例：

_this = jslever.lazyloader({
    // 需要侦听的事件名，默认侦听'scroll'事件
    event: 'scroll',
    // 侦听事件的目标元素选择器, 默认值为'body'
    target: 'body',
    // 自定义用来存储图片真实链接的属性, 默认值为'data-src', 同时该属性作为懒加载图片的标志
    dataMark: 'data-src',
    // 以本次要加载的图片为中心，前后预先加载的图片数
    preload: 1,
    // scroll函数节流参数, 默认延时16ms, 执行周期20ms
    throttleOptions: {
        delay: 16,
        interval: 20
    }
});

如果使用默认配置，则相关属性可以省略不写。具体的应用可以参照test/lazyloader/index.html。_this表示当前lazyloader对象，用来操纵lazyloader对象对应的属性和方法。_this可以操纵的属性和方法介绍如下：

1. imgArr 用来存储当前lazyloader对应的所有懒加载图片DOM
2. options 当前lazyloader配置
3.
/**
 * [search 找到当前页面中已经展示的图片在imgArr中的首尾下标，用于图片预加载]
 * @returns null或者属性为start（起始下标）和end（结束下标）的对象
 */
search()
4.
/**
 * [loadPartial 加载imgArr下标从start到end的元素]
 * @param start
 * @param end
 * @returns {lazyloader}
 */
loadPartial(start, end)
5.
/**
 * [load 实现图片懒加载函数，调用了loadPartial]
 * @returns {lazyloader} 当前调用的lazyloader对象
 */
load()
6.
/**
 * [bindEvts 事件绑定函数]
 * [lazyloader的启动函数]
 * @returns {lazyloader} 当前调用的lazyloader对象
 */
bindEvts()
7.
/**
 * [unbindEvts: 解绑事件函数]
 * [lazyloader的摧毁函数]
 * @returns {lazyloader} 当前调用的lazyloader对象
 */
unbindEvts()
8.
/**
 * [Create lazyloader对象构造函数]
 * @param options 自定义配置
 * @returns {lazyloader} 构造出来的lazyloader对象
 */
Create(options = {})

滚动条组件roller

该组件的目的是实现列表的竖直滚动（呈3D弧形滚动），如滚动时间选择器中选择年、月、日的滚动栏逻辑。

_this = jslever.roller({
    // roller对应的选择器, 默认为'roller'
    target: '.roller',
    // roller中每个选项对应的选择器, 默认为'.item'
    item: '.item',
    // 初始选中选项的序号，从0开始，默认为0
    index: 0,
    // 滚动选择器每一个选项在滚动过程中旋转角度步长，单位为deg，默认为25度
    rotateStep: 25,
    // 每列选择完成之后的回调函数，用来实现多列滚动条之间的联动
    callback: function () {
    }
})

该组件只是实现了js逻辑，并没有实现UI部分，UI可以参考/test/roller/index.html中的样式。_this是当前roller对象，可以用来操纵roller对象对应的属性和方法。可以操纵的属性和方法介绍如下：

1. options 当前roller配置
2.
/**
 * [setInitItem 设置初始选中的条目]
 * @returns {Roller}
 */
setInitItem()
3.
/**
 * [updateRotate 更新条目的旋转角度]
 * @param  {Boolean} isTouchend [标志函数调用是否发生在touchend事件被触发时]
 * @param  {number} delta 整个Roller的平移增量
 * @return {Roller}             [当前Roller对象]
 */
updateRotate(isTouchend, delta)
4.
/**
 * [bindEvts 事件绑定函数，Roller的开启函数]
 * @return {Roller}     [当前Roller对象]
 */
bindEvts()
5.
/**
 * [bindEvts 事件解绑函数，Roller的关闭函数]
 * @returns {Roller}
 */
unbindEvts()

控制页面滚动到某一点的组件scrollTo

示例：

/**
 * scrollTo scrollTo函数的wrapper，便于使用
 * @param to 目的地scrollTop值
 * @param duration 滚动持续时间，单位为毫秒（ms）
 * @returns {Scroller} Scroller类，可以使用其中的静态函数
 */
Scroller = jslever.scrollTo(to, duration);

通过Scroller可以使用的方法有：

1.
/**
 * request 自定义的requestAnimationFrame的替代函数
 * @param callback 回调函数
 * @returns {number} requestId
 */
request(callback)
2.
/**
 * cancel 自定义的cancelAnimationFrame的替代函数
 * @param {number} requestId
 */
cancel(requestId)
3.
/**
 * getRequestAnimationFrame 获取当前浏览器支持的requestAnimationFrame函数
 * @returns 当前浏览器支持的requestAnimationFrame函数
 */
getRequestAnimationFrame()
4.
/**
 * getCancelAnimationFrame 获取当前浏览器支持的cancelAnimationFrame函数
 * @returns 当前浏览器支持的cancelAnimationFrame函数
 */
getCancelAnimationFrame()
5.
/**
 * getScrollTop 获取当前页面scrollTop属性值
 * @returns {number} scrollTop属性值，单位为px
 */
getScrollTop()
6.
/**
 * setScrollTop 设置当前页面scrollTop属性值
 * @param value 像素值
 */
setScrollTop(value)
7.
/**
 * scrollTo 页面滚动到指定位置动画
 * @param to 目的地scrollTop值
 * @param duration 滚动持续时间，单位为毫秒（ms）
 */
scrollTo(to, duration)

相册滑动组件slider

示例：

_this = jslever.slider({
    // 相册选择器，默认为slider，在使能render的情况下，选择器只能是class选择器
    target: '.slider',
    // 相册图片总数
    total: 0,
    // 配置相册首显图片的序号，默认为0
    index: 0,
    // 配置是否循环滑动
    loop: false,
    // 判断相册是否翻页的滑动阈值
    threshold: 60,
    // 图片懒加载配置
    lazyload: {
        enable: true,
        event: 'transitionend',
        target: '.slider',
        dataMark: 'data-src',
        preload: 1,
        throttleConfig: {
            delay: 16,
            interval: 20
        }
    },
    // 轮播配置
    carousel: {
        enable: false,
        // 轮播间隔
        interval: 5000,
        // 轮播方向‘left’ or 'right'
        flow: 'right'
    },
    // 配置是否使用javascript插入相册html, 注意：该配置使用的是默认UI, 使用javascript设置样式。建议使用者自己实现UI设计, 提高代码可维护性。
    render: {
        enable: false,
        // 相册容器的选择器
        container: '.slider-container',
        // 相册所有图片的链接信息
        data: [],
    },
    /**
     * 相册每次滑动时需要执行的用户自定义操作
     * @param index 即将展示的图片的序号，非负整数
     * @param ctx 当前相册DOM
     */
    plugin: function (index, ctx) {
    },
    // 相册图片间有间隙时，通过配置gap的initExtraOffset和commonExtraOffset可以保证相册每张图片都是居中显示
    gap: {
        // 设置首显图片时，相册需要额外移动的距离，相对于相册container宽度的百分比
        initExtraOffset: 0,
        // 普通滑动时，相册需要额外移动的距离，相对于相册container宽度的百分比
        commonExtraOffset: 0
    }
});

_this代表当前slider对象，其可以通过unbindEvts()和stopCarouse()来分别停止相册的手指滑动翻页和定时轮播功能。相册的DOM结构和CSS样式，可以参考test/slider/index.html。

移动端图片缩放组件zoomer

示例：

/**
 * selector 图片元素类选择器
 */
Zoomer = jslever.zoomer(selector);

注意：selector只能是类选择器。可以通过Zoomer.stopZoomer()停止图片放大功能。

宽松检查用户输入手机号码是否合法 checkMobileLoose

/**
 * checkMobileLoose 宽松检测字符串是否是手机号码，以1开头的数字字符串全返回true
 * @param str 待检查字符串
 * @returns {boolean}
 */
checkMobileLoose(str)

示例：

jslever.checkMobileLoose('13333333333');
返回true

严格检查用户输入的手机号码是否合法 checkMobileStrict

/**
 * checkMobileStrict 严格检测字符串是否是手机号码，只有对于真实的手机号码返回true
 * @param str
 * @returns {boolean}
 */
checkMobileStrict(str)

示例：

jslever.checkMobileStrict('17610826114');
返回true

对html字符串转义函数，防止XSS攻击 escapeHTML

/**
 * escape 对html字符串转义函数，防止XSS攻击
 * @param html 待转义的html字符串
 * @return 转义后的html字符串
 */
escapeHTML(html)

对象扩充函数 extend

参考jQuery extend实现和使用方式。

判断对象是否是函数 isFunction

示例：

jslever.isFunction(new Function());
返回true

判断对象是否是普通对象（不含原型）isPlainObject

参考jQuery中isPlainObject的实现，https://jquery.com/

节流函数 throttle

/**
 * [throttle 节流函数，用于优化频繁触发的事件，如scroll事件，提高页面性能]
 * @param  {[Function]} handler  [事件处理函数]
 * @param  {[Object]}   config   [throttle配置文件，默认配置
 * {
 * // 延时，单位毫秒（ms）
 * delay: 40,
 * // 最小执行周期，单位毫秒（ms）
 * interval: 60
 * }
 * @return Function        [新函数]
 */
jslever.throttle(handler, config);

getUrlQueries 获取给定url的查询参数键值对信息

/**
 * getUrlQueries 获取给定url的查询参数键值对信息
 * @param url 待提取的url
 * @returns {{}} 返回一个对象，对象的属性名是查询参数的名字，属性值是查询参数名字对应的值
 */
jslever.getUrlQueries(url);

isNum 判断值是否是合法的十进制数字形式

/**
 * isNum 判断值是否是合法的十进制数字形式
 * @param value 待检测的值
 * @returns {boolean}
 */
jslever.isNum(value);