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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
微信小程序入门之指南针
Oct 22 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 前一天或后一天的日期
2008/06/28 PHP
PHP注释实例技巧
2008/10/03 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python input函数使用实例解析
2019/11/22 Python
Python字符串三种格式化输出
2020/09/17 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
小学体育教学反思
2014/01/31 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
天堂的孩子观后感
2015/06/11 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
基于Python实现射击小游戏的制作
2022/04/06 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS