由于js一开始设计时没当做大型语言来设计,但随着时代的发展,其作用越来越大,但也暴露了很多问题。
js缺陷:
- 没有命名空间
- 没有模块化的概念
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>模块化演变</title>
</head>
<body>
<script>
// js 缺陷实例1:
function demo(){
var a = b = c = 10; // a 享受了var关键字,作用域在函数体内部;b和c没有享受到var关键字,由于如果变量没有声明直接使用就相当于直接声明了全局变量,故b和c都是全局变量。
}
demo();
console.log(b); // 10
console.log(c); // 10
console.log(a); // ReferenceError: a is not defined
// js 缺陷实例2:
// a.js:
var m = 0;
console.log(m);
// 如果另一文件b.js中有
var m = 'sss';
console.log(m); // 那么这个m到底是哪一个????
// 团队合作噩梦!:变量冲突!
// 尝试解决:
// 方式1:模拟命名空间:团队不同,变量的前缀不同。(一开始设计的时候,就让变量保持不同)
// 方式2:给单个文件里面定义的局部变量都变成局部作用域里的变量。(采用自执行函数的方式)
;(function(){
})();
// 方式3:希望能把自己基类的很多工具封装成一个整体的框架
//(在没有第三方组件下,自己弄,不过后续发展的第三方组件越来越多,功能越来越好,加之后续的模块化标准,反正是越来越方便。不过思想是要了解的)
// 如: button\ form\ animate
//eg:
// obj.btn.js
;(function(w){
if(!w.obj){ // 如果window的obj不存在,就创建一个对象。(好处,obj.js和obj.animate.js的调用顺序无关)
w.obj = {};
}
// 为这个对象添加方法
w.obj.Btn = {
getVal: function(){
console.log("getVal");
},
setVal: function(){
console.log("setVal");
}
};
})(window || {}); // 一个接口,此处为把外部 全局的window传进来
// obj.animate.js
// 动画组件
;(function(w){
if(!w.obj){ // (判断obj框架是否存在)如果window的obj不存在,就创建一个对象。(好处,obj.js和obj.animate.js的加载顺序相互不影响)
w.obj = {};
}
w.obj.animate = {};
})(window || {}); // 外部传参接口
</script>
</body>
</html>