全局变量如果太多就会造成全局污染 我们可以用对象模块化封装
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.关于模块化
- 全局function模式 : 将不同的功能封装成不同的全局函数
编码: 将不同的功能封装成不同的全局函数
问题: 污染全局命名空间, 容易引起命名冲突或数据不安全,而且模块成员之间看不出直接关系
- namespace模式 : 简单对象封装
作用: 减少了全局变量,解决命名冲突
问题: 数据不安全(外部可以直接修改模块内部的数据)
- IIFE模式:匿名函数自调用(闭包)
作用: 数据是私有的, 外部只能通过暴露的方法操作
编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
问题: 如果当前这个模块依赖另一个模块怎么办?
3. 模块化的好处
- 避免命名冲突(减少命名空间污染)
- 更好的分离, 按需加载
- 更高复用性
- 高可维护性