插件心得~~~

 插件:
 什么是: 拥有独立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

posted @ 2018-11-12 17:39  lianer3588  阅读(194)  评论(0编辑  收藏  举报