码迷,mamicode.com
首页 > Web开发 > 详细

jQuery extend 实现代码封装

时间:2016-10-15 11:35:38      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

jQuery 有两种方式封装代码 $.extend 和 $.fn.extend,我们也称为封装插件

$.extend DEMO

// 封装
$.extend({
  say:function(options){ // options 也可以是多个参数 a, b, c
    var name= options.name|| ‘‘;
    var words = options.words || ‘‘;
    document.write(name + ‘ say: ‘ + words);
  }
})

// 调用
$.say({ // options 是多个参数时,$.say(a, b, c);
  name:‘Tom‘,
  words:‘hello‘
});
// 输出 Tom say: hello

$.fn.extend DEMO

<div id="man">man</div>
// 封装
$.fn.extend({
  talk:function(options){
    var defaults = {
        words:‘something‘
    }
    var opts = $.extend(defaults, options);
    var obj = $(this);
    obj.html(defaults.words);
  }
})

// 调用
$(‘#man‘).talk({ words:‘hi‘ });

由此可见,$.extend 可以直接调用,$.fn.extend 需要基于对象来调用

jQuery extend 实现代码封装

标签:

原文地址:http://www.cnblogs.com/murespace/p/5962812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!