export/export default及びmodule.export/exportとの対比requireとimport

1937 ワード

ES 6とnodejsが流行してから、export、import、module.exportsのようなモジュールを使って、導き出す文法を導入していますが、実際に使っているシーンと違いには目眩がします.ピットを踏んでみたら、違いが必要です.
モジュール
モジュール思想の出現によって,コードの導入が便利になり,いくつかの多重化可能な機能をパッケージ化して導出または導入する.したがって、コードを共有し、多重化を実現するためのコンポーネントが広い.
規範
JSのモジュール仕様はCommonJSとAMDの2種類があります.Common JSはサービスエンド、すなわちnodeJsロードモジュールの方式に使用されます.各ファイルはモジュールです.自分の役割領域があります.一つのファイルで定義されている変数、関数、クラスはすべてプライベートです.他のファイルには見えません.モジュール間のロードはrequireで行われます.
AMDローディング方式はブラウザ環境において、ブラウザがネットワークからJSをローディングするのに遅れがあるため、nodeJsサーバ環境のように直接ファイルを読むことができません.したがって、define('moduleName'、''dependences')、function(')という方法でモジュールを定義します.
ES 6は言語標準のレベルでモジュール機能を実現しており、Common JSとAMD規格に取って代わることができます.ブラウザとサーバー共通のモジュールソリューションとなります.
サーバー側Nodejs
導入:require導出:module.exportまたはexport
ブラウザ
インポート:importまたはrequireエクスポート:exportまたはexport default
module.exportとexportsを比較する.
module変数は現在のモジュールを表します.この変数はオブジェクトで、そのexport属性(すなわちmodule.exports)は対外的なインターフェースです.モジュールをロードすると、モジュールのmodule.exports属性がロードされます.exports変数はmodule.exportsを指すので、直接exportの対象に方法を追加して、対外輸出インターフェースを表します.module.exportに方法を追加するのと同じです.
function add (flag) {
  return flag + 1
}
module.exports.x = 1
exports.add = add
対比exportとexport default
export方法は、例えば、方法または変数のセットを導出する.
// export  
export const a = 1
export const b = () => {
  console.log('func')
}

//export default  
const c = {
  a: '1',
  b: function () {}
}
export default c
この2つの方法でエクスポートしたモジュールは導入にも違いがあります.
//   export       
import { a } from './xxx'

//   export default       
import c from './xxx'
参照先:https://seekbetter.me/2017/10/28/2017/module.exports%E4%B8%8E%20exports%EF%BC%8C%20export%E5%92%8C%20export%20default%20 import%20%E 5%8 F%8 A%20 require%20%E 7%9 A%84%E 5%B 3%B 3%BB/
http://www.jianshu.com/p/076f2af97db0
第二に、いくつかの文法は広く書いてあります.http://www.infoq.com/cn/articles/es6-in-depth-modules