1 全局方法
定義了一個(gè)全局方法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是弱類型,當(dāng)在上面代碼str賦值之前填上一句代碼 var add="aaa"
<script type="text/javascript">
var add=function(v1,v2){
return v1+v2;
}
var add="aaa"http://js是弱類型,可以對(duì)一個(gè)變量多次定義并可賦不同類型的值
var str=add(1,2);
alert(str);
</script>
再次運(yùn)行:頁(yè)面也能展示世剖,但切換到檢查模式下會(huì)發(fā)現(xiàn)程序會(huì)報(bào)錯(cuò) add is not a function
image.png
- 可見(jiàn)在項(xiàng)目代碼非常多時(shí)或者由幾個(gè)人同時(shí)參與的大型項(xiàng)目中定罢, 一個(gè)人定義的變量或者方法可能與其他人重名,這樣就會(huì)把別人的代碼覆蓋掉旁瘫。
2命名空間法
//定義命名空間calculator祖凫,相當(dāng)于強(qiáng)類型語(yǔ)言里面的類,有一個(gè)常量屬性和兩個(gè)方法酬凳,add方法與substract方法
var calculator={
a: 123
}
calculator.add=function(v1,v2){
return v1+v2;
}
calculator.substract = function (v1, v2) {
return v1 - v2;
}
//再次定義一個(gè)全局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
這種方式顯然比定義全局方法在避免重名方面強(qiáng)一些惠况。可還是不夠嚴(yán)謹(jǐn)宁仔,在上面的calculator得add方法和substract方法稠屠,可以插入任意代碼。(這和強(qiáng)類型語(yǔ)言不通翎苫,一個(gè)類中权埠,只能定義這個(gè)類的屬性和方法,怎么可能定義其他類)如下代碼
//定義命名空間calculator煎谍,相當(dāng)于強(qiáng)類型語(yǔ)言里面的類攘蔽,有一個(gè)常量屬性和兩個(gè)方法,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;
}
//再次定義一個(gè)全局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有四個(gè)方法,對(duì)外公開(kāi)的只有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
這種方式顯然比第二種方式更嚴(yán)謹(jǐn)些作岖,calculator對(duì)象 定義為一個(gè)獨(dú)立的模塊唆垃,用時(shí)調(diào)用就可以了。
如果如何在calculator 對(duì)象中擴(kuò)展一個(gè)取余的方法呢痘儡,
//擴(kuò)展方法
var calculator = (function (a) {
a.mod = function (v1, v2) {
return v1 % v2;
}
return a;
})(window.calculator || {})
console.log(cal.mod(10, 3));
image.png