2.8 KiB
2.8 KiB
id, title, challengeType, videoUrl, localeTitle
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7b8c367417b2b2512b55 | Understand the Differences Between import and require | 1 | 理解import和require之间的差异 |
Description
require()
将用于导入外部文件和模块中的函数和代码。虽然方便,但这会带来一个问题:某些文件和模块相当大,您可能只需要来自这些外部资源的某些代码。 ES6为我们提供了一个非常方便的工具,称为import 。有了它,我们可以选择加载到给定文件中的模块或文件的哪些部分,从而节省时间和内存。请考虑以下示例。想象一下math_array_functions
有大约20个函数,但我在当前文件中只需要一个countItems
。旧的require()
方法会迫使我引入所有20个函数。使用这种新的import
语法,我可以引入所需的功能,如下所示: 从“math_array_functions”导入{countItems}上面代码的描述:
从“file_path_goes_here”导入{function}有几种方法可以编写
//我们也可以用同样的方式导入变量!
import
语句,但上面是一个非常常见的用例。 注意 花括号内的函数周围的空格是最佳实践 - 它使得读取
import
语句更容易。 注意 本节中的课程处理非浏览器功能。
import
以及我们在其余课程中介绍的语句将无法直接在浏览器上运行。但是,我们可以使用各种工具来创建代码,使其在浏览器中工作。 注意 在大多数情况下,文件路径在它之前需要
./
;否则,node将首先尝试将其作为依赖项加载到node_modules
目录中。 Instructions
import
语句,允许当前文件使用capitalizeString
函数。此函数所在的文件称为"string_functions"
,它与当前文件位于同一目录中。 Tests
tests:
- text: 有效的<code>import</code>声明
testString: 'getUserInput => assert(getUserInput("index").match(/import\s+\{\s*capitalizeString\s*\}\s+from\s+("|")string_functions\1/g), "valid <code>import</code> statement");'
Challenge Seed
"use strict";
capitalizeString("hello!");
Before Test
window.require = function (str) {
if (str === 'string_functions') {
return {
capitalizeString: str => str.toUpperCase()
}}};
Solution
// solution required