JavaScript的三种代码书写格式

在这里我将 JavaScript 的类与 Java( 本人主要是做Java开发的) 的类做一个比较，以便大家能够更好的理解。

 

1. 在没有接触 JS 的面向对象编程之前，写JS的函数都是像下面这样写的：

function test(){

    var v1 = "test";

    var v2 = "value";

    if(v1=="test"){

        v2 = v1;

    }

}

在上面这个 test() 函数里面的变量  v1 和  v2 其实我们可以看成是 Java 里面的全局静态常量， 写在 test() 里的一些代码和逻程相当于 Java 里面的静态代码块， 所以我们在 html 或者jsp里面调用 test() 函数可以直接写调用, 而不用去初使化，因为静态常量 和 静态代码块是可以直接通过类名调用的。例如 ：<input type="button" οnclick=" test()" >

 

2. 如果我们要将去封装一个JavaScript 的类库, 并在类库中提供相应的方法，该如何去写呢？ 如下：

function KTools(){}

KTools.prototype = {

    //去除首尾空格

    trim : function(str){

        return str.replace(/(^\s+)|(\s+$)/g, "");

    },

    //去除全部空格    

    trimAll : function(str){

        return str.replace(/\s+/g, "");

    }

};

这里的 KTools 类，如果我们在 html 里进行调用的话，直接通过类名去调用 trim() 方法的话，是调用不到的，我们必须先 new KTools() 的对象，例如：<input type="button" οnclick=" new KTools().trim('sss ssss')" >如果在 trim() 方法里面定义一个变量，就属于是局部变量了。通过和 Java 对比我们发现，其实JavaScript 和 Java 还有不少相似之处！

 

3. 除了上面这两种JS代码块的书写格式，我还用过第三种书写格式，如下：

var DT = {

    //模块加载

    moduleLoad : function(){

          DT.menuLoad(null);

    },     

    //列表加载

    listLoad : function(){

        .........

    },

    //菜单加载

    menuLoad : function(json){

        ..........

    },

    //评论加载

    commentLoad : function(){

        .........

    }

};

这种格式书写的代码，在 html 中调用是  变量名[DT].方法名[menuLoad]()， 例如：<input type="button" οnclick="DT.listLoad();" > 

在这里，方法之间也可以相互调用。  通过这种格式书写出来的代码，调用起来也比较方便，代码的层次结构也比较清晰！

在使用的过程中，可以选择一种更适合自己的格式去书写 JS 代码！