1.0.2 • Published 6 years ago
jslever v1.0.2
jslever
打造自己的js开发武器库
使用方法
直接在浏览器中引入dist目录下的jslever.min.js文件。jslever.min.js文件执行完成之后，会在浏览器的window对象上挂一个属性jslever，该属性是一个对象，可以通过该对象访问所有组件和功能函数。
如果只需要使用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);