`
AngelAndAngel
  • 浏览: 236978 次
  • 性别: 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操作...

    ApiCloud 2048 H5版源码

    在ApiCloud中开发H5版2048,首先需要创建一个项目,然后引入必要的前端库,如jQuery或其他轻量级框架,用于处理DOM操作和事件监听。接着,你需要设计一个数据结构来存储棋盘状态,通常是一个二维数组。游戏逻辑通过...

    加密网页数据获取初探.pdf

    二是网页源代码中的两个Java Script(一种具有函数优先的轻量级,解释型或即时编译型的编程语言)文件:jquery.min.js、dealq8ZH16HCv.min.js(以下分别简称J1、J2文件)。 J1主要是解密、解码等内容,例如J1文件...

    javaeye热点阅读

    15. Apache Click框架初探:Click是一个轻量级的Web开发框架,它的易用性和简洁性使得快速构建应用变得可能。 16. Spring AOP详解:AOP(面向切面编程)是Spring的重要特性,用于实现如日志、权限检查等功能的横切...

    JEECG_v3开发指南v3.2.pdf

    #### 二、JEECG框架初探 - **演示系统**:文档提供了JEECG框架的演示系统,以便开发者更好地理解其工作原理和技术特点。 - **示例代码**:提供了具体的示例代码,帮助开发者了解如何使用JEECG进行开发。 #### 三、...

    JEECG_v3开发指南v3.3

    - **技术背景**:本指南的编写背景是基于当前Web UI框架(如EasyUI、JqueryUI、Ext、DWZ)的成熟度以及它们在统一系统界面方面的应用。随着这些框架的不断发展和完善,代码生成器能够生成更为规范且统一的界面代码,...

    PokemonPokedex

    《神奇宝贝图鉴项目:JavaScript实现的初探》 神奇宝贝图鉴,即"Pokedex",是《神奇宝贝》系列游戏中一个重要的元素,它记录了各种神奇宝贝的信息,包括属性、技能、进化链等。本项目名为"PokemonPokedex",主要...

Global site tag (gtag.js) - Google Analytics