【原】Javascript[0x06] -- 基于Javascript范畴代码风格和规范的总结

nullPlus 2023-02-03 发布于浙江

展开全文

统一下代码的一些风格规范，其一是好看啊，看着爽呗，其二是容易排错吧，可能还有后续

先学会看

目前市面上有一套完备体系的Javascript编程规范有哪些？

Airbnb JavaScript Style Guide
Google JavaScript Style Guide
Idiomatic JavaScript Style Guide
JavaScript Standard Style Guide
jQuery JavaScript Style Guide

抓重点： 这么多要看到猴年马月去，找一个对的上眼的深入学习下，切勿都学，没这个必要，粗略扫读，有针对性阅读！

再学会写

备注：笔者菜鸡一枚很难道尽到底为什么这样写是对的或者错的，所以楼下统一用“美”，“矬”，表达我的主观感受。

注释

对于文件最头部的注释

/**
 * @Name: template.js
 * @Description: js模板
 * @Author: Jiangtao Zheng
 * @create: 2019-05-28 10:27
 * @update: 2019-05-28 10:27
 */

可能还有些版本啊，贡献者啊，简要功能罗列不举例了。

对于文件方法的注释


/**
 * @method gaoExplain
 * @description 我创建了一个方法返回a方乘以b方，我把它命名为gaoExplain
 * @param {number} a a变量, number类型
 * @param {number} b b变量, number类型
 * @returns {number} 返回一个number类型
 */
function gaoExplain (a, b) {
    return a * b * a * b;
}

gaoExplain(1, 2) //调用的时候就不需要空格了

其他的注释怎么开心怎么来吧！

声明

var 能不用就不用吧
let 能多用就多用吧
const 常量不可变用这个，最好么变量字母全大写const PROXY_URL = 'http://';
注意var有变量提升
全局变量能少用就少用，大写标记

命名

不外乎要么驼峰式、要么下划线式，要么杠

文件中相关内容命名

函数和变量: gaoFunc, gaoVariable
类名和枚举类型: GaoClass, GaoEnum
类方法：gaoClassFunc
常量：GAO_CONFIG

文件命名

注意用_分割不是用-,然后小写.

gao_filename.js
_gao_filename.js

计算

操作符左右空一格不要和字面量贴一起

美

var str = 'hello' + 'world';

矬

var str='hello'+'world';

var str2 = 'hello'+'world';

var str3 = 'hello' +'world';

优化

General JS

for(let i = 0; i < len; i++) 最快
for(let k in obj) 较慢
forEach 很慢
数组遍历和对象哪个快？
数组
那么多种遍历怎么选？
避免重复计算
举个例子，就是说你创建一个数组，遍历长度，先在外面给数组长度赋值给一个变量。

使用临时变量，避免对象多次查找

美

  var o = a.b.c;
  for (;;) {
      if (o) {
          // ...
      }
      // ...
  }

矬

  var a = {
      b: {
          c: 'd'
      }
  };
  for (;;) {
  if (a.b.c) {
      // ...
  }
  // ...
  }

V8 JS

一些V8支持的功能列表，比如Array.isArray(), Object.keys()
try/catch放在函数调用的外面，而不是函数实现的里面

Node JS
有些没有深刻的实践很难写，先做了标记，强烈推荐看这里：https://github.com/windyrobin/iFrame/blob/master/pp.md

Event
Buffer
File System
Stream
Net/Http Request
Http Agent
Http Response

纠结

到底末尾加不加";"?
不加主要是想偷懒，因为JavaScript会自动添加，加了主要是习惯了，记不住我还是加吧！抓重点就是句末要加。
什么时候用单引号'',什么时候用双引号"",什么时候用模板字符串``?

一般情况都用''

美

var http = require('http');
var str = 'hello world';

矬

var http = require("http");
var str = "hello world";

写JSON的时候用""

美

    {
        "name": "ataola",
        "age": 23,
        "address": "浙江杭州"
    }

