您的位置：首页 > Web前端 > JavaScript

[Javascript] 插件封装

2017-04-17 16:45 274 查看

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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航