前端工程化02-复习jQuery当中的插件开发

2、jQuery插件开发

在我们开发的时候、有时候jQuery提供的方法并不能满足我们的需求，如果我们想给jQuery扩展一些其他的方法，那这种情况下，可能会需要写一个插件

jQurey官网：jquery.com

例如一些、图片懒加载插件、滚动的插件、响应式的插件、ui插件，很多很多。

那我们自己怎么编写一个插件，一般面试会问，有没有手写过一些插件？比如javaScript的一些库，有没有造过轮子等

jQuery插件其实就是：编写一些新的方法，并将这些方法，添加到Query的原型上

那我们如何编写插件？

新建一个插件对应的js文件（命名规范：jquery.插件名.js)

在立即执行函数中编写插件，这样可以避免插件中的变量与全局变量冲突。

在JQuery的原型对象上新增一些方法。

最后在html中导入就可以像使用其他jQuery对象方法一样使用了

到此就开发完一个jQuery的插件了。

开发一个jquery.showlinklocation.js的插件

这个插件的效果是，为页面上的每个a标签都拼接上他的网址，并设置a标签的颜色为红色

创建一个文件名为jquery.showlinklocation.js

//立即执行函数
;(function(window,$){
   //在jquery的原型上，我们添加了一个 showlinklocation方法
   //需要遍历a元素
   $.fn.showlinklocation=function(){
      //让他只能是个a
      console.log(this);//jQuery对象
      //this.filter('a').append('(http://www.baidu.com)')
      this.filter('a').each(function(index,element){
         console.log(element);
         console.log(this,"this也是a");
         //a转成jq对象
         var $a=$(this);//这个是函数的this
         //取jq对象其中的一个属性
         var link=$a.attr('href');
         //拼接路径到字的后边
         this.append(`(${link})`)
      })
      //这个this是jq对象
      return this;
   }
})(window,window.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>
  
<a href="https://www.jd.com">京东商城</a>
<a href="https://www.taobao.com">淘宝商城</a>
<a href="https://www.biyao.com">必要商城</a>
<!-- 导入jquery文件 -->
<script src="./js/jquery.js"></script>
<!-- 引入我们的插件 -->
<script src="./utils/jquery.showlinklocation.js"></script>
<script>
    // 监听文档完全解析完毕
    $(function(){
        $('a').showlinklocation().css("color",'red');
    });
</script>
    
</body>
</html>