jquery是如何架构的.

心里一直有个疑问.

jquery是如何做到一个jQuery即可以当方法用比如$();又可以当对象用$.extend();

现在总结一下吧

function method(){}
var m=new method();
m.version="123";
console.log(m.version)   // 打印出123

这段代码表示申明一个对象后,还可以继续为该对象添加属性或方法.

继续往下看:

var m=function(){};
m.version="123";

这个地方仍然可以打印出123;

课时这个地方并没有申明对象,只不过是定义了一个变量方法名而已.

核心一:其实变量方法名也是一个对象

比如上面的代码本质上是这样的

var m=new Function();
m.version="123";

这个就是jQuery为什么可以直接坐位对象使用的原理.

接着看为什么jQuery可以直接做方法用.

核心二:如果构造函数有返回值,运算符new所创建的对象会被丢弃,返回值作为new表达式的值.

function Method(name,age){
    var obj={
        name:name,
        age:age
    };   this.name="我来自本身";
     return obj;
}
var objM=new Method("思思博士",26);
console.log(objM);//打印出obj对象,而没有打印"我来自本身"

有了上面的两个核心理论.就可以构建jQuery了.

(function(window,undefined){
    var jQuery=(function(){    //核心理论二
        var jQuery=function(name,age){
            return new jQuery.prototype.init(name,age);
        };
        jQuery.prototype={
            init:function(name,age){
                return [name,age];
            }
        };
        jQuery.prototype.init.prototype=jQuery.prototype;    //核心理论一.
        jQuery.version="1.7.2";
        return jQuery;
    })();
    window.$=window.jQuery=jQuery;
})(window);

console.log(jQuery.version);console.log(jQuery("思思博士",25))

上面的代码模仿的就是jQuery即做方法用,又当对象用的基本理论.

时间: 2024-11-02 19:57:44

jquery是如何架构的.的相关文章

深入了解jQuery之整体架构

本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http://www.imooc.com/learn/172)后的个人体会以及笔记.在这里感谢艾伦老师深入浅出的讲解!! 先来看看如何生成一个jQuery对象,源码: var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; 当我们使用jQuery('something')或者$('something')时

JQuery框架总体架构(转)

1.1        总体架构 打开源码首先你胡看到这样的代码结构 (function(window,undefined){//jquery code})(window); 1)这是一个自调用匿名函数:在第一个括号内,创建一个匿名函数,第二个括号,立即执行2)为什么创建这个自调用匿名函数?    通过定义一个匿名函数创建一个私有的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间.这一点非常有用,也是js框架必须支持的功能,Jquery呗应用在成千上万的javascriot程序中,必须确保

jQuery源码架构

内容是基于jQuery2.0.3源码架构进行解析,感兴趣的小伙伴可以添加好友一起交流! (function(){ line--(21 , 94) 定义了一些变量和函数 jQuery = function(){}; line--(96 , 283) 给JQ对象,添加一些方法和属性 line--(285 , 347) extend : JQ的继承方法 line--(349 , 817) jQuery.extend() : 扩展一些工具方法 line--(877 , 2856) Sizzle : 复杂

jQuery 源码解析一:jQuery 类库整体架构设计解析

如果是做 web 的话,相信都非要对 Dom 进行增删查改,那这相信大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.getElementsByName...官方提供超长方法 api . jQuery 整体源码,本人也还在阅读中,暂时记录一下.(为什么要看源码,原因很简单---- 一 好好了解一下 jQuery 原理  二 为了装逼显摆).   一  使用 jQuery 时候,首先需引入 jQuery 文件,而之

【深入浅出jQuery】源码浅析--整体架构(转)

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下

【深入浅出jQuery】源码浅析--整体架构

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下

jquery-2.1.4 源码解读(1):jquery架构

本人在研究jquery源码的过程中将同时记录下研究过程,此文将分阶段研究jquery源码,先是jquery的总体架构,然后是内部实现细节. jquery总体结构为: (function(global, factory){ ... //代码1 }(参数1, 参数2)); 此处定义了匿名函数,然后传入参数1和参数2,立即执行. 代码1处为匿名函数的内部定义,其中会判断是否处于commonJS环境,否则的话将执行fanctory(global); 参数1为typeof window !== "unde

jQuery架构剖析

对于jQuery的整体架构,经典之处有三: 1.jQuery的无new构建 2.jQuery的链式调用 3.jQuery的插件接口 想必兄弟姐妹们也觉得这架构不错哈,但有时又畏惧去拜读大量的jQuery源码,只好对它敬而远之了. 哈哈,今天我就将其jQuery架构提炼出来,和大家一同分析研究下,jQuery是怎么实现这三个经典之处的. 提炼的代码如下: 1 <!DOCTYPE html> 2 <head> 3 <title>jQuery</title> 4

js菜鸟进阶-jQuery源码分析(1)-基本架构

导读: 本人JS菜鸟一枚,为加强代码美观和编程思想.所以来研究下jQuery,有需要进阶JS的同学很适合阅读此文!我是边看代码(jquery2.2.1),边翻“javascript高级程序设计”写的,有很多基本知识点我都写了书本对应的章节.有分析得不好的还请各位多多指教,更正! 希望我的分析对大家有所帮助,谢谢! 一.代码构成 (function(global, factory){ if ( typeof module === "object" && typeof mo