Web_java script_Dom_对象模块化封装（简版）

全局变量如果太多就会造成全局污染 我们可以用对象模块化封装

var itszt={

}

模块化的理解

1.什么是模块?
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

var itszt={
	dom:{
		getAllSibling:function (ele) {
		var siblingArr=[];
		var childArr=ele.parentNode.children;
		for(var i=0;i<childArr.length;i++){
			if(childArr[i]!=ele){
				siblingArr.push(childArr[i])
			}
		}
		return siblingArr;
		},
		
		getFirstChild:function (parentNode) {
			return parentNode.firstElementChild || parentNode.firstChild;
		}
        //...
	},
	
	
	style:{
	/*关于仿jQuery的css方式设置样式的方法*/
		css:function (ele,json) {
		//   链式编程
			ele.style.cssText=JSON.stringify(json)
			.slice(1,s1.length-1)
			.replace(/"/g,"")
			.replace(/,/g,";");
		},
		//...
	},
	
	html:{
	},

	event:{
		add:function (ele,eventName,fn) {
			if(ele.attachEvent!=undefined){
	//            IE6789(10)
				ele.attachEvent("on"+eventName,fn);
			}else if(ele.addEventListener!=undefined){
	//谷歌/火狐/IE11
			ele.addEventListener(eventName,fn);
			}else{
	//            执行到这的 几乎没有 极其特殊  执行自己封装的 解决覆盖问题的代码
				var oldEvent=ele["on"+eventName];
				if(oldEvent==null){
				//如果没有老事件
					ele["on"+eventName]=fn;
				}else{
	//            如果有老事件
					ele["on"+eventName]=function () {
	//                老事件代码
					oldEvent();
	//                新事件代码
					fn();
					}
				}
			}
		},
	
		remove:function (ele,eventName,fn) {
	//        先判断是否使用的onclick方式绑定的
			if(ele["on"+eventName]){
	//            执行到此处 表示 通过on绑定了一个事件
				ele["on"+eventName]=null;
			}else if(ele.detachEvent!=undefined){
				ele.detachEvent("on"+eventName,fn);
			}else {
				ele.removeEventListener(eventName,fn);
			}
		}
	},
}

console.log(itszt.event.add);
//类似链式编程
//控制台内容
ƒ (ele,eventName,fn) {
                if(ele.attachEvent!=undefined){
//            IE6789(10)
                    ele.attachEvent("on"+eventName,fn);

                }else if(ele.addEventListener!=u…

2.关于模块化

1. 全局function模式 : 将不同的功能封装成不同的全局函数

编码: 将不同的功能封装成不同的全局函数
问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系

2. namespace模式 : 简单对象封装

作用: 减少了全局变量，解决命名冲突
问题: 数据不安全(外部可以直接修改模块内部的数据)

• IIFE模式：匿名函数自调用(闭包)

作用: 数据是私有的, 外部只能通过暴露的方法操作
编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
问题: 如果当前这个模块依赖另一个模块怎么办?

3. 模块化的好处

• 避免命名冲突(减少命名空间污染)
• 更好的分离, 按需加载
• 更高复用性
• 高可维护性