• 微信小程序开发规范文档-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');
      }

      我们约定,使用风格一。

  • 相关阅读:
    Chrome下的语音控制框架MyVoix.js使用篇(二)
    Chrome下的语音控制框架MyVoix.js使用篇(三)
    Echarts X轴多项百分比的展示
    jsMind思维导图模式展示数据
    使用SqlBulkCopy将DataTable百万级数据瞬间入库
    SQL根据指定节点ID获取所有父级节点和子级节点
    让div在body中任意拖动
    ASP.NET MVC使用jQuery实现Autocomplete
    Django简介
    注册表单
  • 原文地址:https://www.cnblogs.com/jianxian/p/12692435.html
Copyright © 2020-2023  润新知