Jquery实现$.fn.extend和$.extend函数


Posted in Javascript onApril 14, 2016

前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数。

其他的不多说,直接切入主题吧!

先来看看这两个函数的区别:

  $.fn.extend是为查询的节点对象扩展方法,是基于$的原型扩展的方法

  $.extend是扩展常规方法,是$的静态方法。

我们之前写的代码看一下:

(function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {
  
        },
        each: function (callback) {
 
        }      
      }
      _$.prototype.Init.prototype = _$.prototype;       
      window.$ = window.JQuery = _$;
    })(window);

这个是主体的代码。

我来先来扩展$.fn.extend方法:

 这个方法的初衷是我们扩展之后可以用$("").newMetod()这样访问,实际上就是给$原型加一个extend方法。这中间的fn其实类似于命名空间的作用,没什么实际的意义。为的是和 $.extend作区分。

    熟悉原型的其实一看就知道:让$.fn指向$的原型不就行了?

于是我们就有了下面一段代码: _$.fn = _$.prototype;

接下来我们就来加上extend方法了:    

var isObj = function (o) {
      return Object.prototype.toString.call(o) === "[object Object]";
    }
    _$.fn.extend = function (obj) {
      if (isObj(obj)) {
        for (var i in obj) {
          this[i] = obj[i];
        }

      }
    }

 这段代码中isObj的作用是判断传入的参数是不是object对象, _$.fn.extend      这个方法其实和_$.prototype.extend 一样的,大家看一下,这个代码可能和JQUERY源码不太一样,我是按照自己的意思写的。

下面我们来实现$.extend方法,刚才已经说过了,这个方法其实是为$加一个静态方法,代码如下:

$.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }

  你会发现两个方法是一样的,不过你仔细琢磨一下,是不一样的:

  _$.fn.extend里面的this其实是代表$.prototype,  $.extend 里面的this代表的是$。

这两个方法我们实现了,奉上全部代码: 

(function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {

        },
        each: function (callback) {

        }
      }
      _$.prototype.Init.prototype = _$.prototype;
      _$.fn = _$.prototype;
      var isObj = function (o) {
        return Object.prototype.toString.call(o) === "[object Object]";
      }
      _$.fn.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }
      _$.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }
      window.$ = window.JQuery = _$;
    })(window);

使用方法其实就是

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

代码和Jquery源码不一样,我这是为了简化写的方法,大家主要是要琢磨里面的思想,谢谢大家的阅读。

Javascript 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
jQuery动态添加
Apr 07 Javascript
SVG描边动画
Feb 23 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
redux-saga 初识和使用
Mar 10 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
详解Jquery实现ready和bind事件
Apr 14 #Javascript
一起学写js Calender日历控件
Apr 14 #Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 #Javascript
原生js实现autocomplete插件
Apr 14 #Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 #Javascript
基于jQuery实现音乐播放试听列表
Apr 14 #Javascript
js仿3366小游戏选字游戏
Apr 14 #Javascript
You might like
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
extjs render 用法介绍
2013/09/11 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
python 切片和range()用法说明
2013/03/24 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python3.5安装python3-tk详解
2019/04/26 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
行政助理的职责
2013/11/14 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
商业门面租房协议书
2014/11/25 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
开学典礼观后感
2015/06/15 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
导游词之张家口
2019/12/13 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python