后面就不是矬不矬的问题了，错！！！

    {
        'name': 'ataola',
        'age': 23,
        'address': '浙江杭州'
    }

楼上两个不好显示特定句子或者写起来太复杂的时候

美

var name = 'ataola';
var age = 24;
var address = '浙江杭州';
console.log(`Hello, My name is ${name}, I am ${age} and I live in ${address}!`)

矬

var name = 'ataola';
var age = 24;
var address = '浙江杭州';
console.log('Hello, My name is ' + name + ', I am ' + age + ' and I live in ' + address + '!')

一个tab到底是空两个还是四个好？
一个tab键，两个空格(node 源码及module 采用的标准)。
判断语句if括号后面到底跟不跟"{"?
美
```
if(awake) {
    console.log("do something!");
}
```
也美吧，个人觉得不是很矬
```
if(awake)
{
    console.log("do something!");
}
```
因为Javascript会自动添加句末的分号，导致一些难以察觉的错误。
用"==="还是"=="好?能用"==="就用"===",严谨一点嘛，"=="会进行隐式转换，注意0 undefined null false true,但有时我们可能讨巧的做法是就用到了隐式转换，听着像是讲了句屁话。

创建对象或者数组写{}或者[]还是new Array或者new Object能少写就少写嘛！浓缩是精华，少写一点你不开心吗？,同样的 new String, new Boolean, new Number不要这么写，new Date, new Regexp这两个可以有

美

  var arr = ['hello', 'world'];
  var obj = {
      "name": "ataola",
      "age": 23
  }

矬

  var arr = [
      'hello', 'world'
  ];

  var obj = {
      "name": "ataola"
      ,"age": 23
  }

什么时候用with和eval

eval它可以计算一个字符串的值就比如eval('1+2+3')能够得到6，但具体场景还是不清楚，with会产生歧义，所以尽量不用吧！

for-in循环的使用场景？

仅在object/hash/map时使用， array不要用，绝对不要用

不要把array当关联数组或者Object使用(PS: 不要用非数字的数组索引)

美

  var obj = {};
  obj.name = 'ataola';
  obj.age =23;

矬

  var arr = [];
  arr['name'] = 'ataola';
  arr['age'] = 23;

Node 的异步回调函数的第一个参数应该是错误指示
```
function cb(err, data , ...) {...}
```
做个标记，后续去思考下，目前的理解是已捕获错误，你都错了还执行这显然很不合适嘛！

类继承写法，尽管有各种方式来实现继承，但最为推荐的是Node 的标准写法

  function Socket(options) {
  // ...
  stream.Stream.call(this);
  // ...
  }

  util.inherits(Socket, stream.Stream);

怎么区分是一个类的私有变量？
如果你在模块中 exports 一个类，对于此类的私有成员变量，建议加上 "_" 前缀以示区分
比如说，声明多个变量时，是用多个","还是一行一个用";"呢？
变量声明时，应该每行声明一个，不应该都写在一行（尽管这被JSLint 所推荐）。
美
```
  var express = require('express');
  var logger = require('morgan');
```
猥琐的美
```
  var express = require('express'),
      , logger = require('morgan');
```

return 对象的写法美

return {

　　　　key : value;

　　};

矬

    return

　　{

　　　　key:value;

　　};

等号多变量赋值好不好，形如var a = b = 2
不好！实际和期望不符
怎么创建对象合理？
不要用new命令，改Object.create()
++x/--x, x--/x++好，还是+=, -=好，
后者好，前者容易出错
if如果你能够确定，尽量不要偷懒，请使用大括号。

参考文献

cnode社区- node编程规范征集

阮一峰的网络日志 - Javascript编程风格

github-fex-team - Javascript编码规范

fengmk2 - 我的nodejs编程规范备注：访问时已经打不开，我是查阅源代码看的，比较鸡肋

drupal - JavaScript coding standards

github-iFrame - Node编码规范

github-iFrame - Node陷阱与优化

Crockford - JavaScript代码规范