Javascript_javascript スキルのモジュール開発を理解する

Little A はスタートアップ チームのフロントエンド エンジニアで、プロジェクトの Javascript プログラムの作成を担当しています。

グローバル変数の競合

Xiao A は、自身の経験に基づいて、まず一般的に使用される関数をいくつか抽出し、関数として記述し、公開ファイルのbase.js に配置しました。

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

var _ = {
$: function(id) { return document.getElementById(id) },
; GetCookie: function(key) { ... },
setCookie: function(key, value) { ... }
};

Little A は、多すぎるグローバル変数によって引き起こされる競合を防ぐために、これらの関数を _ オブジェクトに配置します。彼はチームの他のメンバーに、これらの関数を使用したい場合は、base.js をインポートするだけだと言いました。

リトル C はリトル A の同僚です。彼はリトル A に報告しました。彼のページには underscore.js というクラス ライブラリが導入されており、このクラス ライブラリは _ グローバル変数も占有するため、base の _ に続きます。 jsの競合。 A 君は、underscore.js はサードパーティのライブラリなので変更は難しいだろうが、base.js は多くのページにデプロイされており、変更することは不可能であると考えました。結局、Little A には、underscore.js が占有するグローバル変数を変更する以外に選択肢はありませんでした。

この時点で、Little A は、すべての関数を名前空間に配置すると、グローバル変数の競合の可能性を減らすことができるが、グローバル変数の競合の問題は解決されないことを発見しました。

依存関係

Xiao A は、ビジネスの発展に伴い、タブ切り替えコンポーネント tabs.js などの一連の関数ライブラリと UI コンポーネントを作成しました。このコンポーネントは、base.js と util.js の関数を呼び出す必要があります。

ある日、新しい同僚の Xiao D と Xiao A が、ページ内で tabs.js を参照したが、その機能が正常ではなかったと報告しました。小人 A は一目で問題を発見しました。小人 D は tabs.js がbase.js と util.js に依存していることを知らず、これら 2 つのファイルへの参照を追加しなかったことが判明しました。そこで、彼はすぐに変更を加えました。

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

<スクリプト src="tabs.js">
<スクリプト src="base.js">
<スクリプト src="util.js">

しかし、この時点でもまだ機能は異常でした。リトルAはリトルDに、「依存していると言われているので、依存する側を依存する側の前に置く必要があります。」と教えました。 Xiao Dがtabs.jsの後にbase.jsとutil.jsを配置したことが判明しました。

小さな A は、作成者である自分はコンポーネントの依存関係を自然に知っているが、他の人、特に初心者にはそれを伝えるのは難しいと考えました。

しばらくして、Xiao A はタブ切り替えコンポーネントに関数を追加しました。この関数を実現するには、tabs.js も ui.js 内の関数を呼び出す必要があります。このとき、A さんは、tabs.js を呼び出すすべてのページに ui.js への参照を追加する必要があるという重大な問題を発見しました。 ！ ！

しばらくして、Xiao A は tabs.js を最適化しました。このコンポーネントは util.js に依存しなくなったので、tabs.js を使用するすべてのページで util.js への参照を削除しました。彼の修正は大きな問題を引き起こしました。テストチーム MM は、いくつかのページが異常であると彼に言いました。 A 君は、見てみると、いくつかのページの他の関数が util.js の関数を使用していることに気づき、このファイルへの参照を削除し、エラーが発生しました。通常の機能を保証するために、彼はコードを復元しました。

もう一度考えてみましたが、ページを 1 つずつ変更せずに、他の機能に影響を与えずに依存関係を変更する方法はあるでしょうか?

モジュラー

小さな A がインターネットを閲覧していたとき、これまでに遭遇したすべての問題を解決できる新しいモジュール式コーディング方法を偶然発見しました。

モジュール型プログラミングでは、各ファイルがモジュールです。各モジュールは、define という関数によって作成されます。たとえば、base.js をモジュールに変換すると、コードは次のようになります:

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

定義(関数(必須、エクスポート、モジュール) {
exports.$ = function(id) { return document.getElementById(id) };
exports.getCookie = function(key) { ... };
exports.setCookie = function(key, value) { ... };
});

Base.js によって提供されるインターフェイスは、exports オブジェクトに追加されます。 Exports はローカル変数であり、モジュール全体のコードはグローバル変数の半分を占めません。

特定のモジュールが提供するインターフェースを呼び出すにはどうすればよいですか? tabs.js を例に挙げます。これは、base.js と util.js に依存します。

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

定義(関数(必須、エクスポート、モジュール) {
var _ = require('base.js'), util = require('util.js');
var div_tabs = _.$('tabs');
// ....その他のコード
});

モジュールは、ローカル関数 require を通じて他のモジュールのインターフェイスを取得できます。現時点では、変数 _ と util は両方ともローカル変数であり、変数名は開発者によって完全に制御されます。 _ が気に入らない場合は、base:
を使用することもできます。

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

定義(関数(必須、エクスポート、モジュール) {
varbase = require('base.js'), util = require('util.js');
var div_tabs = Base.$('tabs');
// ....その他のコード
});

util.js を削除して ui.js を追加したい場合は、tabs.js を変更するだけです:

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

定義(関数(必須、エクスポート、モジュール) {
varbase = require('base.js'), ui = require('ui.js');
var div_tabs = Base.$('tabs');
// ....その他のコード
});

ローダー

ネイティブ ブラウザのサポートがないため、モジュール形式でコーディングしたい場合は、ローダーと呼ばれるものを使用する必要があります。

現在、require.js や seajs など、ローダーの実装が多数あります。 JRaiser クラス ライブラリには独自のローダーもあります。