さまざまなフロントエンドモジュラー仕様

いくつかの重要なポイントを記録して、証拠とともにいつでも覚えておけるようにします。

モジュール化への道のりを振り返る 以前、自分のモジュール化への道のりを簡単に振り返りましたが、内容が雑多すぎて、フロントエンドのモジュール化を完全に理解するのに不便でした。過去数日間、何人かのフロントエンド担当者にインタビューしたところ、私を殺しに来た専門家を除いて、ほとんどの人はモジュール化に比較的馴染みがなく、モジュール化が何なのかさえ聞いたことがないことがわかりました。世界で人気の 3 つのフレームワーク: React、Angular(2)、および Vue。それらの最大の類似点は、モジュール性とコンポーネント化です。また、Nodejs から派生したさまざまなフロントエンド構築ツールもあります: Webpack、Gulp、Systemjs、それらを使用するための基礎もモジュール化とコンポーネント化です。モジュール化やコンポーネント化がなく、プロジェクトはスムーズに実行されており、これらの構築ツールを使用できると主張するのであれば、それを忘れるしかありません。なぜわざわざそんなことをするのでしょうか。プロジェクトの規模に関係なく、モジュール化は、一方では作業効率を向上させ、他方ではフロントエンドを改善するためによく理解し、実践する必要があることがわかります。レベル;

モジュール化の利点については、ネット上で多くは語られませんが、さらに重要なのは、モジュール化に基づいてチームメンバー間で暗黙の了解が形成され、チーム内のプライベート ウェアハウス、統合管理、バックエンドでパッケージを呼び出すという目標の達成は、これまでと同様に自然なことです

すべては CommonJS から来ています:

心配しないでください。 CommonJS は JS の歴史的な理由により、当初はモジュール化されず、ブラウザ側のデファクトスタンダードになりました。この問題を解決するために CommonJS 仕様が提案され、JS がブラウザ側だけでなくあらゆる場所で動作することが期待されました。その後、Nodejs は CommonJS 仕様をサーバー側に実装し、ブラウザーの小規模な環境からフロントエンドとバックエンドの通信という大規模な環境に JS をプルしました。 みにくいアヒルの子はついに白い白鳥になりました。

CommonJS の仕様によれば、ファイルはモジュールを参照およびロードするために使用され、モジュールを定義およびエクスポートするために使用され、モジュールを識別するために使用されます。モジュールの読み取りにより、取得と実行は同期的なファイル操作であるため、CommonJS はサーバー側の Nodejs によってのみ実行できます。ここで Nodejs のモジュール化を確認できます。Browserify により、JavaScript 間の移動が可能になります。フロントエンドとバックエンド; ただし、ブラウザ側では、この同期操作は適用されません。少なくとも時間がかかり、後続のコードの実行がブロックされるため、CommonJS はブラウザ側で 2 つの主要なブランチを派生させました。非同期モジュール定義) および CMD (共通モジュール定義);

AMD (非同期モジュール定義) :

AMD は、define(id?, dependency?, Factory)、requires([dependency]、 function(){}) を使用してモジュールを呼び出し、ロードが完了した後にコールバック関数を実行する方法を使用します。同期順序での実行という観点からは理解できません。複数のファイルが非同期で並列にロードされますが、ロード順序によってはどれが最初に実行されるかは予測できませんが、すべての依存関係が実行され、結果は次のようになります。最後に一緒に呼び戻されます。

CMD (共通モジュール定義):

CMD は SeaJS で表され、モジュールの定義とロードの方法が RequireJS とは少し異なります。 、factory) を使用してモジュールを定義しますが、SeaJS はモジュールをロードするために最も近い依存関係メソッドを使用します。一般に、モジュールは依存関係に依存せず、統一された方法で記述されます。依存モジュールは seajs.use([dependency], function(mod,[mod]){}); によって使用されますが、基本的にはモジュールの非同期ロードですが、ロードと実行のタイミングが異なります。 RequireJS との比較

それに比べると、Seajs と Requirejs はどちらも非常に優れたフロントエンドのモジュラー構成ソリューションであり、それぞれに独自の利点があります。Requirejs は、メイン コード ロジックをコールバックする前に、すべてのフロントエンドの依存関係がロードされて実行されるまで待機する必要があります。不足していると言えば、フロントエンドの依存関係を最適化する必要があることだけですが、Seajs は依存モジュールをプリロードするだけで実行せず、近くで使用します。現時点では遅延が発生する可能性があります。

Seajs について 簡単な理解:

Seajs は必要ない場合は使用しないでください

Seajs を上手に使いましょう!

ツールは生産性にとって非常に重要です:

ブラウザ側で一般的なモジュラー仕様は AMD と CMD ですが、ツールの助けを借りて、Gulp、Webpack などの CommonJS 仕様をブラウザ側でシミュレートすることができます。このツールを使用すると、Nodejs を作成するのと同じように開発環境でフロントエンド JS コードを作成でき、ブラウザで実行できる JS にパッケージ化されます。同様に、コード ブロックの非同期呼び出しも可能です。 UMD (ユニバーサル モジュール仕様):

JS がフロントエンドとバックエンドの両方で使用できるようになったことで、JS モジュールはブラウザとサーバーの両方で実行できるようになりました。UMD ソリューションは、AMD と CommonJS の統合です。 JS モジュール化のクロスプラットフォーム仕様:

(function(root, factory){
if(typeof define ==='function'&& define.amd){
// AMD
define(['jquery'], factory);
}elseif(typeof exports ==='object'){
// Node, CommonJS之类的
module.exports = factory(require('jquery'));
}else{
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this,function($){
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
}));

ES6 モジュール化:

ES6 は、新しい JavaScript 標準として、モジュールのバフを備えており、インポートとエクスポートを通じてモジュールをインポートおよびエクスポートします。基本的な考え方は CMD や AMD と似ていますが、もちろん、より多くの構文がサポートされています。現在のブラウザ環境では、より使いやすく、理解しやすくなっていますが、安心して使用するには、依然としてツールの力を利用する必要があります

つまり、フロントエンドのモジュール化は必須です。 ！私たちは現状に満足することはできません。たとえいくつかのランダムなことをしたとしても、それでも何度でもうまくいきます。なぜなら、私たちよりも一生懸命働いている偉大なマスターがあまりにもたくさんいるからです。