[Javascript] 插件封装

最新推荐文章于 2024-07-04 23:44:45 发布

chenxiaodan_danny

最新推荐文章于 2024-07-04 23:44:45 发布

阅读量3.5k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/chenxiaodan_danny/article/details/47317061

版权

JS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

学习小结，如有错误，欢迎指正

参考自：http://blog.csdn.net/anihasiyou/article/details/40394053

javascript插件封装主要分成两类：

* 类级别封装-相当于jQuery类的静态函数

* 对象级别封装

一. 类级别封装方法

1.单个方法封装

//封装
jQuery.alert = function(name) {
    alert(name);
}

//调用$.alert('aa')或jQuery.alert('aa')
$.alert('Mike');

2.多个方法封装，调用$.warn('aa')或者jQuery.warn('aa')

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
       jQuery.warn('Mike');
  });

});

//封装
jQuery.extend({
  alert: function(name) {
      alert("alert:" + name);
  },
  warn: function(name) {
      alert("warn:" + name); 
  }
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

3.域名调用，并封装多个方法

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){  
       //调用
       jQuery.messager.warn('Mike');
  });

});

//封装
jQuery.messager = {

  alert: function(name) {
      alert("alert:" + name);
  },
  warn: function(name) {
      alert("warn:" + name); 
  }

}

</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

二. 对象级别的插件开发

形式1：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){ 
       //重要:$.extend(obj)扩展的为jQuery类的静态方法调用可采用如$.alert() 或直接alert()
       //$.fn.extend(obj)扩展的为对象的方法，因此调用不能用$.alert(),要直接alert()
       //调用
       alert('Mike');
       //报错
       //$.alert('Mike');
  });

});

//声明一个函数并立即执行函数，用$(形参)代替jQuery实参
$(function($) {
    $.fn.extend({
        alert: function(name) {
            alert(name);
        }
    });
}(jQuery));
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

形式2

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){ 
       //正确调用方式
       $('body').jAlert('Mike');
       //报错
       //$.jAlert('aa');
       //报错
       //jAlert('aa'); 
  });

});

//声明一个函数并立即执行函数，用$(形参)代替jQuery实参
$(function($) {
    //这种方式使得调用方式为$(element).jAlert('aaa'),其他方式$.jAlert('aa')或者jAlert('aa')都会出错
    $.fn.jAlert = function(name){
                alert(name)
    }
}(jQuery));
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

3.options控制插件

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){ 
       //正确调用方式
       $(this).jAlert();
  });

});

//声明一个函数并立即执行函数，用$(形参)代替jQuery实参
$(function($) {
    $.fn.jAlert = function(options){
        var defaults = {
           color: '#fff',
           background: '#000'
        };
      options = $.extend({}, defaults, options);
       //$(this).css({'color': options['color')});
    $(this).css({'color': "" + options['color'], 'background': "" + options['background']});
     
    }; 
}(jQuery));
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

3.暴露设置、暴露函数、私有设置、私有函数

暴露与暴露函数使得插件可扩展

暴露设置，用户使用时可设置如$.fn.hilight.defaults.color

暴露函数,用户可重写暴露的函数如$.fn.hilight.format = function(){}

有一点注意：

调用插件时$(element).hilight(), 则插件内操作元素如设置样式等，都是针对该element，在插件内通过$(this)获取element,

经过调试，如hilight插件，return this.each(function(...))是指对每个符合要求的element操作，如$('p'),对所有<p>标签操作，如果插件内不用return this.each,也会对标签内的所有<p>操作，但是方法只执行了一次

// 创建一个闭包    
(function($) {    
  // 插件的定义    
  $.fn.hilight = function(options) {    
    debug(this);    
    // build main options before element iteration    
    var opts = $.extend({}, $.fn.hilight.defaults, options);    
    // iterate and reformat each matched element    
    return this.each(function() {    
      $this = $(this);    
      // build element specific options    
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;    
      // update element styles    
      $this.css({    
        backgroundColor: o.background,    
        color: o.foreground    
      });    
      var markup = $this.html();    
      // call our format function    
      markup = $.fn.hilight.format(markup);    
      $this.html(markup);    
    });    
  };    
  // 私有函数：debugging    
  function debug($obj) {    
    if (window.console && window.console.log)    
      window.console.log('hilight selection count: ' + $obj.size());    
  };    
  // 定义暴露format函数    
  $.fn.hilight.format = function(txt) {    
    return '<strong>' + txt + '</strong>';    
  };    
  // 插件的defaults    
  $.fn.hilight.defaults = {    
    foreground: 'red',    
    background: 'yellow'    
  };    
// 闭包结束    
})(jQuery);