介绍
JavaScript模块定义需要遵循“开闭原则”,即对修改关闭,对扩展开放,下文将从三个不同的层次进行演示说明。
形态一:自定义对象
如代码所示,我们定义一个userObj
对象,里面封装了它的属性,这种代码结构更加规范整洁,调用时比流水账式的js代码舒服很多。但是其也有不足之处,就是在外部可以随意修改对象的属性,不符合“开闭原则”,所以我们需要找到更好的写法。
<script type="text/javascript">
/**
* 自定义对象
*/
var userObj={
username:"tom",
age:30,
mobile:"13388887777"
}
console.log(userObj.username)
//不符合开闭原则,可随意修改
userObj.username = "sss";
console.log(userObj.username)
</script>
形态二:自定义函数
自定义函数方式,可以让外部不能随意修改对象封装的属性,但是其缺点是只能在函数内部调用,无法满足外部调用需求。
<script type="text/javascript">
/**
* 自定义函数
*/
(function () {
function userObj() {
var username = "lucy";
var age = 18;
var mobile = "13387654332";
return {
username:username,
age:age,
mobile:mobile
};
}
console.log("1="+userObj().username);
})();
//不能随意修改,但在函数外部无法调用
console.log("2="+userObj().username);
</script>
形态三:自定义模块
在第二中形态基础上,我们将函数赋给一个模块module变量,然后再返回其定义的对象/属性,这样就可以做到“开闭原则”,既能让代码结构规范清晰,也能很好的控制作用域,这种写法,就是我们要的“模块”。
<script type="text/javascript">
/**
* 自定义模块
* 不能随意被修改,但支持外部调用
* 符合开闭原则:对扩展开发,对修改关闭
*/
var module = (function () {
var str = "1234";
function userObj() {
var username = "lucy";
var age = 18;
var mobile = "13387654332";
return {
username:username,
age:age,
mobile:mobile
}
};
return{
userObj :userObj(),
str:str
}
})();
console.log(module.str);
console.log(module.userObj.age);
</script>