天天看点

微信小程序开发规范文档-JavaScript格式规范

前奏

约定JavaScript使用ES6标准开发

wxs(WeiXin Script)和JavaScript是不同的语言,有自己的语法,wxs请参考wxs文档,这里的规范仅针对js。

变量命名

关于变量命名,主流分为驼峰式命名和下划线式命名两大阵营。我们约定,统一使用驼峰式命名。

  • 推荐写法

    let userId = 654321;

    function getUserInfo () {

    ....

    }

  • 不推荐写法

    let user_id = 654321;

    function get_user_info () {

    ....

    }

分号

尽管现在JavaScript引擎知道该在什么情况下自动添加分号,由于项目历史原因和避免代码压缩时产生不必要的问题,我们约定使用分号。分号紧跟代码的最后一个字符。

  • 推荐写法

    let loading = -1;

  • 不推荐写法

    let loading = -1 ;

逗号

逗号分割列表时,逗号放置在当前行的末尾。

  • 推荐写法

    let bar = 1,

    foo = 2;

  • 不推荐写法

    let bar = 1

    , foo = 2;

数组(或对象)的最后一个元素(或属性)后面的逗号是拖尾逗号,示例:

let o = {
   a: 1,
   b: 2, // 拖尾逗号
 }
           

对于数组和对象,最后一个元素或属性与右括号]或}不在同一行时,可以(但不要求)使用拖尾逗号;在同一行时,禁止使用拖尾逗号。

  • 推荐写法

    let arr = [\'name\',

    \'age\',

    \'gender\',

    ]

    let o1 = {a: 1,b: 2};

    let o2 = {

    a: 1,

    b: 2,

    };

  • 错误写法

    let arr = [\'name\',\'age\',\'gender\',]

    let o1 = {a: 1,b: 2,}

缩进

统一使用2个空格字符进行代码缩进。

空格

操作符

操作符前后加一个空格字符。

  • 推荐写法

    let a = 1 + 2;

  • 不推荐写法

    let a = 1+2;

逗号

同一行内代码用到逗号,逗号后面加一个空格字符,提高代码可读性。

  • 推荐写法

    let bar = 1, foo = 2;

    let arr = [1, 2, 3, 4, 5];

  • 不推荐写法

    let bar = 1,foo = 2;

    let arr = [1,2,3,4,5]

函数

函数声明式声明函数时,函数名与参数括号()连在一起,之间不加空格;参数括号()与函数体的左大括号{之间一个空格字符。

  • 推荐写法

    function getInfo(userId) {

    ...

    }

  • 不推荐写法

    function getInfo1 (userId) {

    ...

    }

    function getInfo2(userId){
      ...
    }
               
    函数字面量里,关键字function与参数括号()之间一个空格字符,参数括号()与函数体的左大括号{之间一个空格字符。
  • 推荐写法

    let getInfo = function (userId) {

    ...

    }

  • 不推荐写法

    let getInfo1 = function(userId) {

    ...

    }

    let getInfo2 = function(userId){
      ...
    }
               
    函数调用时,禁止有空格。
  • 推荐写法

    getInfo();

  • 错误写法

    getInfo ();

对象字面量

对象字面量的属性名和冒号:之间不能有空格字符,冒号:和属性值之间一个空格字符。

  • 推荐写法

    let o1 = { a: 1, b: 2, c: 3 }

    let o2 = {

    e: 5,

    f: 6,

    g: 7,

    }

  • 不推荐写法

    let o1 = { a:1, b :2, c : 3}

    let o2 = {

    e:5,

    f :6,

    g : 7,

    }

    对象字面量在一行内时,左括号{和右括号}与代码各间隔一个空格字符。

  • 推荐写法

    let o1 = { a: 1, b: 2, c: 3 }

  • 不推荐写法

    let o1 = {a: 1, b: 2, c: 3}

单行代码

在单行代码中使用空格。

  • 推荐写法

    function foo() { return true }

    if (true) { return true }

  • 不推荐写法

    function foo(){return true}

    if(true){return true}

代码块

大括号{}包裹起来的代码叫代码块,示例:

{
  let userId = 654321;
}
           

代码块前统一加一个空格字符

  • 推荐写法

    if (true) {

    return \'成功!\'

    }

    function getInfo() {
      ...
    }
               
  • 不推荐写法

    if (true){

    return \'成功!\'

    }

    function getInfo(){
      ...
    }
               

计算属性

在对象的计算属性内,禁止有空格。

  • 推荐写法

    obj[\'name\']

  • 不推荐写法

    obj[\'name\' ]

    obj[ \'name\']

空行

空行对分离代码逻辑有帮助,但过多的空行会占据太多的屏幕空间,影响代码可读性。我们约定,最大连续空行数为2。

  • 推荐写法

    if(true) {

    console.log(\'成功!\');

    }

    function getUserInfo () {
      ...
    }
               
  • 不推荐写法

    if(true) {

    console.log(\'成功!\');

    }

    function getUserInfo () {
      ...
    }
               

在非空文件中,拖尾空行可以减少版本控制时的代码冲突。

  • 推荐写法

    function getUserInfo () {

    ...

    }

    // ↑上面一行是空行

  • 不推荐写法

    function getUserInfo () {

    ...

    }

大括号{}风格

用来描述大括号{}与代码块相对位置的方法很多,如下:

  • 风格一

    if (true) {

    console.log(\'true\');

    } else {

    console.log(\'false\');

    }

  • 风格二

    if (true) {

    console.log(\'true\');

    }

    else {

    console.log(\'false\');

    }

  • 风格三

    if (true)

    {

    console.log(\'true\');

    }

    else

    {

    console.log(\'false\');

    }

    我们约定,使用风格一。