JavaScript基础学习——jQuery插件开发

最新推荐文章于 2024-01-05 19:47:22 发布

梦起孟心

最新推荐文章于 2024-01-05 19:47:22 发布

阅读量407

点赞数

分类专栏： JavaScript 文章标签： js javascript jquery jquery插件

本文链接：https://blog.csdn.net/qq_41890177/article/details/114805658

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、什么是jQuery插件

jQuery插件是对jQuery框架利用原型的一个扩展。插件通常是一个完备功能的封装，它是JQ功能的一个补充或扩展。

注意：开发JQ插件，该插件是依赖于JQ，所以必须先引入JQ，再引入插件。

二、jQuery的插件主要分3种类型：

1、封装对象方法的插件（原型扩展）（主要的开发方式）：这种是大多数采用的方法。操作原型，对jQuery框架侵入性较小。

2、封装全局函数的插件（静态扩展）：装方法或插件直接挂到类上。

3、选择器插件：对JQ选择DOM的补充或扩展。

三、命名规范

1、jquery.插件名.js（开发模式）

2、jquery.插件名.min.js（产品模式，去bug调试，删除了回车、注释和多余的空格）

四、插件中$的冲突

1、JQ让渡方法，让JQ让出对$的占用
jQuery.noConflict() -- 解绑jQuery对$的引用，其后可以用jQuery代替$

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">box</div>
</body>
<script src="jquery.js"></script>
<script src="jquery.test.js"></script>
<script>
   jQuery.noConflict()
   console.log($.getEl('box'));//null
   jQuery('#box').css('color', 'red')
</script>

</html>

js代码

var $={
  getEl:function(id){
    return document.getElementById(id)
  }
}

2、深度让渡
jQuery.noConflict(true) -- $和jQuery都不能用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">box</div>
</body>
<script src="jquery.js"></script>
<script src="jquery.test.js"></script>
<script>
   var jq=jQuery.noConflict(true)
   console.log($.getEl('box'));
   jq('#box').css('color','red')
</script>

</html>

5.在插件中使用闭包

目的：为了避免变量的全局污染。IIFE是实现闭包的一种方式。

实现方式：
;(function(){
function 插件名(){
// 实现插件功能的代码
}

jQuery.prototype.插件名 = 插件名
})();

或：
;(function($){
function 插件名(){
// 实现插件功能的代码
}

$.fn.插件名 = 插件名
})(jQuery);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">good day</div>
  <div id="test">test</div>
</body>
<script src="jquery.js"></script>
<script src="jquery.color.v3.js"></script>
<script>
  $('.box').color();

  //链式调用
  $('.box').css('border','1px solid #999').css('background','yellow')
</script>

</html>

js代码

;(function($){
  var that;
  function _color(){
    that=this
    $(this).css('color','red')
    return that
  }
  $.fn.color=_color
})(jQuery)

六、jQuery插件机制

第一种，对jQuery函数prototype属性的别名（jQuery.fn）进行扩展。
1、在原型上绑定单个方法
;(function($){
$.fn.插件名 = function(参数){
// 实现插件功能的代码
}
})(jQuery);

2、批量绑定方法
;(function($){
$.fn.extend({
// 扩展方法1
    方法1:function(参数){
       // 实现插件功能的代码
  },
    // 扩展方法2
    方法2:function(参数){
       // 实现插件功能的代码
  },
    // 扩展方法N .....
})
})(jQuery);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>this is a p</p>
</body>
<script src="jquery.js"></script>
<script src="jquery.chsize.js"></script>
<script>

  $('p').chSize('400px','100px')
  $('p').setHtml("这是修改后的内容")

  console.log($('p').getHtml());

</script>
</html>

js代码

;(function($){
  //在原型上绑定单个方法
  $.fn.chSize=function chSize(w,h){
    $(this).width(w)
    $(this.height(h))
  }

  //批量绑定方法
  $.fn.extend({
    //扩展方法1
    setHtml:function(htmlText){
      this.html(htmlText)
      return this
    },
    getHtml:function(){
      return this.html();
    }
  })
})(jQuery)

第二种，采用jQuery.extend()方法进行（静态）扩展。
语法格式：
;(function($){
$.extend({
  方法名: function(参数) {
       // 实现插件功能的代码
  }
});
})(jQuery);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>this is a p</p>
</body>
<script src="jquery.js"></script>
<script src="jquery.formatdate.js"></script>
<script>
  console.log($.formatDate('feel what'));
</script>
</html>

js代码

; (function ($) {
  $.extend({
    formatDate: function (message) {
      var now = new Date(),
        y = now.getFullYear(),//获取年
        //js中的月份是从0开始的
        m = now.getMonth() + 1 >= 10 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1),
        d = now.getDate(), // 获取日期
        h = now.getHours(),
        min = now.getMinutes(),
        s = now.getSeconds();
      var time = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s;
      return time + ' myLog: ' + message;
    }
  })
})(jQuery)

