1 全局方法
定义了一个全局方法add
- 代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>全局函数</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"//js是弱类型,可以对一个变量多次定义并可赋不同类型的值
var str=add(1,2);
alert(str);
</script>
再次运行：页面也能展示，但切换到检查模式下会发现程序会报错 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结果");
console.log(calculator.add(1, 3));
console.log("---------------------------");
console.log("全局add方法结果")
console.log(add(2));
- 结果
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结果");
console.log(calculator.add(1, 3));
console.log("---------------------------");
console.log("全局add方法结果")
console.log(add(2));
而且命名空间也可能出现如全局方法那样重名的情况，造成代码覆盖。
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));
- 结果：
image.png
这种方式显然比第二种方式更严谨些，calculator对象 定义为一个独立的模块，用时调用就可以了。
如果如何在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
