Memahami modul ES6

Artikel ini meneroka modul ES6 dan menunjukkan cara menggunakannya dengan bantuan penterjemah. Hampir semua bahasa mempunyai konsep modul -cara untuk memasukkan fungsi yang diisytiharkan dalam fail lain. Biasanya, pemaju membuat asas kod yang dibungkus yang mengendalikan tugas yang berkaitan. Perpustakaan boleh dirujuk oleh aplikasi atau modul lain. Kelebihannya ialah:

1. Modul yang sama boleh dikongsi di antara bilangan permohonan.
2. Sebaik -baiknya, modul tidak perlu diperiksa oleh pemaju lain kerana mereka telah terbukti berkesan.
3. Kod yang merujuk modul tahu bahawa ia adalah kebergantungan. Jika fail modul diubah atau dipindahkan, masalah akan muncul dengan segera.
4. Kod modul (biasanya) membantu menghapuskan konflik penamaan. Fungsi x () dalam modul 1 tidak bertentangan dengan fungsi x () dalam modul 2. Anda boleh menggunakan pilihan seperti ruang nama untuk menukar panggilan ke module1.x () dan module2.x ().

Sesiapa yang memulakan pembangunan web beberapa tahun yang lalu akan terkejut mendapati tidak ada konsep modul dalam JavaScript. Tidak mustahil untuk merujuk secara langsung atau memasukkan fail JavaScript ke dalam fail lain. Oleh itu, pemaju beralih kepada kaedah lain.

Walau bagaimanapun, ini bukan pelan yang ideal: <p> </p> <ul></ul>

<🎜>

HTML 可以使用多个 <script> 标签加载任意数量的 JavaScript 文件：

<script src="lib1.js"></script> <script src="lib2.js"></script> Rollback modul <script src="core.js"></script> <script>console.log('inline code');</script>
<script></code> 标签问题的一种方法是将所有 JavaScript 文件合并成一个大型文件。这解决了一些性能和依赖项管理问题，但可能会导致手动构建和测试步骤。</p>
<p><strong>模块加载器</strong></p>
<p>RequireJS 和 SystemJS 等系统提供了一个库，用于在运行时加载和命名其他 JavaScript 库。模块在需要时使用 Ajax 方法加载。这些系统有所帮助，但对于大型代码库或添加标准 <code><script></code> 标签的网站来说，可能会变得复杂。</p>
<p><strong>模块打包器、预处理器和转译器</strong></p>
<p>打包器引入了编译步骤，以便在构建时生成 JavaScript 代码。代码经过处理以包含依赖项并生成单个 ES5 跨浏览器兼容的合并文件。流行的选项包括 Babel、Browserify、webpack 以及更通用的任务运行器，如 Grunt 和 Gulp。</p>
<p>JavaScript 构建过程需要一些努力，但也有好处：</p>
<ul>
<li>处理是自动化的，因此人为错误的可能性较小。</li>
<li>进一步的处理可以整理代码、删除调试命令、缩小结果文件等。</li>
<li>转译允许您使用替代语法，如 TypeScript 或 CoffeeScript。</li>
</ul>
<p><strong>ES6 模块</strong></p>
<p>上述选项引入了各种相互竞争的模块定义格式。广泛采用的语法包括：</p>
<ul>
<li>CommonJS——Node.js 中使用的 module.exports 和 require 语法</li>
<li>异步模块定义 (AMD)</li>
<li>通用模块定义 (UMD)</li>
</ul>
<p>因此，在 ES6 (ES2015) 中提出了单一的原生模块标准。</p>
<p>ES6 模块内部的所有内容默认情况下都是私有的，并且在严格模式下运行（不需要“use strict”）。公共变量、函数和类使用 export 导出。例如：</p>
<pre class="brush:php;toolbar:false"><code class="language-javascript">// lib.js
export const PI = 3.1415926;
export function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}
export function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}
// 私有函数
function log(...msg) {
  console.log(...msg);
}

或者，可以使用单个 export 语句。例如：

// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函数
function log(...msg) {
  console.log(...msg);
}

export { PI, sum, mult };

然后使用 import 将模块中的项目导入到另一个脚本或模块中：

// main.js
import { sum } from './lib.js';

console.log(sum(1, 2, 3, 4)); // 10

在这种情况下，lib.js 与 main.js 在同一个文件夹中。可以使用绝对文件引用（以 / 开头）、相对文件引用（以 ./ 或 ../ 开头）或完整 URL。可以一次导入多个项目：

import { sum, mult } from './lib.js';

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24

并且可以为导入指定别名以解决命名冲突：

import { sum as addAll, mult as multiplyAll } from './lib.js';

console.log(addAll(1, 2, 3, 4));      // 10
console.log(multiplyAll(1, 2, 3, 4)); // 24

最后，可以通过提供命名空间来导入所有公共项目：

import * as lib from './lib.js';

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24

在浏览器中使用 ES6 模块

