您好,欢迎访问一九零五行业门户网

js中export与import的实例介绍

exportexport用于输出模块的对外接口。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 }
importexport命令用于输出模块的对外接口,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的复合写法如果在某个模块中引入了其他模块,又导出了该模块,可以采用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的实例介绍的详细内容。
其它类似信息

推荐信息