1 全局方法
定義了一個全局方法add
- 代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>全局函數(shù)</title>
<script type="text/javascript">
var add=function(v1,v2){
return v1+v2;
}
var str=add(1,2);
alert(str);
</script>
</head>
<body>
</body>
</html>
由于js是弱類型，當在上面代碼str賦值之前填上一句代碼 var add="aaa"
<script type="text/javascript">
var add=function(v1,v2){
return v1+v2;
}
var add="aaa"http://js是弱類型,可以對一個變量多次定義并可賦不同類型的值
var str=add(1,2);
alert(str);
</script>
再次運行：頁面也能展示，但切換到檢查模式下會發(fā)現(xiàn)程序會報錯 add is not a function
image.png
- 可見在項目代碼非常多時或者由幾個人同時參與的大型項目中， 一個人定義的變量或者方法可能與其他人重名，這樣就會把別人的代碼覆蓋掉。
2命名空間法
//定義命名空間calculator，相當于強類型語言里面的類，有一個常量屬性和兩個方法，add方法與substract方法
var calculator={
a: 123
}
calculator.add=function(v1,v2){
return v1+v2;
}
calculator.substract = function (v1, v2) {
return v1 - v2;
}
//再次定義一個全局add方法
function add(v1)
{
return v1;
}
console.log("命名空間方add結(jié)果");
console.log(calculator.add(1, 3));
console.log("---------------------------");
console.log("全局add方法結(jié)果")
console.log(add(2));
- 結(jié)果
image.png
這種方式顯然比定義全局方法在避免重名方面強一些?？蛇€是不夠嚴謹，在上面的calculator得add方法和substract方法，可以插入任意代碼。(這和強類型語言不通，一個類中，只能定義這個類的屬性和方法，怎么可能定義其他類)如下代碼
//定義命名空間calculator，相當于強類型語言里面的類，有一個常量屬性和兩個方法，add方法與substract方法
var calculator={
a: 123
}
calculator.add=function(v1,v2){
return v1+v2;
}
calculator.substract = function (v1, v2) {
return v1 - v2;
}
//定義命名空間calculator1
var calculator1 = {
a: 123
}
calculator1.add = function (v1, v2,v3) {
return v1 + v2-v3;
}
//再次定義一個全局add方法
function add(v1)
{
return v1;
}
console.log("命名空間方add結(jié)果");
console.log(calculator.add(1, 3));
console.log("---------------------------");
console.log("全局add方法結(jié)果")
console.log(add(2));
而且命名空間也可能出現(xiàn)如全局方法那樣重名的情況，造成代碼覆蓋。
3 私有空間法
采用私有空間定義calculator有四個方法，對外公開的只有add和substract方法
var calculator = (function () {
var a = 123;
var add = function (v1, v2) {
return v1 + v2;
}
var substract = function (v1, v2) {
return v1 - v2;
}
var mutiply = function (v1, v2) {
return v1 * v2;
}
var divide = function (v1, v2) {
return v1 / v2;
}
return {
add: add,
substract: substract,
// mutiply: mutiply,
// divide: divide
}
})()
var cal = calculator;
cal.add(1, 1);
console.log(cal.add(1, 1));
- 結(jié)果：
image.png
這種方式顯然比第二種方式更嚴謹些，calculator對象 定義為一個獨立的模塊，用時調(diào)用就可以了。
如果如何在calculator 對象中擴展一個取余的方法呢，
//擴展方法
var calculator = (function (a) {
a.mod = function (v1, v2) {
return v1 % v2;
}
return a;
})(window.calculator || {})
console.log(cal.mod(10, 3));
image.png
