模块化 及 事件池
模块化
模块化是运行在服务器(本机,编译器)上的内容。
可以实现按需加载,默认为严格模式。
export 导出
导出分为两种形式: 默认 和自定义
- 默认内容: export default 导入时名字可以任意取
不需要添加任何修饰
export default class Preson{
constructor(){
this.name = "hello";
}
}
- 自定义内容 : export 导入时名字需要对应
导出的内容需要加 { }
class Preson{
constructor(){
this.name = "hello";
}
}
let name = "123";
// as : 重命名
export {
name,
// Preson as Pr 将左侧的名字 改为 右侧的名字
Preson as Pr
// 在当前文件中,使用时仍然为左侧。外部文件导入时,使用右侧的名字
};
import 导入
import 拥有提前量 (自动提升到顶层执行)
导入指定文件中的指定内容 ( 路径可以是相对路径,绝对路径,网络路径 )
导入时,指定的内容如果是 * 号。 表示引入指定路径下的所有内容
导入文件,依然可以使用 as 重命名。使用的是改后的名字。
script 标签需要添加 type = “module” 属性
<script type="module">
import Preson,{name,Pr} from "./js/模块化.js"
let preson = new Preson;
console.log(preson.name)
</script>
事件池
事件池,记录所有的相关事件及处理函数
class Event{
events = {};
// 事件存放的形式
// events = {
// "click" : [f1,f2,f3....],
// "mousemove": [f1,f2,f3....]
// }
// 添加事件的功能
on(eventName,fn){
if(!this.events[eventName]){
this.events[eventName] = [];
}
this.events[eventName].push(fn);
}
// 删除事件的功能
off(eventName,fn){
if(!this.events[eventName]){
//如果没有添加过该事件,直接跳出不处理了
return;
}
this.events[eventName] = this.events[eventName].filter(item=>item!=fn);
}
// dispatch: 负责把触发到的事件给执行了
dispatch(eventName){
if(!this.events[eventName]){
//如果没有添加过该事件,直接跳出不处理了
return;
}
this.events[eventName].forEach(item => {
console.log("我是item"+ item);
console.log("我是this"+ this);
item.call(this);
});
}
}
let event = new Event;