七、this

在插件开发中，应先this缓存起来。这个this指向的是对象本身。 this可以写成：this或$(this)

八、插件尽可能返回对象本身。

插件的固定格式：
;(function($){
var that;
$.fn.插件名 = function(){
that = this;
// 实现插件功能的代码
}

return that;
})(jQuery);

或：
;(function($){
var that;
$.fn.extend = {
插件名1: function(){
that = this;
// 实现插件功能的代码
},
插件名2: function(){
that = this;
// 实现插件功能的代码
},
插件名3: function(){
that = this;
// 实现插件功能的代码
},
...
}
return that;
})(jQuery);

九、配置参数
如果传的参数是两个以上，最好将参数设置成对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>这是测试内容。</p>
</body>
<script src="./jquery.js"></script>
<script src="./jquery.setattr.js"></script>
<script>
  // $('p').setAttr('400px','200px','20px','#f00','#0ff');

  $('p').setAttr({
    color:'#f00',
    width:'400px',
    fontSize:'20px',
    background:'#0ff',
    height:'200px'
  });

</script>
</html>

js代码

/* ;(function($){
  $.fn.setAttr = function(w,h,s,fc,bc){
    var that = this;
    that.css('width',w)
    that.css('height',h)
    that.css('font-size',s)
    that.css('color',fc)
    that.css('background-color',bc)

    return that;
  }
})(jQuery); */

/* // 改造后：
;(function($){
  $.fn.setAttr = function(config){
    var that = this;
    that.css('width',config.width)
    that.css('height',config.height)
    that.css('font-size',config.fontSize)
    that.css('color',config.color)
    that.css('background-color',config.background)

    return that;
  } */

十、设置默认值

1、默认值设置var 默认值对象 = {值内容}

2、将默认值对象和用户传过来的对象合并成一个新的对象。var settings = $.extend({},默认值,传过来的对象) // 对象合并

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>这是测试内容。</p>
</body>
<script src="./jquery.js"></script>
<script src="./jquery.setattr.js"></script>
<script>
  $('p').setAttr({width:'600px',fontSize:'30px',background:'olive'})
</script>
</html>

js代码

;(function($){
  $.fn.setAttr = function(config){
    var that = this;

    // 默认值设置
    var def = {width:'200px',height:'100px',fontSize: '14px',color:'#fff',background:'red'}
    // 将def和config合并成一个对象。注意：用户传值的对象要写在最后！
    var settings = $.extend({},def,config)

    that.css('width',settings.width)
    that.css('height',settings.height)
    that.css('font-size',settings.fontSize)
    that.css('color',settings.color)
    that.css('background-color',settings.background)

    return that;
  }
})(jQuery);

注意：用户传值的对象要写在最后！

十一、命名空间

把所有方法以私有方法定在命名空间下，然后再结合闭包把方法查询表对外暴露出去。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">box</div>
</body>
<script src="./jquery.js"></script>
<script src="./jquery.namespace.js"></script>
<script>
  $('.box').namespace({fn:'init',txt:'我是前端大咖！'})
  $('.box').namespace({fn:'show'})
  $('.box').namespace({fn:'update'})
</script>
</html>

js代码

;(function($){
  var that;

  var methods = {
    init: function(content){
      console.log(content);
      console.log('init.........')
      // this.html('这init初始化后的内容。')
      this.html(content.txt)
    },
    setData: function(){
      console.log('setData')
    },
    getData: function(){
      console.log('getData')
    },
    show: function(){
      console.log('show')
    },
    update: function(){
      console.log('update')
    },
    destroy: function(){
      console.log('destroy')
    }
  }

  $.fn.namespace = function(option){
    that = this;
    // methods[option.fn]() // 这种方法中的this指向会出问题
    methods[option.fn].apply(that,arguments)
    return that;
  }
})(jQuery);

梦起孟心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础学习——jQuery插件开发

一、什么是jQuery插件jQuery插件是对jQuery框架利用原型的一个扩展。插件通常是一个完备功能的封装，它是JQ功能的一个补充或扩展。注意：开发JQ插件，该插件是依赖于JQ，所以必须先引入JQ，再引入插件。二、jQuery的插件主要分3种类型：1、封装对象方法的插件（原型扩展）（主要的开发方式）：这种是大多数采用的方法。操作原型，对jQuery框架侵入性较小。2、封装全局函数的插件（静态扩展）：装方法或插件直接挂到类上。3、选择器插件：对JQ选择DOM的补充或扩展。三..
复制链接

扫一扫

专栏目录