编程课程列表 > JavaScript 原生模块
JavaScript 原生模块
  • 信用卡 • 花呗
  • 放心购,7天内不满意可退款
收藏

JavaScript 原生模块

图文课程 18 节 40 个小点 65人参与
¥15

JS 模块 目前已获得全部主流浏览器的支持。

什么是 JavaScript 模块

JS modules 其实是一系列功能的集合。以前你可能听过说 Common JS ,AMD 等模块标准,不一样标准的模块功能都是相似的,都容许你 import 或者 export 一些东西。

JavaScript 模块目前有标准的语法,在模块中,你能够经过 export 关键字,导出一切东西(变量,函数,其它声明等等)

//lib.mjs
export const repeat = (string) => `${string} ${string}`;
export function shout(string) {
  return `${string.toUpperCase()}!`;
}

而想要导入该模块,只须要在其它文件中使用import 关键字引入便可

//main.mjs
import {repeat, shout} from './lib.mjs';
repeat('hello');
// → 'hello hello'
shout('Modules in action');
// → 'MODULES IN ACTION!'

模块中还能够导出默认值

//lib.mjs
export default function(string) {
  return `${string.toUpperCase()}!`;
}

具备默认值的模块能够以任意名字导入到其它模块中jquery

//main.mjs
import shout from './lib.mjs';
//     ^^^^^

模块和传统的script 标签引入脚本有一些区别,以下:

  • JS模块默认使用严格模式
  • 模块中不支持使用 html 格式的注释,即<!-- TODO: Rename x to y. -->
  • 模块会建立本身的顶级词义上下文,这意味着,当在模块中使用var foo = 42; 语句时,并不会建立一个全局变量foo, 所以也不能经过window.foo在浏览器中访问该变量。
  • import 和 export 关键字只在模块中有效。

因为存在上述不一样,经过传统方式引入的脚本 和 以模块方式引入的脚本,就会有相同的代码,也会产生不一样的行为,于是 JS 执行环节须要知道那些脚本是模块。

在 浏览器中使用模块

在 浏览器中,经过设置 <script> 元素的type 属性为 module 能够声明其实一个模块。

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

支持type="module"的浏览器会忽略带有nomudule属性的的<script>元素,这样就提供了降级处理的空间。其意义不只如此,支持type="module"的环境意味着其也支持箭头函数,async-await等新语法功能,这样引入的脚本无须再作转义处理了。

欢迎你开启JavaScript原生模块之旅!

点击下载编程狮App,手机随时随地继续学>>

IT技术编程开发学习交流群

该课程暂无评价噢!