コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript での require、import、export の例を共有する

JavaScript での require、import、export の例を共有する

小云云
リリース： 2018-02-02 13:12:46
オリジナル
1740 人が閲覧しました

この記事では主にJavaScriptのrequire、import、exportに関する情報をサンプルコードを通して詳しく紹介していますので、勉強や仕事の参考になれば幸いです。

なぜモジュールの概念があるのですか?

理想的には、開発者はコア ビジネス ロジックを実装するだけでよく、他の人は他の人が書いたモジュールをロードできます。

ただし、JavaScript はモジュール型プログラミング言語ではありません。es6 より前は「クラス」をサポートしていなかったので、「モジュール」は存在しませんでした。

時代が必要

Javascript コミュニティは、既存の実行環境で「モジュール」の効果を実現するために多大な努力を払ってきました。

原文

モジュールとは、特定の機能を実装するためのメソッドのセットです。
さまざまな関数 (および状態を記録する変数) を単純に組み合わせる限り、それはモジュールになります。 

function m1(){
　//...
}
function m2(){
　//...　　
}
ログイン後にコピー

上記の関数 m1() と m2() はモジュールを形成します。使用する場合は直接呼び出してください。

このアプローチの欠点は明らかです。グローバル変数を「汚染」し、変数名が他のモジュールと競合しないという保証がなく、モジュールのメンバー間に直接の関係がありません。

オブジェクトの記述方法

上記の欠点を解決するために、モジュールをオブジェクトとして記述し、すべてのモジュールメンバーをこのオブジェクトに配置することができます

var module1 = new Object({
_count : 0,
　m1 : function (){
　　//...
　},
　m2 : function (){
　　//...
　}
});
ログイン後にコピー

上記の関数 m1() と m2() は、 module1 オブジェクト。使用する場合は、このオブジェクトのプロパティを呼び出すことになります

module1.m1();
ログイン後にコピー

この書き方ではモジュールのメンバーがすべて公開され、内部状態を外部から書き換えることができます。たとえば、外部コードは内部カウンターの値を直接変更できます。 

module._count = 1;
ログイン後にコピー

即時実行関数の記述方法

「即時実行関数式 IIFE」を使用すると、プライベートメンバーを公開しないという目的を達成できます

var module = (function() {
var _count = 0;
var m1 = function() {
alert(_count)
}
var m2 = function() {
alert(_count + 1)
}
 
return {
m1: m1,
m2: m2
}
})()
ログイン後にコピー

上記の記述方法を使用すると、外部コードは内部の _count 変数を読み取ることができません。 

　　console.info(module._count); //undefined
ログイン後にコピー

module は Javascript モジュールを記述する基本的な方法です。

主流のモジュール仕様

es6 より前には、公式の仕様セットはありませんでした。コミュニティとフレームワークの推進の観点から、現在 2 つの人気のある JavaScript モジュール仕様があります: CommonJS と AMD

CommonJS 仕様

2009 年。 , アメリカのプログラマー、ライアン・ダールは、サーバーサイドプログラミングにJavaScript言語を使用するためにnode.jsプロジェクトを作成しました。

これにより、「JavaScript モジュール型プログラミング」が正式に誕生しました。フロントエンドの複雑さは制限されており、モジュールなしでも可能ですが、サーバー側では、オペレーティング システムや他のアプリケーションと対話するためのモジュールが必要です。そうしないと、プログラミングがまったく不可能になります。

ノード プログラミングで最も重要なアイデアの 1 つはモジュールであり、このアイデアによって大規模な JavaScript プロジェクトが可能になります。 jsの世界ではモジュラープログラミングが流行しており、その後ブラウザ側でもrequirejsやseajsなどのツールキットが登場し、ES6以前のモジュラープログラミングはrequireが主流になったと言えます。 、現在でも、ES6 モジュールが完全に実装されるまではこれが当てはまります。

CommonJS では、公開モジュールは module.exports と exports を使用します。なぜ 2 つの公開オブジェクトがあるのか​​理解していない人が多いです。その違いについては後ほど説明します

CommonJS では、グローバル メソッド require() が使用されます。モジュールをロードします。数学モジュール math.js があると仮定すると、次のようにロードできます。 

var math = require('math');
ログイン後にコピー

その後、モジュールによって提供されるメソッドを呼び出すことができます: 

