搜索
您的当前位置:首页正文

模块化的思维定义js方法

来源:二三娱乐

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

总结 这三种方式显然第三种更模块化,更方便调用。

Top