封装自己的jquery插件

js 封装插件

//module.js
(function(window) {
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
  }
  function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
 } function otherFun() { //内部私有的函数 console.log('otherFun()') } //暴露行为 // window.myModule = { foo, bar } //ES6写法 window.myModule={foo:foo,bar:bar} })(window)

调用

<body>
  <script src="./module.js"></script>
  <script>
    myModule.foo()    //foo() www.baidu.com
    myModule.bar()    //bar() www.baidu.com
                      //otherFun()
  </script>
</body>

jq封装插件

jquery插件三种开发方式：

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建

通常我们使用第二种方法来进行简单插件开发

1.第一种方式

而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('test'); //带参调用

但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。

2.第二种方式

;(function($){      
    $.fn.extend({      
        pluginName:function(opt,callback){      
　　    　　//bodying
        }      
    })      
})(jQuery);

或者

;(function($) {        
    $.fn.pluginName = function() {      
　        // bodying      
    };      
})(jQuery);

封装一个点击按钮，弹出指定信息的插件

myplugin.js文件

// 封装的插件 myplugin.js文件
$(function () {
  $.fn.myplugin = function (options) {
      var defaults = {
          Event : "click", //触发响应事件
          msg : "Holle word!" //显示内容
      };
      var options = $.extend(defaults, options);
      var $this = $(this); //当然响应事件对象
      //功能代码部分
      //绑定事件
      // $this.live(options.Event, function (e) {
      //     alert(options.msg);
      // });
      $this.on(options.Event,function (e) {
            alert(options.msg);
        });
  }
});

// 采用第二种方式 $.fn+插件名
// $.fn.pluginName = function() {
//   //your code here
// }
// 存在问题定义了一个全局的testObj，这样对于插件的兼容等等各个方面都不好。万一别的地方用到了testObj，那么你的代码就悲催了！现在我们把上面的代码包装起来，用一个自调用匿名函数(有时又叫块级作用域或者私有作用域)包裹，就不会出现这个问题了！包括js插件的开发，也是一样的，我们用一个自调用匿名函数把自己写的代码包裹起来，就可以了！

// 当我们研究大牛的代码的时候，前面经常看到有“；”，那是为了避免代码合并等不必要的错误。

// ;(function(){
// })()
为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写

(function ($) {
    //这里放入插件代码
})(jQuery);

但是为了让你开发的插件应用更加广泛，兼容性更加好，还要考虑到用插件的人的一些特殊的做法，例如，有些朋友为了避免jquery和zeptojs冲突，将jquery的前缀“$”,修改为“jQuery”，还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行，那么我们的做法是，把代码包裹在如下里面：

;(function($,window,document,undefined){
    //我们的代码。。
})(jQuery,window,document);

//myplugin.js
//未避免出现问题，需在插件的前后加入分号（分号的增加并不会影响程序的运行）
;(function($){   //jQuery环境下封装自己的插件，首先为避免与其他库的冲突，需要在插件的后面传一个jQuery参数进去，对应的函数里面的参数写入$;(防止污染$函数)
  $.fn.myplugin = function (options) {
      var defaults = {
          Event : "click", //触发响应事件
          msg : "Holle word!" //显示内容
      };
      var options = $.extend(defaults, options);
      var $this = $(this); //当然响应事件对象
      //功能代码部分
      //绑定事件
      // $this.live(options.Event, function (e) {
      //     alert(options.msg);
      // });
      $this.on(options.Event,function (e) {
            alert(options.msg);
        });
  }
})(jQuery)

调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <input type = "button" id = "test" value = "这是一个简单的插件调用" /  >
  </div>
  <!-- 需要引入jq -->
  <script src="../report/js/jquery.min.js"></script>
  <!-- 需要引入自己的插件 -->
  <script src="./myplugin.js"></script>
  <script>
    $(function () {
        //绑定元素事件
        $("#test").myplugin({
            Event : "click", //触发响应事件
            msg : "插件原来就是这么简单!" //显示内容
        });
    });
  </script>
</body>
</html>

一、开头分号作用：
本来别人的代码也正常工作，只是最后定义的那个函数没有用分号结尾而以，然后当页面中引入我们的插件时，报错了，我们的代码无法正常执行。
原因是我们用来充当自调用匿名函数的第一对括号与上面别人定义的函数相连，因为中间没有分号嘛，总之我们的代码无法正常解析了，所以报错。所以好的做法是我们在代码开头加一个分号，这在任何时候都是一个好的习惯。
二、用自调用匿名函数包裹你的代码：
JavaScript中无法用花括号方便地创建作用域，但函数却可以形成一个作用域，域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中，那么就不会污染全局命名空间，同时不会和别的代码冲突。可以防止与同名全局变量冲突。
(function() {
//内容
})()

封装自己的jquery插件

js 封装插件

猜你喜欢