提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery是如何架构的.

jQuery架构 如何
2023-09-11 14:22:24 时间

心里一直有个疑问.

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即做方法用,又当对象用的基本理论.

相关文章