【ES6】模块化规范，Model的基本用法、匿名函数

非ES6模块化规范

• AMD和CMD适用于浏览器端的javascript模块化


• CommonJS适用于服务端的Javascript模块化
  这些模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准，
  在ES6语法规范中，在语言层面定义了ES6模块化规范，是浏览器与服务器端通用的模块化开发规范

ES6模块化规范中定义（统一规范）

• 第个js文件都是一个独立的模块


• 导入模块成员使用import关键字


• 暴露模块成员使用export凑字

//安装babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
//在项目根目录创建babel.config.js 里面放
module.exports={presets}
const presets = [
["@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
//通过
npx babel-node index.js
//执行代码


export default{}暴漏

//一个模块只能有一个 export default {}
//且导入和导出的模块名不需要保持一致
//导出
const math = { name , age }
export default math;
//导入
import Math123 from './math.js'

//导入方法 import name from './model.js'
//同时导入,必须export default的在前，export 的在后
import age,{a,b,c} from './model.js


export{}暴漏


//一个模块 export{} 可以有多个
//按需导入，不能随意命名，要与导出的文件、变量名、方法名一一对应
//导入name, 导出里面就有name变量导出
//暴漏的index.js模块
function fun1(){}
export {fun1}
//在引入的.vue文件里面
import {fun1} from './index.js'
//使用
fun1()
//as别名
//导出
export {
cong as fun1
}
//导入
import {fun1 as name} from './index.js'
//使用
name()


混合引入

//同时导入,必须export default的在前，export 的在后
export default age
export a,b,c
import age,{a,b,c} from './model.js


中转导入（在一个文件夹下有很多模块文件，使用）

在模块文件夹中增加一个index.js文件作为中转模块，这样可以直接导入
项目文件夹

• 模块文件夹
  
  
  
  • package1.js
  
  
  • package2.js
  
  
  • package3.js
  
  
  
  


• index.js




//在引入的.vue文件里面
import {name} from './model.js'



//模块导入，导出都可以as别名//export 导出方式
import name as cong from './model.js'
//把name设置成别名cong，然后使用cong
//export 声明或语句 ,export const name='丛继永' 导出
// 整体导入,会导入所有输出，包括通过 export default 导出的
import * as obj from './model.js'
//在模块顶层的this指向undefined
//不按模块导入this指向的windows
if (typeof this!=='undefined'){
throw new Error('请使用模块方式加载！')
}
//import命令具有提升效果，会提升到整个模块的头部，先执行
console.log(123)
console.log(456)
import './module.js' //先执行
//import 和 export 命令只能在模块的顶层，不能在代码中执行
//import()可以按条件导入，可以放在代码中执行。和webpack一起使用，有不兼容问题
if(){
import('model.js').then().catch() // promise对象
}
//导入导出的复合写法（不用）
//复合写法导出的，无法在当前模块中使用
export {name} from './module.js'
//相当于
import {name} from './module.js'
export {name} from './module.js'


匿名函数导入导出

// 外部js
;var main = (function(){
function fun1(a,b,c){console.log(1,2,3)}
function fun2(a,b,c){}
return {
“fun1”:fun1,
“fun2”:fun2
}
})()
// 引入js
main.fun1(1,2,3)