今天正好有个老朋友聊起来jquery源码，他对于源码不了解，我抱着学习交流的心态，给他讲解了核心实现。(好像自己也鸽了好长时间)

顺便在哪个cdn服务商找个jquery文件打开, 我这里用的1.2.3版本为例，最新版本也差不多，只有两三处变化https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js

源码分析

17-20行传入选择器，返回自身new出来的init方法，估计你们也没用过$()的第二个参数，这里省略掉

var jQuery = window.jQuery = function(selector) {
    return new jQuery.prototype.init(selector);
}

26-27行这就是为什么总是用$开头的原因，挂载到window对象下，属于全局变量

// Map the jQuery namespace to the '$' one
window.$ = jQuery;

36-547行剔除我们不需要的保留核心，留下init方法，内部做了jquery实例与选择器的判断，这里我们忽略掉，简化

jQuery.fn = jQuery.prototype = {
    init: function(selector) {
        var nodes = document.querySelectorAll(selector);
        for (var i in nodes) {
            this[i] = nodes[i];
        }
        return this;
    }
    //此处省略十万字
}

549行来上一段这个，jquery原型链传递给jquery原型下init方法的原型，回头再看new时候的代码，很清楚明了

jQuery.prototype.init.prototype = jQuery.prototype;

完整实现

在jQuery的原型上继续增加功能就很接近初版jQuery了，这里我是简单实现了text()方法

    var jQuery= function (selector) {
        return new jQuery.fn.init(selector);
    }

    jQuery.fn = jQuery.prototype = {
        init: function (selector) {
            var nodes = document.querySelectorAll(selector);
            for (var i in nodes) {
                this[i] = nodes[i];
            }
            return this;
        },
        element: function (callback) {
            for (var i = 0; i < this.length; i++) {
                callback(this[i]);
            }
        },
        text: function (content) {
            if (content == '' || content) {
                this.element(function (node) {
                    node.innerHTML = content;
                })
                return content;
            } else {
                return this[0].innerHTML;
            }
        },
    }

    jQuery.prototype.init.prototype = jQuery.prototype;

    window.$ = jQuery;

结束

核心其实一点不复杂，插件的实现我倒是很喜欢，自身的功能我看来大部分全是用插件实现的，工具自身的巧妙设计加上便利性。

在传统页面制作上jquery一把梭用的很舒服，但MVVM的出现改变了大家的思考方式，只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，对于项目管理轻松不少。

如果有简单需求的单页上，jquery还是有用武之地的，上MVVM只能是徒增麻烦。