JavaScript モジュール開発の詳細な分析

モジュール開発は、プログラミング開発において非常に重要な概念です。優れたモジュールプロジェクトでは、後のメンテナンスコストを大幅に削減できます。この記事では主にJavaScriptモジュラー開発に関することを紹介しており、短いストーリーを通してモジュラー開発プロセスをより直感的に説明しています。

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

グローバル変数競合

自身の経験に基づいて、Little A はまず、よく使用される関数をいくつか抽出し、それらを関数として記述し、公開ファイルのbase.js:

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

Little A putに置きました。これらの関数は、多すぎるグローバル変数によって引き起こされる競合を防ぐために、すべて _object 内に配置されます。彼はチームの他のメンバーに、これらの関数を使用したい場合は、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 の関数を呼び出す必要があります。

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

<script src="tabs.js"></script>
<script src="base.js"></script>
<script src="util.js"></script>

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

Little 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 をモジュールに変換すると、コードは次のようになります:

define(function(require, exports, module) {
    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 に依存します:

define(function(require, exports, module) {
    var _ = require('base.js'), util = require('util.js');
    var p_tabs = _.$('tabs');
    // .... 其他代码
});

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

define(function(require, exports, module) {
    var base = require('base.js'), util = require('util.js');
    var p_tabs = base.$('tabs');
    // .... 其他代码
});

を使用することもできます。 .js、ui.js を追加し、tabs.js を変更するだけです:

define(function(require, exports, module) {
    var base = require('base.js'), ui = require('ui.js');
    var p_tabs = base.$('tabs');
    // .... 其他代码
});

Loader

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

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

以上がJavaScript モジュール開発の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。