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提交表单ajax查询实例代码
Oct 07 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
Html5生成验证码的示例代码
May 10 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
php数组和链表的区别总结
2019/09/20 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
python基本语法练习实例
2017/09/19 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
党员一句话承诺大全
2014/03/28 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
Java移除无效括号的方法实现
2021/08/07 Java/Android
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server