插件心得~~~
插件:
什么是: 拥有独立HTML内容,CSS样式和JS功能的网页部分。
为什么: 重用
何时: 只要页面中部分功能可能反复使用
选择: 3种来源:
1. jQuery官方: jQuery UI
1. 从官方下载
2. 按插件的要求,定义HTML内容
3. 先引入插件的css文件
4. 引入jquery.js和插件.js
5. 在自定义脚本中,找到插件的父元素,调用插件API
$("插件父元素").插件API()
插件API和插件名相同
特点:
侵入性: 插件根据自身的需要,为元素自动添加样式和属性。
优点: 简单!
缺点: 不便于维护!
2. 第三方插件:
3. 自定义插件:
前提: 已经用HTML,CSS,JS实现了插件效果
2种风格:
1. jQuery UI式(侵入式)
何时: 小范围使用,不考虑过多变化时——简单
如何:
封装:
1. 将插件的css提取到一个专门的.css文件中
要求: 一个插件内的css选择器必须以统一的父元素器开头!
2. 在专门的.js文件中,为jQuery类型添加自定义的API
在自定义API中,做两件事:
1. 自动查找子元素,侵入class和自定义扩展属性
2. 事件绑定
使用:
1. 按插件要求编写HTML,不用带class
2. 引入插件的css
3. 引入jquery.js和插件.js
4. 查找插件元素的父元素,调用插件函数
$("#my-accordion").accordion()
2. Bootstrap式(DIY式)
何时: 大范围公开使用时,必须考虑各种变化——可维护
如何:
封装:
1. 将插件的css提取到一个专门的.css文件中
要求: 一个插件内的css选择器必须以统一的父元素器开头!
2. 在插件.js中,自动查找带自定义扩展属性的元素,自动绑定事件。
使用:
1. 按插件要求编写HTML
2. 引入插件css
手动在HTML的元素上按需定义class
3. 引入jquery.js和插件.js