`
AngelAndAngel
  • 浏览: 234805 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery 源码初探,一步步实现自己的jquery(二)

阅读更多
  一般的情况下,假如你创建一个js类的实例,需要这样调用构造函数,比如
    
   (function(){
      TestClass=function (param1,param2){
      this.result='start';
      this.attr1=param1;
      this.attr2=param2;
    }
      TestClass.fn=TestClass.prototype={
        add:function(){
        this.result=parseInt(this.attr1)+parseInt(this.attr2);
        alert(this.result);
    },
      equals:function(){
        if(this.attr1==this.attr2){
        this.result=true;
      }else{
        this.result=false;
      }
    alert(this.result);
 }
}
})()
var test=new TestClass(1,2);
test.add();
test.equals();
//TestClass(1,2).add();

    此时你不能像jquery一样用jQuery("x").add()或者$("").add(),那么这个是怎么办到的呢很简单,改版如下:
    
     (function(){
TestClass=function (param1,param2){
  return new TestClass.fn.init(param1,param2);
}
TestClass.fn=TestClass.prototype={
 add:function(){
   this.result=parseInt(this.attr1)+parseInt(this.attr2);
   alert(this.result);
 },
 equals:function(){
  if(this.attr1==this.attr2){
    this.result=true;
  }else{
    this.result=false;
  }

   alert(this.result);
 },
 init:function(param1,param2){
  this.result='start';
  this.attr1=param1;
  this.attr2=param2;
  return this;
 }
}
TestClass.fn.init.prototype=TestClass.fn;
})()
TestClass(1,5).equals();



改动很简单:

  • 1,构造函数变成return new TestClass.fn.init(param1,param2);
  • 2,在TestClass.fn里面加init方法,完成初始化
  • 3,加上TestClass.fn.init.prototype=TestClass.fn;这句话,表示让init方法的prototype指向TestClass的prototype,这样构造函数返回的对象就具有了TestClass.prototype里面定义的方法。

  此时,你就可以直接 TestClass(1,5).equals();这样调用了,当然了,把TestClass换成$也是可行的,只要加上这句
var $=TestClass;
window.$=$;
window.TestClass=TestClass; 

下篇讲解稍微进阶一点的知识。




  
分享到:
评论

相关推荐

    jquery 源码初探,一步步实现自己的jquery(四)

    在本篇《jquery 源码初探,一步步实现自己的jquery(四)》中,我们将深入探讨jQuery库的核心概念,并尝试逐步构建一个简易版的jQuery,以帮助理解其内部机制。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作...

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    JQuery源码详细中文注释_Jquery源码分析_

    1. 选择器:jQuery的核心之一是它的CSS选择器,如$("#id")、$(".class")等,这些选择器基于Sizzle引擎实现,能够高效地定位DOM元素。 2. 链式调用:jQuery对象返回的是一个包含多个DOM元素的集合,可以连续调用方法...

    Jquery源码分析 源码

    《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。深入理解其源码对于...同时,理解源码也能帮助我们更好地利用jQuery,甚至定制自己的工具库。

    jQuery源码分析系列.pdf

    - **源码结构和核心函数**:详细介绍jQuery对象的创建过程,包括`$`或`jQuery`函数的内部实现,以及如何利用这些核心函数来构建和操作DOM元素。 - **工具函数**:剖析jQuery中用于辅助开发的核心工具函数,如选择器...

    jquery源码,3.7.0版本

    jquery源码,3.7.0版本

    Head First jQuery源码

    通过源码,我们可以学习如何构建自己的jQuery插件,以及如何利用`$.fn.extend()`方法。 在学习《Head First jQuery》的源码时,你可以逐个研究这些关键功能的实现,同时结合书中的解释,深入理解jQuery的工作原理。...

    jQuery源码+中文详细注解

    这部分使用了一个立即执行的匿名函数来包裹整个jQuery源码,这样做的目的是形成一个闭包,保护内部的变量不被外部干扰,同时也避免了命名冲突的问题。 ##### 4. 关键字保护 ```javascript var _jQuery = window....

    Head First jquery源码

    《Head First jQuery源码》是一本深入解析jQuery库的书籍,其内容主要涵盖了jQuery的核心功能、设计理念以及实现机制。jQuery是JavaScript的一个库,它极大地简化了网页中的DOM操作、事件处理、动画效果以及Ajax交互...

    jquery源码框架解读

    在前端开发领域,jQuery是一个不可或缺的库,它极大地简化了JavaScript操作DOM、处理事件、创建动画以及实现Ajax交互。这份资料深入解析了jQuery的源码,旨在帮助开发者理解其内部机制,提升技能水平。 jQuery的...

    jquery源码分析

    jquery源码分析,包括入口技术,选择器入口,以及在选择器使用的时候需要注意的优化思路

    jquery api, jquery ui api, jquery源码分析

    jQuery 是一款广泛使用的 JavaScript 库,它的出现极大地简化了网页的 DOM 操作、事件处理、动画效果和Ajax交互。标题中提到的"jQuery API"指的是jQuery提供的各种函数和方法,这些API允许开发者高效地操控网页元素...

    jQuery源码分析视频教程

    jQuery源码分析视频教程总计116课,按照jquery每个区段实现的内容,精确地讲解源码中是怎么实现我们开发中用到的jquery得方法的

    jQuery源码解读

    理解 jQuery 源码有助于我们更好地利用这个库,解决实际问题,甚至定制自己的版本。通过学习源码,你可以了解到如何高效地操作 DOM,如何优雅地处理事件,以及如何编写高性能的 JavaScript 代码。这将极大地提升你的...

    锋利的JQuery第一、二版源码

    源码文件则对应书中的各个章节,读者可以跟随代码一步步学习进阶的jQuery技术。 在学习这些源码时,建议先阅读相关的章节,理解每个例子的目的和实现方式,然后再查看源码。通过这种方式,你可以逐步了解jQuery的...

    jquery 源码分析

    《jQuery源码分析详解》 ...通过对源码的阅读和理解,我们可以更好地运用jQuery,甚至可以为自己的项目编写高性能的插件。无论你是前端开发者还是JavaScript爱好者,理解jQuery源码都将对你的技能提升大有裨益。

    jquery源码(1.4)

    jquery最新源码jquery最新源码jquery最新源码

    jquery源码好不容易找到的与大家分享

    总结,jQuery源码的深度探索是一次宝贵的编程之旅,它让我们看到了一个优秀JavaScript库的设计思想和实现技巧。无论你是初学者还是经验丰富的开发者,深入理解jQuery,都将对你的职业生涯产生深远影响。

    锋利的jQuery 源码

    《锋利的jQuery源码》是一本专注于深入解析jQuery库源码的专业书籍,旨在帮助开发者理解并掌握jQuery的核心原理和实现机制。jQuery是JavaScript库中的一个里程碑,它极大地简化了DOM操作、事件处理、动画效果以及...

Global site tag (gtag.js) - Google Analytics