狠狠撸

狠狠撸Share a Scribd company logo

箩蚕耻别谤测插件开发

?Download as PPTX, PDF?
?
Z
zhangsuoyong

箩蚕耻别谤测插件开发

1 of 52
Downloaded 23 times
jQuery 插件开发 张所勇 前端开发工程师 suoyong@leju.sina.com.cn zhangsuoyong@163.com LEJU Confidential 1
jQuery插件特性 ? 封装性 ? 独立性 ? 通用性 ? 可扩展性 ? 简单化 ? 模块化 2
箩蚕耻别谤测插件开发流程 1、确定功能 2、收集需求 3、设计实现原理 4、代码编写 5、文档编写 3
开发实战 hoverfn插件 4
1、确定功能 5
1、确定功能 一个能方便处理鼠标事件的插件 6
2、收集需求 7
2、收集需求 step1、找到首页全部和鼠标相关的事件 8
2、收集需求 step2、分析需求 类型1：pop菜单 特点： 移入：自身加上一个样式，子元素show 移出：自身去掉一个样式，子元素hide 9
2、收集需求 step2、分析需求 类型2：分类菜单 特点： 移入：自身加上一个样式，子元素show 移出：自身去掉一个样式，子元素hide 10
2、收集需求 step2、分析需求 类型3：图片hover边框 特点： 移入：自身加上一个样式 移出：自身去掉一个样式 11
2、收集需求 step2、分析需求 类型4：tab标签 特点： 移入：1、标签组中自身加上一个样式，其他remove这个样式 2、内容组中的一个元素show，其他hide 移出：无操作 12
2、收集需求 step2、分析需求 类型5：推荐商品 特点： 移入：自身加上一个样式，子元素show 移出：无操作 13
2、收集需求 需求总结： 需求1：自身加上/去掉一个样式 需求2：子元素show/hide 需求3：组中唯一元素show,其他hide 14
3、实现原理 15
3、实现原理 1、绑定鼠标事件 2、根据参数执行不同需求操作 ?自身加上/去掉一个样式 ?目标show/hide ?目标加上或者去掉一个样式（深化） ?Tab原理 16
3、实现原理 接上页 ?Tab原理 ?组1：标签组（触发组） ?组2：内容组 ?原理：组1和组2元素一一对应，每组中一个显示，其余隐藏 17
4、代码编写 18
4、代码编写 代码模板 见template.js 19
4、代码编写 Step1:确定参数 20
4、代码编写 Step1:处理变量 21
4、代码编写 Step2:方法设计 22
4、代码编写 Step3:初始化 23
4、代码编写 Step4:方法编写 24
4、代码编写 Step4:方法编写 25
4、代码编写 Step5:方法拆分，原则：尽量让一个函数做一件事情 26
4、代码编写 Step5:方法拆分，原则：尽量让一个函数做一件事情 27
4、代码编写 Step5:方法拆分，原则：尽量让一个函数做一件事情 28
4、代码编写 Step6:细节完善 1、处理hover以外的事件 29
4、代码编写 Step6:细节完善 2、添加延时渲染特性 30
4、代码编写 Step6:细节完善 2、添加延时渲染特性 31
4、代码编写 Step6:细节完善 2、添加延时渲染特性 32
4、代码编写 Step7:预留自定义事件 33
5、文档编写 34
5、文档编写 要点： 1、说明调用对象是$(elem)还是$ 2、描述清楚每项参数配置作用 3、描述清楚每个自定义事件接口 4、常见功能实例 35
就这么简单 36
实例二：滚动插件 37
收集需求 38
滚动插件需求集锦 特征 值 视口元素 1 滚动元素 1 左右按钮 有 循环滚动 是 滚动方向 横向 ?参见http://www.jiaju.com/ 39
滚动插件需求集锦 特征 值 视口元素 6 滚动元素 1 左右按钮 有 循环滚动 是 滚动方向 横向 ?参见ttp://news.jiaju.com/zt/2012trendofjiaju1.shtml 40
滚动插件需求集锦 特征 值 视口元素 4 滚动元素 4 左右按钮 有 循环滚动 否 滚动方向 横向 ?参见http://www.jiaju.com/shuicaotaocan/product137269/ 41
滚动插件需求集锦 特征 值 视口元素 5 滚动元素 1 左右按钮 有 循环滚动 否 滚动方向 横向 边界性 特殊 选中样式 有 ?参见http://www.jiaju.com/zhuangxiu/slide-38/#p=1 42
滚动插件需求集锦 特征 值 视口元素 4 滚动元素 1 左右按钮 有 循环滚动 否 滚动方向 纵向 键盘控制 有 滚轮控制 有 Ajax无限数据 是 ?参见http://house./bj/pic/22243/all/5606176/1/ 43
滚动插件需求集锦 特征 值 视口元素 2 滚动元素 1 左右按钮 有 循环滚动 是 滚动方向 横向 圆点控制 有 自动滚动 是 ?参见http://house./bj/ 44
滚动插件需求集锦 特征 值 视口元素 1 滚动元素 1 左右按钮 无 循环滚动 是 滚动方向 纵向 圆点控制 无 自动滚动 是 数字控制 有 延时加载 有 ?参见http://house./bj/ 45
滚动插件需求集锦 特征 值 视口元素 1 滚动元素 1 左右按钮 无 循环滚动 是 滚动方向 纵向 小图控制 有 ?参见http://house./bj/ 46
需求好多… 47
需求总结 滚动（不算幻灯片）需求： ?视口元素数 ?每次滚动元素数 ?滚动时间 ?循环滚动处理 ?边界处理 ?滚动方向 ?前进后退按钮及各种状态样式 ?触发事件 ?自动滚动 ?键盘、滚轮支持 48
需求总结 滚动幻灯片需求： ?数字控制及各种状态样式 ?小图控制及各种状态样式 ?左右按钮控制及各种状态样式 ?延时加载/渲染 49
插件实现 50
插件实现 ?基础滚动：gun.js ?幻灯片：gun.js+focusimg.js 51
Thank You 52

More Related Content

箩蚕耻别谤测插件开发