《Jquery插件原理》.pdf

Chrome 开发 || 前端开发 QQ 群:186758632 Jquery 插件原理 对象级别的插件开发要用闭包的形式 对象级别插件开发的两种基本闭包形式 可以防止prototype 或者其他库的$冲突和变量污染等 假如我们要开发这么一个功能的插件 这里有个问题，就是说，如果我们开发一个可以互逆的插件 比如 1 Chrome 开发 || 前端开发 QQ 群:186758632 看起来需要声明多个函数的名字 但通常在写一个插件的时候，都是用一个名字来包含 所以我们需要接受选项参数来控制插件的行为 default 是指默认参数 调用方式 这句是把默认参数和赋值参数组合 extend 方法可以参考jquery 还有一种方式，不常用，暴露插件的默认设置，可以让使用者全局修改 2 Chrome 开发 || 前端开发 QQ 群:186758632 这种做法是暴露option 可以让使用者去重写默认选项 也可以传递参数进行覆盖 这种方式比较灵活 暴露插件设置，当时要暴露插件的一些函数 3 Chrome 开发 || 前端开发 QQ 群:186758632 实战开发jQueryTootip 插件开发 HTML 结构 = 4 Chrome 开发 || 前端开发 QQ 群:186758632 作用是移动上这个div 出现一个tooltip 首先创建一个闭包 关于为什么开头加分号? 分号 这是为了防止和别的文件一起打包压缩的时候因为其他文件可能末尾没有分号 而引起错误的一个常规做法 5 Chrome 开发 || 前端开发 QQ 群:186758632 我们用构造函数的形式来实现插件 这条判断我们只对div 生效 下面的controller 待会解释 第一个this 是 指示$(xxxx)的 第二个this 是指示 each 中的每一个对象 6 Chrome 开发 || 前端开发 QQ 群:186758632 创造构建函数 先创建个空的公开方法，用来干啥待会再说 回到extend 方法，我们完善这个方法 7 Chrome 开发 || 前端开发 QQ 群:186758632 我们现在已经可以这样使用插件了 只是还没实际效果 8 Chrome 开发 || 前端开发 QQ 群:186758632 因为要显示个tooltip，我们先建立个tooltip 的dom，我们写一个私有方法 顺便再option 中加一个可以让用户自己定制tooltip 宽度的option 好 这样我们就添加了tooltip 字段到body 中，当然需要定位 然后我们需要给DIV 绑定鼠标时间来触发 9 Chrome 开发 || 前端开发 QQ 群:186758632 然后回到tooltip 方法中，我们实现定位 现在看起来是这样的