导入导出模块 · 前端

在**node**中导入导出模块 ``` //导出（向外暴露成员） module.exports = {} //导入 var 名称 = require('模块标识符') ``` ES6之前的模块化规范有: 1) CommonJS =>NodeJS、Browserify 2) AMD=>requireJS 3) CMD=>seaJS >[danger]在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，即使用export default 和 export 向外暴露成员 export可导出多次 export default只能导出一次两者可以混用 ## **在ES6中导出模块（向外暴露成员）** 默认暴露 ``` //在一个模块中，export default 只允许向外暴露一次,即在test.js只能存在一次export default // test.js //方法一：默认暴露 export default { username: 'zs', pwd: 'admin123' } /* var user={ username: 'zs', pwd: 'admin123' }; export info; */ //方法二：分别暴露 //导出变量 export var name= 'zs'; export var age =20; //导出函数 export function func(b){ return b+1; }; var width=200; var height=200; function show(){ return width+height; } //方法三：或者统一暴露 export {width,height,show}; ``` ## **ES6中导入模块** import * from * ``` //通用导出 import * as m from "./demo.js"; console.log(JSON.stringify(m));//{"age":20,"default":{"username":"zs","pwd":"admin123"},"height":200,"name":"zs","width":200} //结构形式导出在这里默认暴露的数据必须重命名 import {default as df,name,age,func,width as w,height as h,show} from './demo.js' console.log(df) console.log(name); console.log(age); console.log(func) console.log(w) console.log(h) console.log(show) //单独导出默认暴露的数据 import user from './demo.js'; console.log(user); ``` export default 与export可以在同一模块同时导出 ``` // test.js var info = { name: 'zs', age: 20 } export default info export var title = '小星星' export var content = '哈哈哈' ``` 接收test.js导出的模块 ``` import person, {title, content as content1} from './test.js' console.log(person); console.log(title + '=======' + content1); ``` **export default的变种方式** 如果不使用export default ，使用如下指令也可以。 let是当前作用域下声明变量 ``` let info={ name:'zx', age:20 } export(info); ``` >[danger]注意: **在HTML中** 1、在html页面中导入导出需要将javascript 的type改为module 2、导入的是export default{}由于一个模块只能有一个所以不能加{} 3、导入时必须加.js ``` // test.js //默认输出 export default { name: 'dash', sayHi: function() { console.log("Hi!"); } } // test.html 需要加module <script type="module"> //导入模块错误方法export default时不能加{} import {user} from './test.js'; //导入模块正确的方法(.html和.js中用import导入时必须加上.js后缀 ) import user from './test.js'; //引用模块中的变量和方法 console.log(user.name); user.sayHi(); </script> ``` **html入口文件方式** app.js ``` import * as m1 from "./demo.js"; import * as m2 from "./test.js"; import $ from "jquery"; console.log(m1.default) console.log(m1.name) console.log(m2.default) ``` index.html ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="module" src="./app.js"></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> </body> </html> ``` ES7~ES11参看 [https://www.bilibili.com/video/BV1uK411H7on?p=48](https://www.bilibili.com/video/BV1uK411H7on?p=48)