ES6 - 模块化 及 Event事件池

模块化 及 事件池

模块化

模块化是运行在服务器(本机，编译器)上的内容。
可以实现按需加载，默认为严格模式。

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;