[JavaScript]テクノロジー選択:モジュール化とフレームワーク(二)

ネット易の先端のマイクロ専門を総括して、技術の選択型の課程

前言

前回はフレームワークを使用しない前提の下で,モジュール化をどのように機知的に実現するかを紹介し,いくつかの露出インタフェースと依存宣言の方法を提供したが,今回は様々なモジュールシステムと彼らの長所と短所を紹介する.

モジュールシステム

モジュールシステムは民間コミュニティであり、モジュール化をよりよく実現するために作成されたjsフレームワークであり、異なるモジュールシステムにはそれぞれの長所と短所があり、独自の文法規則がある.モジュールシステムは主にモジュールのロード,分析,注入,初期化を解決し,その中で最も重要な2つの側面はモジュールの分析と注入である.

CommonJS仕様

CommonJSは、非ブラウザ環境でjsを実行するために作成されたjs仕様である、Node.jsはこの規範の具体的な実現である.構文規則は次のとおりです.

exports._function = _function;//          1.js   

var _ modelName = require("./1")//      

ここでは、この2つのjsモジュールが異なるファイルに書かれていることを前提とし、Objective-CまたはC言語に導入することにも近い.hファイルの方式.Objective-C開発IOSを学んだことのある友人は、私たちが暴露したいインタフェースを知っています.hファイルには、プライベートインタフェースが記載する.mファイルではインタフェースを

exports._name = _name;

文の形式だけです.CommonJSは、管理に依存する成熟した信頼性の高い仕様であり、実行時のサポートであり、モジュール定義も簡単です.また、JSにはファイルレベルの役割ドメインはありませんが、CommonJSは実行時にファイルをカプセル化しています.これにより、異なるファイルで定義されているグローバル変数は互いに影響を及ぼさず、グローバル変数の安全が保証され、ループ依存にもよくサポートされます.
しかしCommonJSにも大きな欠陥があり、これらのファイルは同期requireであるが、フロントエンドで使用する場合、scriptの参照は非同期のプロセスであり、依存するファイルが事前にロードされていないと、後のファイルが正常に実行されないことを意味している.したがって、フロントエンドでCommonJS仕様を使用する場合は、複数のjsファイルを一緒にパッケージ化するためのパッケージソフトウェアを使用します.これにより、非同期ロードの問題が解決されます.よく使われるパッケージ方式はbrowserifyやwebpackなどで、その使い方も簡単で、端末に命令を入力するだけです.

browserify a.js > b.js

これにより、aファイル内のすべての依存性がb.jsファイルにパッケージされ、ブラウザで1つのjsファイルのみを参照して使用できます.

AMD仕様

AMD(Asynchronous Module Definition)AMD仕様は天然に非同期環境をサポートする仕様であり、先端の開発環境に適しており、その文法規則はnamespaceの定義方式にも似ており、namespaceを知らない友人は私がまとめた最初の文章を見ることができます.その文法規則は大体次の通りです.

define(["dep.js"], function(dep){
  //      
  return{
  _interface: _interface//       
  }
})

AMDはSimplified CommonJS wrappingもサポートしています.つまり、Commonの構文規則に基づいて、define関数を外側に包むことです.

define(function(require, exports){
  //CommonJS         
})

このように,我々の依存注入はjsスクリプトとなり,依存リストを取得するにはfunctionを利用する.toString()は関数体を印刷し、正規表現を使用して注入に依存する情報を取得します.同時に、AMDはLoader Pluginsをサポートし、別のコンポーネントをロードします.完全コンポーネント=構造+論理+スタイルリストは,構造とスタイルリストを導入するとモジュールが完全なコンポーネントになることを知っている.

define([".js",".html",".css"], function(Regular, templeate){
  //    
  Component = Regular.extend({
  
  template: template//     


  })
})

AMDとCommonJSはコミュニティの産物であり、AMDは非同期IO環境に偏り、ブラウザ環境に適しており、JSバージョンとは関係なくCommonJSの書き方をサポートしている.ただし、ライブラリレベルのサポートでは選択的なロードはできません.すなわち、if-else文でロード項目を選択すると、AMDもループ依存の問題を処理できません.

ES6 module

ES 6、すなわちECMAScript 6/ECMAScript 2015は、Ecma国際によって制定された新しい規範であり、2015年6月17日に正式に発表され、JacaScriptのオリジナルサポートがモジュール化された.過去のES仕様の実装サイクルから、ES 6のすべての新機能を完全にサポートするには、少なくとも1年かかります.ブラウザでES 6の機能を使うには、まだしばらく待つ必要があります.

export{_interface}//           

import{_interface} from './a';//         

ここでexportとimport...from...すでにJSのキーワードとなっており、classキーワードもあります.ES 6は真の公式規範であり、将来のモジュール標準であり、言語レベルでモジュール化をサポートし、ブラウザセグメントを含むすべてのjs実行時に適応し、ループ依存を処理することができる.
しかし、ES 6はまだ安定したレベルに達しておらず、多くのブラウザで互換性がなく、使用が制限されています.
以上説明した仕様をテストするには、Systemというものを使用します.jsのフレームワークは、AMD、CommonJS、ES 6のロードをサポートし、Transpilerをサポートし、任意のリソースをサポートします.githubトランスミッションゲート