暴露数据引入模块语法
- 规范
- 基本语法
- 分别暴露 (按需暴露)
- 统一暴露 export {暴露内容1,暴露内容2}
- 默认暴露 (适合只暴露一个数据) 只能暴露一次
- 同时使用
- 在app.js中引入
规范
- 每个文件都是一个模块
- 要借助Babel和Browserify依次编译代码,才能在浏览器端运行
- Bebel中文网:https://www.bebeljs.cn/
- Babel可以把es6转成es5
基本语法
模块暴露数据
1、分别暴露 (按需暴露) export 暴露内容
2、统一暴露 export {暴露内容1,暴露内容2}
3、默认暴露 export defalut 暴露内容
分别暴露 (按需暴露)
export const data='asheh'
export const msg='ssss'
export function showMsg(){console.log(msg);
}
export function showData() {console.log(');
}
补充:准备相关依赖包(为编译代码做准备)
全局安装:babel-cli、Browserify :npm install babel-cli browserify -g
局部安装:babel-preset-es2015: npm install babel-preset-es2015
建立.babelrc文件
{"presets0"["es2015"]
}
}
执行babel ./ -d
翻译 browserify ./build/app.js -o ./build/build.js
统一暴露 export {暴露内容1,暴露内容2}
const school='尚硅谷'
const person={name:'老刘',age:18,sex:'女'
}
function getLaoliu(){console.log(person)
}
//统一暴露--常用`在这里插入代码片`
export {school,person,getLaoliu}
//支持改名
export {school as school ,person as person,getLaoliu as getLaoliu}
默认暴露 (适合只暴露一个数据) 只能暴露一次
export default {name:"wc",age:5
}
同时使用
# [分别暴露]
export const teacher1={name:'强哥',age:15}
export const teacher2={name:'ke 哥',age:35}
# [统一暴露]
const stu1= {name:'网哥',age:25}
const stu1= {name:'掌声',age:33}
export {stu1,stu2}# [默认暴露]
export default{school:'上海dax',address:'shanghai',subject:['计算机','java','大数据']
}
在app.js中引入
# 引入【分别暴露】模块
import {data,msg,showData,showMsg} form './module1' # 注意不是解构赋值# 引入【分别暴露】模块 + 打包加入
import * form './module1'# 引入【分别暴露】模块 + 重命名
import {data as data2} form './module2'# 引入【统一暴露】模块 (和上面三种一样)
import {school as sc,person,getLaoliu} form './module3'# 引入【默认暴露】模块
import module4 form './module4'# 引入多种暴露方式
import module5,{teacher1,teacher2,stu1,stu2} from './module5'