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 相关文章推荐
jquery插件制作教程 txtHover
Aug 17 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
node后端服务保活的实现
Nov 10 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
详解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-MySQL教程归纳总结
2008/06/07 PHP
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
如何用Python 加密文件
2020/09/10 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
护理学应聘自荐书范文
2014/02/05 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
python在package下继续嵌套一个package
2022/04/14 Python