　var math = require('math');
　math.add(2,3); // 5
ログイン後にコピー

CommonJS で使用される require メソッドのおかげで、後の AMD と CMD もモジュール スタイルを参照するために require メソッドを使用します

AMD 仕様

サーバー側モジュールを手に入れたら、誰もがクライアント側モジュールを欲しがるのは当然です。そして、この 2 つに互換性があり、モジュールを変更せずにサーバーとブラウザの両方で実行できることが最善です。

ただし、大きな制限があるため、CommonJS 仕様はブラウザ環境には適していません。前のセクションのコードをそのままブラウザで実行すると、大きな問題が発生します

var math = require('math');
math.add(2, 3);
ログイン後にコピー

math.add(2, 3) の 2 行目は、require('math') の 1 行目の後に実行されます。 math.js がロードされるまで待つ必要があります。つまり、読み込みに時間がかかると、アプリ全体がハングアップして待機することになります。

すべてのモジュールはローカル ハードディスクに保存され、同期してロードできるため、これはサーバー側の問題ではありません。待ち時間はハードディスクの読み取り時間です。しかし、ブラウザにとってこれは大きな問題です。モジュールはサーバー側に配置され、待ち時間はネットワークの速度に依存するため、長時間かかる場合があり、ブラウザは「停止状態」になります。州。


そのため、ブラウザ側モジュールは「同期読み込み」(同期)は利用できず、「非同期読み込み」(非同期)しか利用できません。これがAMD仕様誕生の背景です。

AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

模块必须采用特定的define()函数来定义。

define(id?, dependencies?, factory)
ログイン後にコピー
ログイン後にコピー

  • id:字符串，模块名称(可选)

  • dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式

  • factory: 工厂方法，返回一个模块函数

如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});
ログイン後にコピー

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['Lib'], function(Lib){
　　　　function foo(){
　　　　　　Lib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});
ログイン後にコピー

当require()函数加载上面这个模块的时候，就会先加载Lib.js文件。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback);
ログイン後にコピー

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

require(['math'], function (math) {
　math.add(2, 3);
});
ログイン後にコピー

math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。

目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。

CMD规范

CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。它写起来是这样的：

define(function(require, exports, module) {
var clock = require('clock');
clock.start();
});
ログイン後にコピー

CMD与AMD一样，也是采用特定的define()函数来定义,用require方式来引用模块

define(id?, dependencies?, factory)
ログイン後にコピー
ログイン後にコピー

  • id:字符串，模块名称(可选)

  • dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式

  • factory: 工厂方法，返回一个模块函数

define('hello', ['jquery'], function(require, exports, module) {
 
// 模块代码
 
});
ログイン後にコピー

如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

define(function(require, exports, module) {
// 模块代码
});
ログイン後にコピー

注意：带 id 和 dependencies 参数的 define 用法不属于 CMD 规范，而属于 Modules/Transport 规范。

CMD与AMD区别

AMD和CMD最大的区别是对依赖模块的执行时机处理不同，而不是加载的时机或者方式不同，二者皆为异步加载模块。

AMD依赖前置，js可以方便知道依赖模块是谁，立即加载；

而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。

现阶段的标准

ES6标准发布后，module成为标准，标准使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们依然采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。

export导出模块

export语法声明用于导出函数、对象、指定文件（或模块）的原始值。

注意：在node中使用的是exports,不要混淆了

export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，而默认导出每个模块仅一个。

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
 
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
 
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
ログイン後にコピー

  • name1… nameN－导出的“标识符”。导出后，可以通过这个“标识符”在另一个模块中使用import引用

  • default－设置模块的默认导出。设置后import不通过“标识符”而直接引用默认导入

  • －继承模块并导出继承模块所有的方法和属性

  • as－重命名导出“标识符”

  • from－从已经存在的模块、脚本文件…导出

命名式导出

模块可以通过export前缀关键词声明导出对象，导出对象可以是多个。这些导出对象用名称进行区分，称之为命名式导出。

export { myFunction }; // 导出一个已定义的函数
export const foo = Math.sqrt(2); // 导出一个常量
ログイン後にコピー

我们可以使用*和from关键字来实现的模块的继承：

export * from 'article';
ログイン後にコピー

模块导出时，可以指定模块的导出成员。导出成员可以认为是类中的公有对象，而非导出成员可以认为是类中的私有对象：

