jQuery 2.0.3 源码分析之core(一)整体架构

2020-05-23 06:18:12易采站长站整理

拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。


废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,


不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍


我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧!


github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准


整体架构


jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作、


例如:



$().find().css()
$().hide().html(‘….’).hide().


从上面的写法上至少可以发现2个问题


1. jQuery对象的构建方式


2 .jQuery方法的调用方式


分析一:jQuery的无new构建


JavaScript是函数式语言,函数可以实现类,类就是面向对象编程中最基本的概念



var aQuery = function(selector, context) {
        //构造函数
}
aQuery.prototype = {
    //原型
    name:function(){},
    age:function(){}
}


var a = new aQuery();


a.name();


这是常规的使用方法,显而易见jQuery不是这样玩的


jQuery没有使用new运行符将jQuery显示的实例化,还是直接调用其函数


按照jQuery的书写方式



$().ready()
$().noConflict()


要实现这样,那么jQuery就要看成一个类,那么$()应该是返回类的实例才对


所以把代码改一下:



var aQuery = function(selector, context) {
       return new aQuery();
}
aQuery.prototype = {
    name:function(){},
    age:function(){}
}


通过new aQuery(),虽然返回的是一个实例,但是也能看出很明显的问题,死循环了!


那么如何返回一个正确的实例?


在javascript中实例this只跟原型有关系


那么可以把jQuery类当作一个工厂方法来创建实例,把这个方法放到jQuery.prototye原型中



var aQuery = function(selector, context) {
       return  aQuery.prototype.init();
}
aQuery.prototype = {
    init:function(){
        return this;
    }
    name:function(){},
    age:function(){}
}


当执行aQuery() 返回的实例:


 


很明显aQuery()返回的是aQuery类的实例,那么在init中的this其实也是指向的aQuery类的实例


问题来了init的this指向的是aQuery类,如果把init函数也当作一个构造器,那么内部的this要如何处理?