读jQuery源码之开篇

2024-04-27 15:02:08

字体：大中小

来源：转载

供稿：网友

好久没有写博客了，不是我忘记了这个习惯，而是这一年半的时间我在经历技术的转型，所以在.NET上面的技术没有太多的深入了。

从再次回到凡客开始，我已经从一名有3年开发经验的.NET工程师向前端（H5）全面转型。至于为什么转型，不在这篇博客赘述了！

去年5月开始，我把自己当作一个绝对的新手，从最基本的，最原始的技术学起（HTML，CSS，DIV布局，PS切图，javascript等等等等）。

到现在，也还在继续学习。jQuery源码学习，我一直觉得是必须的，不是要多么熟悉使用，当然源码熟悉了，使用也就水到渠成了。学习jQuery源码的过程是一个加深认识和深入学习Javascript的过程，这非常重要。

这个序列的博客，我没打算写jQuery的太多细节部分，而是找出我学习过程中，我自己觉得比较有趣，比较能够加深对javascript的认识的部分写下来与大家分享。如果大牛路过有什么吐槽，也请随意，我乐意接受并改进。

我选择了jQuery2.1.4目前最新的版本来学习（3.0版本还没正式发布），因为省去一些兼容性繁琐的代码部分，更能清晰看到jQuery的本质。

如果后续更新了版本，我会改到最新版来学习，总之，紧跟最新版的jQuery学习来分享。

这个序列的博客会参考书籍《jQuery技术内幕:深入解析jQuery架构设计与实现原理》，以及jQuery官网，我会尝试更多的代码实践来记录博客里面。

一，最粗略的骨架如下

    (function(global, factory) {        if (typeof module === "object" && typeof module.exports === "object") {            module.exports = global.document ?                factory(global, true) :                function(w) {                    if (!w.document) {                        throw new Error("jQuery requires a window with a document");                    }                    return factory(w);                };        } else {            factory(global);        }    }(typeof window !== "undefined" ? window : this, function(window, noGlobal) {        //...    }))

这里主要一个javascript点：匿名函数自调用或者说自执行。这么封装的目的是为了满足Commonjs规范，但是我觉得没什么用，目前seajs吸收AMD和Commonjs的优点，能够很好的满足要求。

而且我相信模块化会成为一个标准，就像HTML5一样很多属性和效果已经不需要js来实现了。

匿名函数自调用或者说自执行，写法有很多，我列举一些如下：

    (function(){console.log(1);})();    (function(){console.log(2);}());    !function(){console.log(3);}();    +function(){console.log(4);}();    -function(){console.log(5);}();    ~function(){console.log(6);}();    void function(){console.log(7);}();    new function(){console.log(8);}();