为什么做网站推广,seo个人博客,马鞍山广播电视台,绍兴网站建设做网站2.17. 模块化
模块化是指将一个大的程序文件#xff0c;拆分成许多小的文件#xff0c;然后将小文件组合起来。
这样就可以更清晰和结构化的方式组织代码
模块功能主要由两个命令构成#xff1a;export 和 import
export 命令用于规定模块的对外接口 ( 公开 , 暴露)
im…2.17. 模块化
模块化是指将一个大的程序文件拆分成许多小的文件然后将小文件组合起来。
这样就可以更清晰和结构化的方式组织代码
模块功能主要由两个命令构成export 和 import
export 命令用于规定模块的对外接口 ( 公开 , 暴露)
import 命令用于输入其他模块提供的功能 ( 导入 )
2.17.1.export公开
2.17.1.1.分别公开
文件位置及名称 ../js/s1.js
在每一个元素前写 export
export let name 王小二;export function study() {console.log(我们一起学开发);
}2.17.1.2.统一公开
文件位置及名称 ../js/s2.js
//统一公开
let name 李小三;function findJob(){console.log(我们一起找工作!!);
}//
export {name , findJob};2.17.1.3.默认公开
文件位置及名称 ../js/s3.js
//默认公开
export default {name: 赵小四,change(){console.log(我们一起变有钱!!);}
}2.17.2.import导入
2.17.2.1.通用导入 这里 script 的 type属性 为 module 模块 script typemodule// 通用的导入方式// 引入 s1.js 模块内容// import * as s1 from ./js/s1.js;// console.log(s1.name)// s1.study()// //引入 s2.js 模块内容// import * as s2 from ./js/s2.js;// //引入 s3.js import * as s3 from ./js/s3.js;console.log(s3.default.name)s3.default.study()
/script 2.17.2.2.解构导入
script typemodule// import {name, study} from ./js/s1.js;// console.log(name)// study()// import {name as nn, findJob} from ./js/s2.js;import {default as s3} from ./js/s3.js;console.log(s3.name)s3.change()/script 2.17.2.3.简便形式
script typemodule
// 针对默认暴露
import s3 from ./js/s3.js;
console.log(s3);2.17.3.入口文件
将 导入 统一写在 ../js/App.js
import * as s1 from ./js/s1.js;
import * as s2 from ./js/s2.js;
import * as s3 from ./js/s3.js;在 使用的html页面导入 script src./js/App.js typemodule/script2.17.4.动态import()
不是提前导入 , 而是在使用时才通过import() 函数导入,
import() 函数返回 promise对象, 直接接 then()
const btn document.querySelector(#btn);btn.onclick function(){import(./js/s1.js).then(module {module.study();});
}
