首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

module.exports和exports,应该用哪个

Universal Module Definition (UMD)[4]格式可以用于浏览器和Node.js。当一个模块需要被多个不同的模块加载器导入时,它就会非常有用。...好吧,如果你查看user.js文件,你会注意到我们定义了一个getName函数,然后使用exports关键字让它在任意导入的地方可用。在index.js中,我们导入了该函数并执行了它。...还需要注意require语句,该模型名称有着./前缀,意味着它是本地文件。还要注意的是,此处不需要添加文件扩展名。...导出多个方法和值 我们可以用同样的方式导出多个方法和值: const getName = () => { return 'Jim'; }; const getLocation = () => {...语法的变化 我还应该提到,可以在导出过程中导出方法和值,而不仅仅是在文件末尾导出。

20520

详解 JavaScript 中的模块、Import和Export

模块化编程 在 JavaScript 中出现模块的概念之前,当我们想要把自己的代码组织为多个块时,一般会创建多个文件,并且将它们链接为单独的脚本。...如果你打算在另一个文件中使用另一个名为 sum 的变量,会很难知道在脚本的其它位置到底用的是哪一个值变量,因为它们用的都是相同的 window.sum 变量。...命名导出 如前所述,使用 export 语法允许你分别导入按名称导出的值。...以这个 function.js 的简化版本为例: functions.js export function sum() {} export function difference() {} 这样允许你用花括号按名称导入...默认导出 在前面的例子中我们导出了多个命名的导出,并分别或作为一个对象导入了每个导出,将每个导出作为对象上的方法。模块也可以用关键字 default 包含默认导出。

1.9K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    es6中的模块化

    ES6的模块化分为导出(export)与导入(import)两个模块。 export的用法 在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。...我们先来创建一个test.js文件,来对这一个变量进行输出: export let myName="laowang"; 然后可以创建一个index.js文件,以import的形式将这个变量进行引入: import...,对于默认导出,导入的名称可以和导出的名称不一致。.../test.js"; console.log(myFn(),myName);//默认导出一个方法 laowang 重命名export和import 如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题...,为了解决该问题,ES6为提供了重命名的方法,当你在导入名称时可以这样做: /******************************test1.js**********************/

    54720

    ES6之路之模块详解

    简介 何为模块 一个模块只不过是一个写在文件中的 JavaScript 代码块。 模块中的函数或变量不可用,除非模块文件导出它们。...避免命名污染:在 javascript 脚本中,所有的 js 文件的顶级作用域创建的变量,会被添加到共享的全局作用域,这就会导致不同的人开发的代码可能会有相同的变量名,导致变量名污染。...前面也提到一个模块就是一个 javascript 文件,在这个模块中定义的变量,外部是无法获取到的,只有通过 export 导出的变量其他模块才可以用 最简单的导出方式就是在声明的变量、函数、类前面加一个...} } // 私有函数 function privateFunction () { console.log('我是私有函数,外部访问不了我'); } 注意: 被导出的函数或者类,都必须要有名称...当导入绑定的时候,绑定类似于使用了 const 定义,意味着不能定义相同的变量名,但是没有暂时性死区特性(但是在 深入理解ES6 这本书里面说是有暂时性死区限制,我在 chrome 上测试了的,读者希望也去试下

    63530

    TypeScript系列教程十《模块》

    在脚本文件中,变量和类型被声明为在共享全局范围内,并且假设您将使用–outFile编译器选项将多个输入文件连接到一个输出文件中,或者在HTML中使用多个 如果您的文件当前没有任何导入或导出,但希望将其视为模块...无论您的模块目标是什么,此语法都有效。 TypeScript 中的模块 在TypeScript编写基于模块的代码时,需要考虑三个主要问题: 语法: 我想使用什么语法来导入和导出内容?...模块解析: 模块名称(或路径)与磁盘上的文件之间的关系是什么? 模块输出目标: 我发出的JavaScript模块应该是什么样子?.../hello.js"; hello(); 除了默认导出外,您还可以通过导出进行多个变量和函数的导出,方法是省略默认值: // @filename: maths.ts export var pi = 3.14...在大多数情况下,使用ES模块的导入与来自这些环境的需求相同,但此语法确保您的TypeScript文件与CommonJS输出具有1对1的匹配: import fs = require("fs"); const

    1.5K10

    2024年字节抖音前端面经,这次问的很基础!

    然后面试官让我说下,all的用法。我当时说多个Promise全部执行为才会调用all。...有个加法函数,有两个参数,参数类型和返回值类型始终一致,string或者number怎么实现,我说可以用泛型实现。...Omit 怎么防止多个文件打包进去多余的js和类,按需加载 分割代码,多使用动态import语句 const PageA = lazy(() => import("....,只有在运行时才能确定具体导入的内容,而ESModule是静态的,在编译时就能确定引入和导出的模块 commondJS导入使用的是require,require可以出现在代码任何地方(所以是动态的),导出使用...重新加载返回的是缓存,ESModule也是缓存,后续的导入将共享相同的实例 下面的输出内容是啥 // a.js const b = require('.

    11710

    vue模块化开发是如何实现的?

    那么在Vue项目中是如何实现模块化的呢?模块化,就好比是一个大的功能项,这个大的功能项中又可以包含多个组件。在使用的时候,单个模块对应的是我们Vue项目下compentent下的文件目录。...每一个模块下面又可以有多个组件,这些组件又组成了完整的模块页面(单页面)但是每一个模块下面必须要有一个主要的文件(模块父组件),这个文件必须在路由管理中(router/index.js)进行注册,注册的时候满足以下形式...,导入的名称可以和导出的名称不一致。.../module1.js";console.log(fn()+name);//默认导出一个方法aays重命名export和import如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题...,ES6为提供了重命名的方法,当你在导入名称时可以这样做:export let myName="我来自module1.js";//模块1中export let myName="我来自module2.js

    49130

    你知道 JS 中的模块导入有一个缺点吗?

    作者:Dmitri Pavlutin 译者:前端小智 来源:Dmitri Pavlutin 1.命名导入和自动完成 假设我信编写了一个简单的JavaScript模块: // stringUtils.js...看起来没啥问题,挺好的。 现在在 app.js 文件中导入函数 exequalsIgnoreCase / app.js import { equalsIgnoreCase } from '....在此步骤中,IDE无法提供有关要导入的可用名称的任何建议。 然后,继续写入 from './stringUtils',然后移回大括号并展开自动完成以选择要导入的名称。...尽管 ES6 模块优点很多,但导入模块语法使自动完成功能难以使用。 2.Python 中的模块 现在让我们尝试在 Python 中导入命名组件。它有同样的问题吗?...3.解决方法 我能找到的在JavaScript中对命名导入启用自动完成的唯一解决方案是调用IDE以获得帮助。

    1.8K10

    Es6中模块(Module)的默认导入导出及加载顺序

    加上default是javascript中的默认关键字,因此不能将其用作变量,函数或者类的名称,但是却可以,将其作为属性名称,所以用default来重命名模块时为了尽可能与非默认导出的定义一致,如果想在一条导出语句中同时制定多个导出...{},这与非默认导入的情况是不一样的,本地名称sub用于表示模块导出的任何默认函数,这在Es6中是常见的做法,并且在一些脚手架里依然采用这种方式引入一些模块的方式非常流行 那么问题来了,如果是要导出默认值或者非默认绑定的模块呢...可以用一条语句导入所有导出的绑定,例如,如下所示:将下面的代码命名为exampleDefault.js export var name = "川川"; // 非默认导出格式 export let desc...,也可以用作单独脚本,由于它没有导出任何东西,所以,在另一个模块中,可以使用简化导入操作来执行该模块代码,并且不导入任何的绑定,示例代码如下 import "....注意:module与text/javascript这样的内容类型并不相同,JavaScript模块文件与javascript脚本文件具有相同的内容类型,因此无法根据内容类型进行区分,此外,当无法识别type

    2.5K40

    JavaScript 编程精解 中文第三版 十、模块

    其中很大一部分是垃圾,我应该提一下,但几乎所有有用的公开包都可以在那里找到。 例如,一个 INI 文件解析器,类似于我们在第 9 章中构建的那个,可以在包名称ini下找到。...,而date-names导出包含多个东西的对象 - days和months是名称数组。.../format-date"就是在同一个目录中,名为format-date.js的文件。 当名称不是相对的时,Node.js 将按照该名称查找已安装的包。...从另一个模块导入时,导入绑定而不是值,这意味着导出模块可以随时更改绑定的值,导入它的模块将看到其新值。 当有一个名为default的绑定时,它将被视为模块的主要导出值。...如果你在示例中导入了一个类似于ordinal的模块,而没有绑定名称周围的大括号,则会获得其默认绑定。 除了默认绑定之外,这些模块仍然可以以不同名称导出其他绑定。

    54220

    快速入门Web开发(上) 黑马程序员JavaWeb开发教程

    即以上页面 修改服务端口号 使用import导入,export组成一个模块 等价于下面 vs6中,属性与名相同可以只写一半 ​ 导出export 其中,export default是导出语法 // utils.js.../utils.js'; console.log(add(2, 3)); // 输出 5 export default 没有指定名称是因为它导出的是一个对象字面量(即一个没有具体名称的对象)。...假设你有一个名为 myModule.js 的模块,并且在该模块中使用 export 导出了一个值,而没有为该导出指定名称。以下是导入这个没有名称的 export 的示例: import '....这样做是为了执行 myModule.js 中的副作用,例如在模块中定义的全局变量、执行代码等。 需要注意的是,导入没有名称的 export 时,你不能直接使用导入的值,因为没有为其指定变量名。...但是,它可以用作执行副作用的手段。例如,当导入的模块包含在浏览器环境中注册全局变量的代码时,可以使用这种方式导入模块,而不需要使用导入的值。

    11910

    JS module的导出和导入

    有两种模块导出方式:命名式导出(名称导出)和默认导出(定义式导出),命名式导出每个模块可以有多个,而默认导出每个模块仅一个 。...命名式导出可以导出多个值,但在import引用时,也要使用相同的名称来引用相应的值。...下面两种导出方式是等价的: constD=123;exportdefaultD;export{Dasdefault}; 使用名称导出一个模块时: // "my-module.js" 模块 function...';console.log(cube(3));// 27 import导入模块 import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件(或模块)的原始值。...注意事项: import必须放在文件的最开始,且前面不允许有其他逻辑代码,这和其他所有编程语言的导入风格一致。 命名导入 我们可以通过指定名称将导入成员插入到当作用域中。

    2.7K40

    小结ES6基本知识点(六):模块的语法

    关于模块化的更多内容,可以看下之前我总结的一览js模块化:从CommonJS到ES6 2.导出的语法 2.1 导出的基本语法、导出时重命名 export关键字,可以导出变量、函数、类给其他模块。.../export.js"; console.log(name) // Peter // 导入多个绑定 import { name, age } from "....,要注意import时默认值必须在非默认值之前: import 默认值的本地名称,{非默认值} from ‘xxx.js’; 如果写反则会报错: import {非默认值},默认值的本地名称 from.../export.js'; console.log(sum(1, 2)) // 3 console.log(name) // Peter 4.重新导出模块已经导入的内容 如果在一个模块之中,先导入后导出同一个模块.../export.js'; } 模块的好处就在于不用把所有东西都放到一个文件中,可以通过模块导出、导入需要的东西。

    2.7K1072

    nodejs&模块&全局对象global

    (1)多线程 多线程是指程序中包含多个执行流,即在一个程序中可以同时运行多个不同的线程来执行不同的任务,也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。java是多线程的。...模块内部定义的变量和函数默认情况下在外部无法得到。模块内部可以使用exports对象进行成员导出,使用require方法导入其他模块。...nodejs中,导出当前模块的成员,可以用exports,也可以用module.exports。exports 实际指向 module.exports,最终导出的是module.exports对象。...一般情况下,我们会通过解构赋值的方式,直接从导入的对象中获取需要的成员。 ① 导入系统模块 通过系统模块的名称导入。...let path = require('path') ② 导入第三方模块 通过模块的名称导入(这个名称是package.json文件中name属性对应的名称)。

    1.3K20

    JavaScript 是如何工作的:模块的构建以及对应的打包工具

    另一个缺点是它们仍然会导致名称空间冲突。例如,如果两个模块具有相同的名称怎么办?或者,如果有一个模块的两个版本,并且两者都需要,该怎么办? 幸运的是,答案是肯定的。...也许我个人最喜欢的 ES6 模块功能是它的导入模块是导出时模块的实时只读视图。(相比起 CommonJS,导入的是导出模块的拷贝副本,因此也不是实时的)。...类似地,如果有多个文件且有多个依赖时,只需告诉 Browserify 的入口文件路径即可。最后打包后的文件可以通过 Minify-JS 之类的工具压缩打包后的代码。...来看个例子: 假设有一个带有多个函数的 utils.js 文件,每个函数都用 ES6 的语法导出: export function each(collection, iterator) { if (...我预测构建过程将会保留,至少在近期内。 CommonJS、AMD 与 UMD 会被淘汰吗? 一旦 ES6 成为模块标准,我们还需要其他非原生模块规范吗? 我觉得还有。

    1.4K10

    Es6中的模块化Module,导入(import)导出(export)

    之后作为example的属性被访问,这种导入格式被称为命名空间导入,因为exportExample.js文件中不存在example对象,所以它被作为exportExample.js中所有导出成员的命名空间对象而被创建...,函数或者类时,我们可能不希望使用他们的原始名称,就是导入导出时模块内的标识符(变量名,函数,或者类)可以不用一一对应,保持一致,可以在导出和导入过程中改变导出变量对象的名称 使用方式: 使用as关键字来指定变量.../ as后面是重新指定的函数名 如上代码,函数sum是本地名称,add是导出时使用的名称,换句话说,当另一个模块要导入这个函数时,必须使用add这个名称 若在importExample.js一模块中,...name设置为好好先生,通过import导入的name标识符是export导出时的name标识符本地名称 总结 本文主要从什么是模块,Node中模块的导出与导入,如何检测node.js对Es6的支持情况...,以及在Node中通过babel将es6代码转化为Es5代码在Node中执行,模块的导出(导出数据,函数和类)模块的导入(单个导入,多个导入,导入整个) 模块中在用export关键字导出所要暴露的对象和用

    2.6K20

    精读《默认、命名导出的区别》

    本周找来了这方面很好的的文章:export-default-thing-vs-thing-as-default,先描述梗概,再谈谈我的理解。...那么默认导出的另一种写法 export { thing as default } 也是如此吗?...所以导出是否是引用,不取决于是否是命名导出,而是取决于写法。不同的写法效果不同,哪怕相同含义的不同写法,效果也不同。 难道是写法的问题吗?...甚至 export default '123' 是合法的,而 export { '123' as thing } 是非法的也证明了这一点,因为命名导出本质是赋值到 default 变量,你可以用已有变量赋值...我也认为不需要背下来这些导入导出细枝末节的差异,只要写模块时都用规范的命名导入导出,少用默认导出,就可以在语义与实际表现上规避掉这些问题啦。

    48030

    为什么说:JavaScript 模块中的默认导出很糟糕

    = (a, b) => a - b; 在导入使用之前,这里有一个问题,它可能会影响到我们的开发体验。.../math.js'; const result = multiply(2, 2); // results is now 0 由于默认导出可以用任何名字,并且每个开发者的命名习惯不一样,名称就不一样,这样就没有一致性了...到这里,大家可能有一个问题,如果来自不同模块的两个命名导出具有相同的名称,该怎么办? 我们可以使用重命名的方式来解决这个问题: import { Article } from '....最后,你可能也在想,"我使用的框架或工具几乎要求我们默认导出一个函数或组件"。如果组件很多,我们可以通过使用 "index.js" 来解决这个问题。...就是在目录的根部创建一个index.js或index.ts文件,然后使用命名导出这些组件。

    87820
    领券