1 函數(shù)化編程
只要把不同的函數(shù)(以及記錄狀態(tài)的變量)簡單地放在一起息尺,就算是一個模塊绞幌。使用的時候字币,直接調(diào)用就行了则披。
<script>
function getName() {
return 'jack';
}
function getAge() {
return 25;
}
console.log(getName() + ":" + getAge());
</script>
缺點:
"污染"了全局變量,無法保證不與其他模塊發(fā)生變量名沖突洗出,而且模塊成員之間看不出直接關(guān)系士复。
2 對象模式
把模塊寫成一個對象,所有的模塊成員都放到這個對象里面翩活。
<script>
var User = new Object({
_count: 0,
getName: function () {
return 'jack';
},
getAge: function () {
return 25;
}
});
console.log(User.getName() + ":" + User.getAge());
//暴露所有模塊成員
console.log(User._count);
</script>
函數(shù)封裝在對象里阱洪。使用的時候,就是調(diào)用這個對象的屬性菠镇。
缺點:
暴露所有模塊成員冗荸。
3 函數(shù)立即調(diào)用(IIFE)
<script>
var User = (function () {
var _count = 0;
var getName = function () {
return 'jack';
}
var getAge = function () {
return 25;
}
return {
getName: getName,
getAge: getAge
}
})();
console.log(User.getName() + ":" + User.getAge());
//私有屬性不會暴露模塊成員
console.log(User._count);
</script>
4 模塊繼承
如果一個模塊很大,必須分成幾個部分利耍,或者一個模塊需要繼承另一個模塊蚌本,這時就有必要采用"放大模式"(augmentation)盔粹。
<script>
var User = (function () {
var _count = 0;
var getName = function () {
return 'jack';
}
var getAge = function () {
return 25;
}
return {
getName: getName,
getAge: getAge
}
})();
var Student = (function (user) {
user.getAddress = function () {
return 'Beijing';
}
return user;
})(User);
console.log(Student.getName() + ':' + Student.getAddress())
</script>
5 兼容空對象
由于編程的復(fù)雜性,在進行模塊繼承的時候,可能加載一個不存在空對象,這時候需要進行必要的兼容處理.
<script>
var Student = (function (user) {
user.getAddress = function () {
return 'Beijing';
}
return user;
})(window.User || {});
console.log( Student.getAddress())
</script>
6 輸入全局變量
在模塊內(nèi)部調(diào)用全局變量,必須顯式地將其他變量輸入模塊程癌。
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script>
$(function(){
var Student = (function (user) {
user.getAddress = function () {
$('#content').html('<h1>Bei Jing</h1>');
}
return user;
})(window.User || {});
Student.getAddress()
})
</script>
<div id="content"></div>