• 编写规范的javascript


    js代码,前端都会写。但细节决定成败,代码是否优雅、规范,可以看得出一个JScoder的水平来。

    曾经多次被项目组长吐槽,并被授予一本秘笈,上面有关于JS编程规范的一些总结。

    无奈秘笈不能长借,无奈只能用最愚蠢的办法,拍照mark下,然后今天抽空整理整理。

    废话到此为止,下面言归正传。

     

    1.语句结尾总是加上分号

    JS的语句,要么独占一行,要么以分号结尾。

    虽然绝大多数情况下独占一行的js代码缺省分号也不会产生错误(这全赖于分析器的自动分号插入机制),但依旧不推荐缺省分号。

    因为自动分号插入机制的分号插入规则很复杂且难以记住,习惯性以分号结束语句,能减少意外bug的发生率。

     

    2.关于命名

    命名,是任何一个coder最为苦恼的问题之一...

    命名不仅是一门科学,更是一门技术。但通常来讲,命名长度应该尽可能短,并抓住要点。

    变量和函数的命名应当总是遵循驼峰大小写命名法。

     

    变量命名

    尽量在变量名中体现出值的数据类型。比如:count,length,size是数字;name,title,message是字符串;单个字符i,j,k通常在循环中使用。

    避免使用没有意义的命名,要尽可能做到让其他开发者一看到变量的命名,就能理解变量的作用。

     

    函数命名

    对于函数和方法的命名,第一个单词应该是动词,下面是一些使用动词常见的约定:

    can — 返回一个布尔值

    has — 返回一个布尔值

    is — 返回一个布尔值

    get — 返回一个非布尔值

    set — 用来保存一个值

    尽管这些约定没有被归入当下流行的编程风格中,但在很多流行的库中,我们也能看到它们的影子。

     

    常量命名

    JS其实并没有真正的常量概念。但为了区分普通的变量(变量的值是可变的)和常量(常量的值初始化之后就不能变了),一种通用的命名约定应运而生。

    这个约定源于C语言,使用大写字母和下划线来命名,下划线用以分隔单词。如:MAX_COUNT,URL。

     

    构造函数命名

    构造函数通常用名词来命名,因为它们是用来创建某个类型的实例的。

    为了从变量和普通函数中区分出来,用大驼峰命名法。如:

    function Person(name){ this.name = name; };
    var me = new Person("Jack");

     

    3.关于直接量

    JS中包含一些类型的原始值:字符串、数字、布尔值、null、undefined。同样也包含对象直接量和数组直接量。

    这其中,只有布尔值是自解释的。其他类型或多或少都要思考一下它们如何更精确的表示出来。

     

    字符串

    在JS中,字符串是独一无二的。字符串可以用单引号或双引号括起来。

    在功能上,两种做法并无不同。除了内部出现字符串界定符时需要转义之外,两种做法在功效上完全一致。

    因此,下面代码中,使用双引号括起来的字符需要对双引号进行转义,而使用单引号括起来的字符串则不必如此。

    // 使用双引号括起来,里面的双引号需要转义
    var msg = "Jack says, "Hi."";
    // 使用单引号括起来,里面的双引号需要转义
    var msg = 'Jack says, "Hi."';

    你只需要关心你的代码是否从头到尾保持同一风格。

    关于字符串还有一个问题需要注意,就是创建多行字符串。通常用字符串连接符(+)将字符串分成多份。如:

    var longStr = "This is a very long String, so we " +
      "write it like this.";

     

    数字

    JS中数字类型只有一种,不管整数还是浮点数,统一存储为数字数据类型。

    // 整数
    var count = 10;
    
    // 浮点数
    var price = 10.0;
    var price = 10.30;
    
    // 不推荐的浮点数写法 (没小数部分)
    var price = 10.;
    
    // 不推荐的浮点数写法 (没整数部分)
    var price = .1;
    
    // 八进制写法不推荐使用
    var num = 010;  //这里不是表示10,而是表示八进制中的8,0开头表示这个数为8进制数
    
    // 十六进制写法
    var num = 0xA2; //这里的0x开头表示此数是十六进制数,数值为A2(JS的十六进制数怎么表示小数,我搜过下,但没找到答案,知道的请告知下)
    
    // 科学计数法
    var num = 2.01e2; //这里表示2.01乘以10的2次方

     

    null

    null是一个特殊值,但我们常常误解它,将它和 undefined 搞混。

    在下面的场景中,应当使用null

    用来初始化一个变量,这个变量可以赋值为一个对象

    用来和一个已经初始化的变量比较,这个变量可以是一个对象,也可以不是

    当函数的参数期望是对象时,用作参数传入

    当函数的返回值期望是对象时,用作返回值传出

    还有下面一些场景不应当使用null:

    不要使用null来检测是否传入了某个参数

    不要使用null来检测一个未初始化的变量

    下面是一些示例代码:

    // 好的用法
    var person = null;
    
    // 好的用法
    function getPerson(){
      if(condition){
        return new Person("Jack");
      }else{
        return null;
      }        
    }
    
    // 好的用法
    var person = getPerson();
    if(person !== null){
      doSomething();
    }
    
    // 不好的用法:用来和未初始化的变量比较
    var person;
    if(person !== null){
      doSomething();
    }
    
    // 不好的用法:检测是否传入了参数
    function doSomething(arg1, arg2, arg3, arg4){
      if(arg4 != null){
        doSomethingElse();
      }
    }

    理解null最好的方式是把它当成对象的占位符。

     

    undefined

    undefined也是一个特殊值,我们常常将它和null搞混。其中一个最让人疑惑之处在于 null == undefined 结果是 true。

    然而,这两个值的用途却各不相同。

    那些没有被初始化的变量,都有一个初始值,即undefined,表示这个变量等待被赋值。如:

    var person;
    console.log(person === undefined);  //结果为true

    说到undefined,不得不顺带提一提typeof。对于typeof,不管是已经声明,但未初始化的变量,还是未声明的变量,其运算结果都是“undefined”。

    尽管两者在其他场景中的行为有天壤之别(在语句中使用已声明但未初始化的变量不会报错,而使用未声明的变量会报错)。

    // foo 未被声明
    var person;
    console.log(typeof person); //结果为undefined
    console.log(typeof foo); //结果为undefined

    上文提到的两种不应当用null的场景,用undefined就恰到好处:

    // 和未初始化的变量比较
    var person;
    if(person !== undefined){
      doSomething();
    }
    
    // 检测是否传入了参数
    function doSomething(arg1, arg2, arg3, arg4){
      if(typeof arg4 !== "undefined"){
        doSomethingElse();
      }
    }

    对象直接量

    使用对象直接量创建一个对象,将对象的所有属性直接写在一对花括号中。这样的方式高效而且简单。

    // 不好的写法,先显式创建一个Object实例,然后添加属性,看起来很繁琐
    var book = new Object();
    book.title = "Javascript";
    book.anthor = "Jack";
    
    // 好的写法
    var book = {
      title: "Javascript",
      anthor: "Jack"
    };

    数组直接量

    和对象直接量类似,直接用一对方括号将数组初始元素括起来的方式创建一个数组,简单,直接。

    // 不好的写法,显式的用Array构造函数来创建数组
    var colors = new Array("red", "green", "blue");
    
    // 好的写法
    var colors = ["red", "green", "blue"];



  • 相关阅读:
    常见字符编码扫盲(UTF,Unicode, GB2312) 四
    Ogre 实用技巧 四
    CEGUI中文显示问题的解决方法 四
    大幅革新 AMD下一代图形产品前瞻 四
    力争上游 ——我眼中的“计算机产业链” 四
    养成 SQL SERVER 的好习惯 四
    说说 Windows 中的中文字体 四
    Unicode字符集和多字节字符集关系 四
    各种电影 四
    [projectEuler.net]12
  • 原文地址:https://www.cnblogs.com/czf-zone/p/3632859.html
Copyright © 2020-2023  润新知