编写 jQuery 插件

最新推荐文章于 2020-02-27 09:42:00 发布

cathar

最新推荐文章于 2020-02-27 09:42:00 发布

阅读量286

点赞数

分类专栏： JavaScript 文章标签： jquery 扩展插件

本文链接：https://blog.csdn.net/cathar/article/details/55815760

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery.extend():将两个或更多对象的内容合并到第一个对象。

语法：jQuery.extend( target [, object1 ] [, objectN ] )

target
类型: Object：一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
object1
类型: Object：一个对象，它包含额外的属性合并到第一个参数
objectN
类型: Object：包含额外的属性合并到第一个参数

语法：jQuery.extend( [deep ], target, object1 [, objectN ] )

deep
类型: Boolean
如果是true，合并成为递归（又叫做深拷贝）。

<!--常用的插件开发模式：合并 defaults 和 options 对象，并且不修改 defaults 对象。 -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="log"></div>

<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
</script>

</body>
</html>

defaults – {“validate”:false,”limit”:5,”name”:”foo”}
options – {“validate”:true,”name”:”bar”}
settings – {“validate”:true,”limit”:5,”name”:”bar”}

jQuery.fn.extend()：一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

语法： target [, object1 ] [, objectN ] )
jQuery.fn.extend()方法继承了jQuery原型($.fn)对象，以提供jQuery原型新的方法，可以链式调用jQuery()函数。

编写jQuery Plugin原则

简单来讲：要设置默认值，并允许用户修改默认值，或者运行时传入其他值。

给$.fn绑定函数，实现插件的代码逻辑；
插件函数最后要return this;以支持链式调用；
插件函数要有默认值，绑定在$.fn..defaults上；
用户在调用时可传入设定值以便覆盖默认值。

插件示例一：扩展默认参数及方法

$.fn.highlight = function (options) {
    // 合并默认值和用户设定值:
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}

// 设定默认值:
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}

<!-- HTML结构 -->
<div id="test-highlight">
    <p>如何编写<span>jQuery</span> <span>Plugin</span></p>
    <p>编写<span>jQuery</span> <span>Plugin</span>，要设置<span>默认值</span>，并允许用户修改<span>默认值</span>，或者运行时传入<span>其他值</span>。</p>
</div>

$.fn.highlight.defaults.color = '#659f13';
$.fn.highlight.defaults.backgroundColor = '#f2fae3';
$('#test-highlight p:first-child span').highlight();
$('#test-highlight p:last-child span').highlight({
    color: '#dd1144'
});

插件示例二：实现连接跳转（注意DOM-jQuery实例转换）

$.fn.external = function () {
    // return返回的each()返回结果，支持链式调用:
    return this.filter('a').each(function () {
        // 注意: each()内部的回调函数的this绑定为DOM本身!
        var a = $(this);
        var url = a.attr('href');
        if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
            a.attr('href', '#0')
             .removeAttr('target')
             .append(' <i class="uk-icon-external-link"></i>')
             .click(function () {
                if(confirm('你确定要前往' + url + '？')) {
                    window.open(url);
                }
            });
        }
    });
}
//调用
$('#test-external a').external();

插件示例三：扩展多个方法示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.fn.extend demo</title>
  <style>
label { display: block; margin: .5em; }
     </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>

<script>
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

// Use the newly created .check() method
$( "input[type='checkbox']" ).check();
</script>

</body>
</html>