export用於輸出模組的對外介面。 export指令只要處於模組頂層就可以使用,也就是說,如果處於某個函數作用域、判斷語句、條件語句內,就會報錯。 export指令有幾種輸出形式。
PS: export命令可用于输出任何数据类型,可以是Number, String, Boolean, Null, Undefined, Array, Object, Function .... 以输出函数与对象举例 1. export var obj = { name: 'keith' } // 直接输出 2. var obj = { name: 'keith' } export { obj } // 使用该种形式输出时需要添加大括号 export obj // 不添加大括号时会报错,因为我们要输出的是该对象的引用。注意是对该对象的引用,而不是拷贝。这也意味着在该模块改变name属性,会导致另一个模块下name属性的变化,这点与CommonJS不同,CommonJS只是对某个对象的拷贝 var num = function () { return 123 } export { num } // 正确 export num // 报错,输出对num的引用,而不是直接输出函数num 3. var obj = { name: 'keith' } export { obj as person } // export命令支持接口的重命名 4 var obj = { name: 'keith' } export default obj // 输出默认值时不需要添加大括号, export default在一个模块中只能使用一次,但export命令可以使用多次 // export default的本质:就是将某个变量命名为default // export default num // 等同于 export { num as default } // import Num from './module.js' // 等同于 import { defualt as Num } from './module.js' 5 export { num, obj } // export命令处于模块顶层的任何位置,都可以将变量输出 // 不管是用var声明的变量,还是let声明的变量 // 在执行过程中export命令会被默认放置在整个模块的最底层。 var num = function () { return 123 }; let obj = { name: 'keith' } // 相当于 var num = function () { return 123 }; var obj = { name: 'keith' } // ..函数、对象等其他数据类型 // 被放置在模块最底层 export { name, obj }
export指令用於輸出模組的對外接口,import指令用於引入其他模組提供的功能介面。與export指令一樣,import指令只能用於模組頂層,不能用於函數作用域、條件語句、判斷語句內。 import指令有以下幾種形式。
1. import { num, obj } from './export.js' // 模块名,可以不添加.js后缀,但需要写配置文件,与Node知识相关 // import入的接口名字,要与export出的名字对应 console.log(num()) // 123 console.log(obj.name) // 'keith' 2. import { obj as person } from './export.js' // 可以修改import进来的变量名 console.log(person.name) // 'keith' 3. import * as $ from './export.js' // 使用*用于模块的整体加载,并重命名为$对象.此时可以通过$对象取到export的对外接口 console.log($.num()) // 123 console.log($.obj.name) // 'keith' 4. import 'normalize.css' // 用于加载整个模块,此时不需要添加变量名 5. let obj = { name: 'keith' } export default obj import person from './module.js' import boy from './module.js' // 对应于export default 命令 // 此时import进来的接口不需要添加大括号 // 且支持import时的任意命名 console.log(person.name) // 'keith' console.log(boy.name) // 'keith' 6. console.log(obj.name) // 'keith' import { obj } from './export.js' // 与export相反,import默认会被提升到模块最顶层 // 即 import { obj } from './export.js' console.log(obj)
如果在某個模組中引入了其他模組,又導出了該模組,可以採用export和import的複合寫法
1. 使用{}导出模块 export { Hello, World } from './modules' // 相当于 import { Hello, World } from './moudles' export { Hello, World } 2. 改写模块的名字 export { Hello as Person } from './modules' // 相当于 import { Hello as Person } from './modules' export { Person } 3. 改写默认export default模块的名字 export { default as Person } from './modules' // 相当于 import Person from './modoules' // ./modules里的模块是通过export default导出的 export { Person }
以上是js中export與import的實例介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!