在撰写本文时，ES6 模块受 Chromium 系浏览器 (v63+)、Safari 11+ 和 Edge 16+ 支持。Firefox 支持将在版本 60 中到来（在 v58+ 中位于 about:config 标志之后）。使用模块的脚本必须通过在 <script> 标签中设置 type="module" 属性来加载。例如：

 Pelayar yang tidak menyokong modul tidak akan menjalankan skrip Type = "Module". Anda boleh menggunakan harta nomodul untuk menyediakan skrip sandaran yang diabaikan oleh pelayar serasi modul. Contohnya: 
<🎜>
Salin selepas log masuk
  Sekiranya anda menggunakan modul dalam penyemak imbas anda?  
 Sokongan penyemak imbas semakin berkembang, tetapi mungkin terlalu awal untuk beralih ke modul ES6. Pada masa ini, lebih baik menggunakan pembungkus modul untuk membuat skrip yang berfungsi di mana -mana sahaja. 
  menggunakan modul ES6 dalam node.js  
 node.js dikeluarkan pada tahun 2009, tidak dapat dibayangkan bahawa tiada modul disediakan pada sebarang runtime. Commonjs digunakan, yang bermaksud bahawa Node Package Manager NPM boleh dibangunkan. Sejak itu, penggunaan telah meningkat secara eksponen. Modul CommonJS dikodkan dengan cara yang sama dengan modul ES2015. Gunakan modul.exports dan bukannya eksport: 
<🎜>
<🎜>
Salin selepas log masuk
 menggunakan memerlukan (bukan import) untuk mengimport modul ini ke skrip atau modul lain: 
// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函数
function log(...msg) {
  console.log(...msg);
}

module.exports = { PI, sum, mult };
Salin selepas log masuk
 memerlukan juga boleh mengimport semua projek: 
const { sum, mult } = require('./lib.js');

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24
Salin selepas log masuk
 Jadi, mudah untuk melaksanakan modul ES6 dalam node.js, bukan?  tidak betul . Modul ES6 terletak selepas bendera di Node.js 9.8.0 dan tidak akan dilaksanakan sepenuhnya sehingga sekurang -kurangnya versi 10. Walaupun modul Commonjs dan ES6 mempunyai sintaks yang sama, mereka bekerja dengan cara yang berbeza: 

 Modul ES6 dipadamkan sebelum melaksanakan kod untuk menghuraikan import selanjutnya. 
 Modul CommonJS memuatkan kebergantungan pada permintaan semasa melaksanakan kod. 

 Dalam contoh di atas, ini tidak membuat sebarang perbezaan, tetapi pertimbangkan kod modul ES2015 berikut: 
const lib = require('./lib.js');

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24
Salin selepas log masuk
 output ES2015: 
// ES2015 模块

// ---------------------------------
// one.js
console.log('running one.js');
import { hello } from './two.js';
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
export const hello = 'Hello from two.js';
Salin selepas log masuk
 kod serupa yang ditulis menggunakan CommonJs: 
<code>running two.js
running one.js
Hello from two.js</code>
Salin selepas log masuk
 output commonjs: 
// CommonJS 模块

// ---------------------------------
// one.js
console.log('running one.js');
const hello = require('./two.js');
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
module.exports = 'Hello from two.js';
Salin selepas log masuk
 Pesanan pelaksanaan boleh menjadi kritikal dalam beberapa aplikasi, apa yang berlaku jika anda mencampurkan modul ES2015 dan CommonJS dalam fail yang sama? Untuk menyelesaikan masalah ini, node.js hanya membenarkan penggunaan modul ES6 dalam fail dengan lanjutan .mjs. Fail dengan lanjutan .js akan lalai kepada Commonjs. Ini adalah pilihan mudah yang menghilangkan kebanyakan kerumitan dan harus membantu editor kod dan pemeriksa kod. 
  Sekiranya anda menggunakan modul ES6 dalam node.js?  
 Modul ES6 hanya berguna dalam Node.js v10 dan kemudian (dikeluarkan pada April 2018). Menukar projek yang sedia ada tidak mungkin membawa apa -apa faedah dan akan menjadikan aplikasi itu tidak serasi dengan versi terdahulu Node.js. Untuk projek baru, modul ES6 menyediakan alternatif kepada CommonJs. Sintaks adalah sama seperti pengekodan klien dan boleh memberikan cara yang lebih mudah kepada JavaScript isomorfik, yang boleh dijalankan pada penyemak imbas atau pelayan. 
  Module Module  
 Sistem modul JavaScript yang standard mengambil masa bertahun -tahun untuk muncul dan mengambil masa yang lebih lama untuk dilaksanakan, tetapi masalahnya telah diperbetulkan. Bermula pada pertengahan 2018, semua pelayar arus perdana dan node.js menyokong modul ES6, walaupun kelewatan beralih harus dijangka apabila semua orang naik taraf. Ketahui modul ES6 hari ini untuk mendapat manfaat daripada pembangunan JavaScript anda esok. 
  FAQs Mengenai Modul ES6 (Soalan Lazim)  
  (bahagian Soalan Lazim dalam dokumen asal ditinggalkan di sini kerana teks penuh telah sepenuhnya pseudo-asal)  
Atas ialah kandungan terperinci Memahami modul ES6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!