#Jpro「原lazing项目」

点击进入GitHub

点击进入「对象API」wiki

Jpro 1.2 V （2015年12月31日）

霹雳鱼网站，jpro可完成该网站95%的效果，可以参考这份优秀的网站。

感谢 @搜狐视频 FE小伙伴 提出的宝贵意见。

「安利一个新轮子」

iboostrap 专为webview项目准备的轮子，很快和大家见面。

「介绍」

• jpro是基于monkey引擎上的jQeury动画效果组件，jpro相比lazing性能上有了更大的提升；
• jpro与lazing相比，添加二度监控策略，对离视口较远的dom自动放弃监控，接近视口时开始监控，减少对main thred开销；
• 更优秀的回收算法
• jpro添加了正常模式控制，自己设置开始/结束位置；

「引擎」monkey引擎

lazing是在jQuery的animation上进行了一层封装,同时进行了几次升级,在V2版效果达到预期,但在与amazing合并时遇到了性能和当初设计的扩展性等问题,所以放弃了animation作为jpro的底层动画引擎,重新写一套动画引擎（monkey）。monkey是一个100%的css引擎，高度利用硬件加速功能。

「目的」解决效果难题，把更多的精力放到业务上

• 让有技术支持的团队，更加快速搭建起「搜狐快站，易企秀」等第三方服务的效果，提供更底层支持
• 追求效果更好的网站

「注意」

• 原版API对比参考Lazing V2版

####「说明」

• 压缩文件：dist/js/src/jpro.min.js
• 源文件：dist/js/src/jpro.js
• 使用前先加载jQeury
• demo：src/html/demo1.html

「新」jpro bate1.1 (2015年11月17日)

「日志」

• 优化底层引擎复用性
• 更改内核策略
• 更改内存回收策略
• 修复部分bug

「API」

「对象API」

• _on()
• _animation()
• _unormal()
• _normal()

「方法API」

• sdPrivateProperty()
• sdKernel()
• sdIsPX()
• sdIsDEG()
• sdIsBlock()
• sdUuid()
• sdGroup()
• sdCleanGroup()
• sdGetOption()

---

「新」jpro bate1.0 (2015年11月9日)

jpro 由 amazing 和 lazing项目合并而来. 目前发布在lazing项目中,后续将移至jpro项目中

---

「预告」2015年10月29日

• api重新设计，更加贴近jQuery，Zepto语法
• 提供更多api
• 放弃使用animation「jQuery」方法（jQuery3.X考虑使用animation，其余jq版本不再使用），使用性能更好的解决方案
• 将amazing项目合并进来，以高性能效果为主，懒加载为辅策略，这样更加符合需求
• 「放弃」config配置调用方法
• 「放弃」部分配置属性

Lazing迎来了第二个版本重大更新，核心算法重新设计，提高算法强度，对多种可能进行预判，代码更加简介。

能做什么？

• 页面初始化时，文字，图片由隐藏渐变到显示，同时位置进行移动，简单配置即可
• 当DOM未在视口中，DOM效果被注册（不影响浏览器性能），移入视口进行加载
• 移出视口再次移入视口，再次触发效果
• 不想配置？绑定DOM名字即可

可自定义支持

• DOM对象定义(eq: .lazy || #lazy || body > .lazy || .. 等)
• 执行时间（ms）
• 延迟时间（未支持）
• 偏移量（只支持px）
• 方向（上下左右）
• 是否开启懒加载(在视口时加载和初始化时)
• 是否开启重复模式（再次移入视口时再次加载）
• 初始隐藏度*
• 最后隐藏度*

使用方法

arguments	作用	默认值	类型
name	支持jQueryDOM查询命名规则	.lazy	string
time	执行时间	1000	num
delay	延迟加载时间	未支持	...
offset	偏移量(仅支持px)	200	num
orien	偏移方向(上下左右)	left	string
lazy	是否开启懒加载模式	false	boo
repe	是否开启重复模式	false	boo
startOpacity*	初始隐藏度	0	num
endOpacity*	最后隐藏度	1	num

//首先在</body>之前引入一下组件，lazing依赖jquery，简单效果在demo1.html中
	<script src="jquery.min.js"></script>
	<script src="lazing.min.js"></script>
	<script>
		lazy.init([
        {
            name: '.index-nav-li',
            time: 1000,//执行时间
            delay: 0,//延迟时间
            offset: '100',//偏移量
            orien: 'left',//方向
            lazy: true,//是否支持赖加载
            repe: false,//是否支持重复
            startOpacity: 0.3,//起始隐藏
            endOpacity: 0.8//结束隐藏
        }
    ]);  
	</script>

更新

2015年10月16日 v0.2

• 「新增」一个demo实例，可体现组件的强大！
• 「更新」可设置初始化隐藏度和最后隐藏度（startOpacity，endOpacity）
• 「更新」将DOM名称注册改为真实DOM对象注册
• 「bug 」修复多层容器加载时orien累加问题
• 「bug 」修复例如一个class对应多个DOM，无法独立监控问题

2015年10月05日 v0.1

新的开始

wuguzix@foxmail.com

五谷子