[Javascript] 插件封装

来源：互联网发布：网络教育营养学编辑：程序博客网时间：2024/06/05 02:51

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

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

* 对象级别封装

一. 类级别封装方法

1.单个方法封装

[html] view plain copy
//封装  
jQuery.alert = function(name) {  
    alert(name);  
}  
  
//调用$.alert('aa')或jQuery.alert('aa')  
$.alert('Mike');  

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

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

[html] view plain copy
//封装  
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.域名调用，并封装多个方法

[html] view plain copy
<!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：

[html] view plain copy
<!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

[html] view plain copy
<!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控制插件

[html] view plain copy
<!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>操作，但是方法只执行了一次

[html] view plain copy
// 创建一个闭包      
(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);       

0 0