IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      你有没有封装过jQuery插件,你怎么实现的?

      • 发布时间:
        2019-10-21
      • 版权所有:
        云和教育
      • 分享:

      jQuery插件开发的流程分析

      需求:为了在jquery对象的原型上添加一个方法,该方法能实现jquery源码没有实现的功能。这样,用jquery选择器选择的dom对象就可以直接调用该方法,实现相应的业务逻辑 。

      一、外部包裹自运行函数

      1、首先所有的代码应该用一个自执行函数包裹 (为了避免全局变量的污染)。

      2、在自执行函数前最好加一个; ( ! )    (为了和前面加载的js进行分隔,避免出错)。

      3、把window, document , jQuery 这些全局变量传入自运行函数中,使其成为局部变量,从而提高执行速度。

      配图1 你有没有封装过jQuery插件.jpg

      二、构建自定义对象

      要把插件扩展的方法要完成的业务逻辑以构造函数+原型的方式封装到一个自定义对象中。

      1、把对象需要的属性构建在构造函数中。

      2、把对象需要的方法构建在原型上。

      配图2 你有没有封装过jQuery插件.jpg

      3、对象要预留接口,允许用户传入自定义的设置

      (1)this.defauts :  默认设置

      (2)构造函数允许从外部传入配置  opt

      (3)用$.extend()方法把默认设置和用户自定义设置进行合并 (如果用户没有传入相应的配置,则使用默认值,如果传入,则使用用户自定义的值)。

      配图3 你有没有封装过jQuery插件.jpg

      三、基本自定义对象,实现在jquery的原型上添加新方法

      1、通过 $.fn.myPlugin ,在jquery的原型上添加新方法,这样jquery的所有实例化对象都可以调用该方法,实现自定义对象所构建的功能。

      配图4 你有没有封装过jQuery插件.jpg

      2、在方法内部 :

      (1)new 出来一个对象的实例化对象,并执行所需的方法 (在new的时候,把相应的参数传给构造函数)。

      (2)最后用return  把this返回,从而实现jquery方法的链式调用。

      配图5 你有没有封装过jQuery插件.jpg

      四、封装后插件的使用

      配图6 你有没有封装过jQuery插件.jpg

      (1)先引入jquery.js。

      (2)再引入封装好的jquery插件。

      (3)根据需要,用jquery选择器选择需要实现功能的dom,直接调用插件中的方法。