var name = 'IT笔录';
var domain = 'http://itbilu.com';
 
export {name, domain}; // 相当于导出
{name:name,domain:domain}
ログイン後にコピー

模块导出时，我们可以使用as关键字对导出成员进行重命名：

var name = 'IT笔录';
var domain = 'http://itbilu.com';
 
export {name as siteName, domain};
ログイン後にコピー

注意：下面的语法有严重错误的情况：

// 错误演示
export 1; // 绝对不可以
 
var a = 100;
export a;
ログイン後にコピー

export在导出接口的时候，必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义，也不可能在import的时候有一个变量与之对应

export a虽然看上去成立，但是a的值是一个数字，根本无法完成解构，因此必须写成export {a}的形式。即使a被赋值为一个function，也是不允许的。而且，大部分风格都建议，模块中最好在末尾用一个export导出所有的接口，例如：

export {fun as default,a,b,c};
ログイン後にコピー

默认导出

默认导出也被称做定义式导出。命名式导出可以导出多个值，但在在import引用时，也要使用相同的名称来引用相应的值。而默认导出每个导出只有一个单一值，这个输出可以是一个函数、类或其它类型的值，这样在模块import导入时也会很容易引用。

export default function() {}; // 可以导出一个函数
export default class(){}; // 也可以出一个类
ログイン後にコピー

命名式导出与默认导出

默认导出可以理解为另一种形式的命名导出，默认导出可以认为是使用了default名称的命名导出。

下面两种导出方式是等价的：

const D = 123;
 
export default D;
export { D as default };
ログイン後にコピー

export使用示例

使用名称导出一个模块时：

// "my-module.js" 模块
export function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };
ログイン後にコピー

在另一个模块（脚本文件）中，我们可以像下面这样引用：

import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
ログイン後にコピー

使用默认导出一个模块时：

// "my-module.js"模块
export default function (x) {
return x * x * x;
}
ログイン後にコピー

在另一个模块（脚本文件）中，我们可以像下面这样引用，相对名称导出来说使用更为简单：

// 引用 "my-module.js"模块
import cube from 'my-module';
console.log(cube(3)); // 27
ログイン後にコピー

import引入模块

import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。

import模块导入与export模块导出功能相对应，也存在两种模块导入方式：命名式导入（名称导入）和默认导入（定义式导入）。

import的语法跟require不同，而且import必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言风格一致。

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
ログイン後にコピー

  • name－从将要导入模块中收到的导出值的名称

  • member, memberN－从导出模块，导入指定名称的多个成员

  • defaultMember－从导出模块，导入默认导出成员

  • alias, aliasN－别名，对指定导入成员进行的重命名

  • module-name－要导入的模块。是一个文件名

  • as－重命名导入成员名称（“标识符”）

  • from－从已经存在的模块、脚本文件等导入

命名式导入

我们可以通过指定名称，就是将这些成员插入到当作用域中。导出时，可以导入单个成员或多个成员：

注意：花括号里面的变量与export后面的变量一一对应

import {myMember} from "my-module";
import {foo, bar} from "my-module";
ログイン後にコピー

通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（'my-module.js'）所有的导出绑定内容，插入到当前模块（'myModule'）的作用域中：

import * as myModule from "my-module";
ログイン後にコピー

导入模块对象时，也可以使用as对导入成员重命名，以方便在当前模块内使用：

import {reallyReallyLongModuleMemberName as shortName} from "my-module";
ログイン後にコピー

导入多个成员时，同样可以使用别名：

import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";
ログイン後にコピー

导入一个模块，但不进行任何绑定：

import "my-module";
ログイン後にコピー

默认导入

在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导出这些默认值。

直接导入默认值：

import myDefault from "my-module";
ログイン後にコピー

也可以在命名空间导入和名称导入中，同时使用默认导入：

import myDefault, * as myModule from "my-module"; // myModule 做为命名空间使用
ログイン後にコピー

或

import myDefault, {foo, bar} from "my-module"; // 指定成员导入
ログイン後にコピー

import使用示例

// --file.js--
function getJSON(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
callback(this.responseText)
};
xhr.open("GET", url, true);
xhr.send();
}
 
export function getUsefulContents(url, callback) {
getJSON(url, data => callback(JSON.parse(data)));
}
 
// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://itbilu.com", data => {
doSomethingUseful(data);
});
ログイン後にコピー

default关键字

// d.js
export default function() {}
 
// 等效于：
function a() {};
export {a as default};
ログイン後にコピー

在import的时候，可以这样用：

import a from './d';
 
// 等效于，或者说就是下面这种写法的简写，是同一个意思
import {default as a} from './d';
ログイン後にコピー

这个语法糖的好处就是import的时候，可以省去花括号{}。

简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的as语法。

所以，下面这种写法你也应该理解了吧：

import $,{each,map} from 'jquery';
ログイン後にコピー

import后面第一个$是{defalut as $}的替代写法。

as关键字

as简单的说就是取一个别名,export中可以用，import中其实可以用：

// a.js
var a = function() {};
export {a as fun};
 
// b.js
import {fun as a} from './a';
a();
ログイン後にコピー

上面这段代码，export的时候，对外提供的接口是fun，它是a.js内部a这个函数的别名，但是在模块外面，认不到a，只能认到fun。

import中的as就很简单，就是你在使用模块里面的方法的时候，给这个方法取一个别名，好在当前的文件里面使用。之所以是这样，是因为有的时候不同的两个模块可能通过相同的接口，比如有一个c.js也通过了fun这个接口：

// c.js
export function fun() {};
ログイン後にコピー

如果在b.js中同时使用a和c这两个模块，就必须想办法解决接口重名的问题，as就解决了。

CommonJS中module.exports 与 exports的区别

Module.exports

The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to module.exports. Note that assigning the desired object to exports will simply rebind the local exports variable, which is probably not what you want to do.

译文：module.exports对象是由模块系统创建的。 有时这是难以接受的；许多人希望他们的模块成为某个类的实例。 为了实现这个，需要将期望导出的对象赋值给module.exports。 注意，将期望的对象赋值给exports会简单地重新绑定到本地exports变量上，这可能不是你想要的。

Module.exports

The exports variable is available within a module's file-level scope, and is assigned the value of module.exports before the module is evaluated. It allows a shortcut, so that module.exports.f = … can be written more succinctly as exports.f = …. However, be aware that like any variable, if a new value is assigned to exports, it is no longer bound to module.exports:

译文：exports变量是在模块的文件级别作用域内有效的，它在模块被执行前被赋于 module.exports 的值。它有一个快捷方式，以便 module.exports.f = … 可以被更简洁地写成exports.f = … 。 注意，就像任何变量，如果一个新的值被赋值给exports，它就不再绑定到module.exports(其实是exports.属性会自动挂载到没有命名冲突的module.exports.属性)

从Api文档上面的可以看出，从require导入方式去理解，关键有两个变量(全局变量module.exports，局部变量exports)、一个返回值(module.exports)

function require(...) {
var module = { exports: {} };
((module, exports) => {
// 你的被引入代码 Start
// var exports = module.exports = {}; (默认都有的)
function some_func() {};
exports = some_func;
// 此时，exports不再挂载到module.exports，
// export将导出{}默认对象
module.exports = some_func;
// 此时，这个模块将导出some_func对象，覆盖exports上的some_func
// 你的被引入代码 End
})(module, module.exports);
// 不管是exports还是module.exports，最后返回的还是module.exports
return module.exports;
}
ログイン後にコピー

demo.js:

console.log(exports); // {}
console.log(module.exports); // {}
console.log(exports === module.exports); // true
console.log(exports == module.exports); // true
console.log(module);
/**
Module {
id: '.',
exports: {},
parent: null,
filename: '/Users/larben/Desktop/demo.js',
loaded: false,
children: [],
paths:
[ '/Users/larben/Desktop/node_modules',
'/Users/larben/node_modules',
'/Users/node_modules',
'/node_modules' ] }
*/
ログイン後にコピー

注意

每个js文件一创建，都有一个var exports = module.exports = {} , 使exports和module.exports都指向一个空对象。

module.exports和exports所指向的内存地址相同

相关推荐：

JavaScript中Require调用js实例讲解

requireJS实现一个简单的模块加载器实例分享

Require.js使用方法分享

以上がJavaScript での require、import、export の例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
export javascript require
ソース：php.cn
前の記事：React イベント バインディングのいくつかのメソッドを共有する 次の記事：Vue の双方向データ バインディング ソース コード分析
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート