Javascript_javascript スキルにおける匿名関数とカプセル化の概要

さまざまな JS ライブラリのカプセル化についてしばらく混乱していましたが、ようやく手がかりが得られました。おおよそ:

コードをコピー コードは次のとおりです:

自己呼び出し匿名関数を作成し、パラメーター ウィンドウを設計して、ウィンドウ オブジェクトを渡します。

このプロセスの目的は、

コードをコピー コードは次のとおりです:

これにより、自分のコードが他のコードによって汚染されることがなくなり、同時に他のコードも汚染されなくなります。

jQuery パッケージ

そこで、jQuery の初期バージョンを見つけました。バージョン番号は 1.7.1 です。カプセル化コードは次のとおりです。

コードをコピー コードは次のとおりです:

(関数(ウィンドウ, 未定義) {
var jQuery = (function() {console.log('hello');});
window.jQuery = window.$ = jQuery;
if ( typeof define === "関数" && 定義.amd && 定義.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
})(ウィンドウ);

そのうち

コードをコピー コードは次のとおりです:

console.log('hello');

冒頭で述べたように動作するかどうかを確認するために使用されるため、ウィンドウ内で jQuery
を呼び出すことができます。

コードをコピー コードは次のとおりです:

ウィンドウ.$

または

コードをコピー コードは次のとおりです:

window.jQuery

同様のパッケージを作成できます

コードをコピー コードは次のとおりです:

(関数(ウィンドウ、未定義) {
var PH = function() {

}
})(ウィンドウ)

上記と比較すると、足りないステップは 2 つだけです

1. jQuery シンボルとグローバル呼び出しを定義する
2.非同期サポート

そこで、以前の jQuery パッケージを探しましたが、メソッドはほぼ同じでした。 。

コードをコピー コードは次のとおりです:

if (typeof window.jQuery == "未定義") {
var jQuery = function() {};
If (typeof $ != "未定義")
jQuery._$ = $;

var $ = jQuery;
};

これは魔法のような判定方法なので、前のステップで jQuery を書き換えることはできません。そこで、最新の jQuery パッケージがどのようなものかを調べてみる必要がありました。そこで 2.1.1 を開いてみたところ、多くの機能が追加されているだけでなく、基本的な考え方は変わっていないことがわかりました

コードをコピー コードは次のとおりです:

(関数(グローバル、ファクトリー) {

if (モジュールのタイプ === "オブジェクト" && module.exports のタイプ === "オブジェクト") {
        module.exports = global.document ?
            ファクトリー(グローバル、真) :
            関数(w) {
                if (!w.document) {
                    throw new Error("jQuery にはドキュメントを含むウィンドウが必要です");
                }
                工場を返します(w);
        };
    } else {
        工場(グローバル);
    }

}(typeof window !== "未定義" ? window : this, function(window, noGlobal) {
    var jQuery = function() {
        console.log('jQuery');
    };
    if (typeofdefine === "function" &&define.amd) {
        定義("jquery", [], function() {
            jQuery を返す;
        });
    };
    strunnamed = 未定義のタイプ;
    if (typeof noGlobal === strundefine) {
        window.jQuery = window.$ = jQuery;
    };
    jQuery を返す;
}));

浏览器の使用状況下

复制代码代码如下:

モジュールの種類 ="未定義"

上記の状況は、Node.js などの使用を判断する場合に当てはまりますが、これは jQuery が取得中であることも示しています。

バックボーン封装

打开了バックボーン看了一下

复制代码代码如下:

(関数(ルート、ファクトリー) {
if (typeof define === 'function' &&define.amd) {

        定義(['アンダースコア', 'jquery', 'エクスポート'], 関数(_, $, エクスポート) {
            root.Backbone = Factory(root, エクスポート, _, $);
        });

} else if (エクスポートの種類 !== '未定義') {

        var _ = require('アンダースコア');
        ファクトリー(ルート、エクスポート、_);

} else {

        root.Backbone = Factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
    }

}(this, function(root, Backbone, _, $) {

    バックボーン.$ = $;
    バックボーンを返す;

}));

除了异步サポート，也体现了jQuery およびアンダースコアの依存，百

复制代码代码如下:

        定義(['アンダースコア', 'jquery', 'エクスポート'], 関数(_, $, エクスポート) {
            root.Backbone = Factory(root, エクスポート, _, $);
        });

バックボーンがオリジナルの supportrequirejs であることを示します。

アンダースコア封装
以降、また看了看アンダースコア、発行この库また占领了一シンボル _

复制代码代码如下:

(関数() {
var root = this;
var _ = function(obj) {
If (obj instanceof _) return obj;
If (!(このインスタンスの _)) は new _(obj) を返します;
This._wrapped = obj;
};

if (エクスポートの種類 !== '未定義') {
If (モジュールのタイプ !== '未定義' && module.exports) {
エクスポート = module.exports = _;
}
エクスポート._ = _;
} else {
root._ = _;
}

if (define === '関数' && 定義.amd) {
定義('アンダースコア', [], function() {
return _;
});
}
}.call(this));

一般に、最後に call() メソッドが使用されることを除いて、それらはほぼすべて匿名関数です。