フロントエンドのナレッジ記事へのフォーカスの主点を想起--jQuery実装

jQueryの

jQueryのの原則

参考：https://blog.csdn.net/zhouziyu2011/article/details/70256659

外側のサンドボックスと名前空間$

汚染された宣言したいくつかのグローバル変数を回避するためには、内のコードを入れて、「サンドボックス実行。」jQueryの具体的な実装では、内部のクロージャの即時実行の匿名関数の構造に含まれ、その後、わずか$外の世界へのjQueryこれら2つの変数を公開されています。

(function(window, undefined) {
    // 用一个函数域包起来，就是所谓的沙箱
    // 在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
    // 把当前沙箱需要的外部变量通过函数参数引入进来
    // 只要保证参数对内提供的接口的一致性，还可以随意替换传进来的这个参数
    "use strict";
    window.jQuery = window.$ = jQuery;
    ... // jQuery代码
}) (window);

jQueryのは、コード圧縮、窓や未定義の文字に圧縮され、彼らは窓と定義されていないことを確認することができたときに、詳細については、最適化された圧縮されています。外側の関数にのみつのパラメータを渡すので、サンドボックスを行う場合、uは自然に未定義の9つの文字が文字に縮小し、コードの数、圧縮されたバイトを減らすことが分かります。

jQueryの新たな建設

jQueryのは非常に便利な場所である、建設の新たな方法、直接$が（「」）に構築されていないのjQueryを使用した場合、一般的に使用されます。新しいjQueryの（本質的に同等である場合に、新しい未設定の実施形態）、実装はjQueryの範囲内です。

(function(window, undefined) {
    // ...
    jQuery = function(selector, context) {
        // 实例化方法jQuery()实际上是调用了其拓展的原型方法 jQuery.fn.init
        return new jQuery.fn.init(selector, context, rootjQuery);
    },
    // jQuery.prototype是jQuery的原型，挂载在上面的方法，即可让所有生成的jQuery对象使用
    jQuery.fn = jQuery.prototype = {
        // 实例化方法，这个方法可以称作 jQuery 对象构造器
        init: function(selector, context, rootjQuery) {
                // ...  
        }
    }
    // jQuery 没有使用 new 运算符将 jQuery 实例化，而是直接调用其函数
    // 要实现这样，那么 jQuery 就要看成一个类，且返回一个正确的实例，且实例还要能正确访问 jQuery 类原型上的属性与方法
    // jQuery 的方式是通过原型传递解决问题，把 jQuery 的原型传给jQuery.prototype.init.prototype，所以通过这个方法生成的实例 this 所指向的仍然是 jQuery.fn，所以能正确访问 jQuery 类原型上的属性与方法
    jQuery.fn.init.prototype = jQuery.fn;
})(window);

あなたはjQueryのを呼び出すときに白があると言う、そのinitメソッドは、オブジェクトのこのインスタンスのために、得られた新たなプロトタイプの実装上のオブジェクトのインスタンスを返すjQueryのプロトタイプを指す必要があるのjQueryのinitプロトタイプのプロトタイプのメソッドを呼び出すことができますが、jQuery.fnプロパティその媒体として存在します。

次のように簡略化：

(function(window, undefined) {
    function $(select) {
        return new $.prototype.init(select);
    }
    $.prototype = {
        constructor : $,
        init : function(select){
            //用来包装对象
            this.select = [];
            return this;  
        },
        add : function(){
            //...
            return this;
        },
        on : function(){
            //...
            return this;
        },
    };
    $.prototype.init.prototype = $.prototype;
    window.$ = $;  
}(window));

jQueryのチェーン動作を実現するためには、すべてのメソッドで物体表面の最後のインスタンスを戻す必要があります。