ES6模块化
【摘要】 模块化 ES6模块化原理使用闭包封装了私有变量和方法,暴露一个接口供其他部分调用<script> let module = (function(){ const moduleList = {}; function define(name,modules,action) { modules.map((m,i) => { ...
模块化
ES6模块化原理
使用闭包封装了私有变量和方法,暴露一个接口供其他部分调用
<script>
let module = (function(){
const moduleList = {};
function define(name,modules,action) {
modules.map((m,i) => {
modules[i] = moduleList[m]
})
moduleList[name] = action.apply(null,modules);
console.log(moduleList);
}
return {define}
}());
/* 名字 是否依赖 动作 */
/* 导出 通过返回出一个接口来调用*/
module.define('tools',[],function(){
return {
first(arr) {
return arr[0]
},
max(arr,key) {
return arr.sort((a , b) => b[key] - a[key])[0];
}
}
});
/* 依赖 */
module.define('lesson',['tools'],function(tools){
let data = [{
name:'js',
pice: 199
},{
name: 'msq',
price: 78
}]
console.log(tools.max(data,"price"));
})
</script>
模块化的使用
- 加上
type = 'module'
- 只有开放的才能被使用
- 通过利用
export
,开放出口,导出 - 利用
import
导入
<script type="module">
import { title ,show} from "./tools.js";
show();//123
</script>
/*导出*/
let title = 'houdun';
let show = function() {
console.log(123);
}
export {title , show}
模块会延迟解析,只解析一次
每个模块都有自己的独立作用域,只通过export来暴露端口
批量打包
import * as api from "/tools.js";
api.show()
返回的api是对象,通过api.show
来访问
别名使用
只能有一个名字!
导入
import { title as t} from "./tools.js";
用as操作符来设置别名
导入
也是通过as来设置
默认导出
只能有一个,可以用任何的别名来接收
export default class User {
////
}
/*实际原理是导出是设置别名为default*/
混合导入导出
带花括号是具名导出,不带花括号是默认导出
模块的合并导出
通过将所有的模块引入到一个index模块中,最后再一次导出index模块
为了避免导出现多个模块中有重复命名的问题,将每个模块通过批量导出的方法,引入到index中,原理就是批量导出返回的是对象,每个对象有不同的名字实现了差异化
按需动态加载
利用import只能放在顶层,不能放在花括号当中,所以无法实现按需加载的功能
var btn = document.querySelector('button');
btn.addEventListener('click',() => {
import("/tools.js").then(({title,show}) => {
show();
})
})
利用import
函数返回一个promise对象,通过对象下的then
方法来实现
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)