js规范

匿名函数

要避免全局变量泛滥, 可以考虑使用匿名函数, 把不需要在外部访问的变量或者函数限制在一个比较小的范围内。

例如以下代码:

<script>
    function func1(){
        var list = ["a", "b", "c"];

        for(var i = 0; i < list.length; i++){
            //..
        };
    }
    func1(); // 自动运行
</script>

这段代码的作用是在页面加载的时候自动执行某些操作, 并不需要被外部调用, 但是它执行过后却留下了一个全局的函数。

像这种情况, 非常有必要使用匿名函数:

<script>
    (function func1(){
        var list = ["a", "b", "c"];

        for(var i = 0; i < list.length; i++){
            //..
        };
    })(); // 自动运行
</script>

匿名函数的格式:

(function(){
    // 代码块
})();

如果要带参数的话:

(function(arg1, arg2, argN){
    //..
})(arg1, arg2, argN);

 

 

命名空间

还有另外一个方法可以减少全局变量, 那就是命名空间, 在JS中可以用"对象-属性"来模拟命名空间;

window.com = {}

window.com.bytter = {}

window.com.bytter.hello = function(){
    alert("hello");
}

如果你要给某个已经存在的页面增加功能, 可能要增加十多个函数, 而那个页面已经存在大量的全局变量和函数, 甚至还有函数跟你新增的函数同名, 怎么办?

命名空间是比较好的选择, 你可以创建一个命名空间, 把你的新函数都放在那个命名空间之下, 例如:

<button type="button" onclick="pg.check.userAcc()">检查用户名</button>
<button type="button" onclick="pg.check.userAcc()">检查帐号</button>

<script>
    window.pg = {}

    window.pg.check = {
        // 检查用户名
        userName: function(){
            //..
        },
        // 检查帐号
        userAcc: function(){
            //..
        }
    };
</script>

互不干扰

结合上述的匿名函数和命名空间的使用, 可以把一个页面中自己维护的代码与其它的代码分隔开来, 将与外部代码的耦合降低到最小。

<script>
    // 页面命名空间
    window.pg = {}


    // 检查用户信息
    // 作者:张三
    // 最后更新: 2012.12.31
    (function(){

        // 私有变量
        var a, b, c;

        // 检查用户信息的相关方法
        window.pg.check = {
            // 检查用户名
            userName: function(){
                //..
            },
            // 检查帐号
            userAcc: function(){
                //..
            }
        };

    })(); // end 张三的代码


    // xxx功能
    // 作者:李四
    // 最后更新: 2012.1.1
    (function(){
        window.pg.xxx = {
            //..
        }
    })(); // end 李四的代码

</script>

变量声明

变量必须在使用前用var进行声明;

变量的声明应该放在代码块或者函数的头部;

可在一行内声明多个变量, 但要考虑美观易读;

// 银行名称, 银行帐号 
var type, acc;


// 银行名称, 银行帐号
var type = "中国银行", acc = "xxxxxx";


var type = "中国银行",   // 银行名称
    acc = "xxxxxx";      // 银行帐号

尽量使用易于理解的变量名,如:

var bankType = "中国银行",
    bankAccount = "xxxxxx"; 

命名

普通变量名和函数名采用"小驼峰式命名法", 如:firstName、lastName

作为构造函数的函数采用"大驼峰式命名法", 如:

var Person = function(){
    //..
}

var me = new Person();

常量用大写和下划线表示,如:

var ROOT_PATH = "/v10/";

分号

每条语句必须使用分号结尾(特别是需要压缩的js,省略分号常常会导致压缩失败);

大括号

if语句、函数定义、try语句等带大括号的结构, 左大括号应紧跟前面的部分:

// good
var Person = function(){
    //..
}

// bad
var Person = function()
{
    //..
}

使用复合语句时不要省略大括号{}

// good
for(var i = 0; i < ary.length; i++){
    list.push(ary[i]);
}

// bad
for(var i = 0; i < ary.length; i++)
    list.push(ary[i]);

以提高代码可读性为前提,允许例外:

if(!data) return;

if(row) list.push(row);

空格

数值操作符(如, +/-/*/% 等)、比较符(大于、小于、等于)两边留空格;

逗号、冒号、分号后要留一个空格(如果后面还有内容的话);

行尾不要有空格;

点号前后不要出现空格;

函数名末尾和左括号之间不要出现空格;

字符串

表示字符串用单引号或双引号均可, 建议统一使用双引号,

但表示html标签时一律使用单引号, 如:

var html = ‘<div class="msg" ></div>‘;

数组

使用简便的方式定义数组:

// good
var list = [1, 2, 3];

// bad
var list = new Array();
list[0] = 1;
list[1] = 2;
list[2] = 3;

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。