JS 语法规范 #69

简介: JS 语法规范 #69

采用小写驼峰式命名


// good
studentInfo
// bad
studentinfo
STUDENTINFO


常量命名方式


// good
const COL_NUM = 10;
// bad
const col_num = 10;


使用字面量


// good
const obj = {
    name:'faker'
}
// bad
let obj = {};
obj.name = 'faker';


函数参数使用解构


// good
function createPerson({ name, age }) {
    // ...
}
createPerson({
    name: 'Faker',
    age: 18,
});
// bad
function createPerson(name, age) {
    // ...
}


使用参数默认值


// good
function createMicrobrewery(name = 'faker') {
    // ...
}
// bad
function createMicrobrewery(name) {
    const breweryName = name || 'faker';
    // ...
}


函数式编程


// good
const programmerOutput = [
    {
        name: 'Uncle Bobby',
        linesOfCode: 500
    }, {
        name: 'Suzie Q',
        linesOfCode: 1500
    }, {
        name: 'Jimmy Gosling',
        linesOfCode: 150
    }, {
        name: 'Gracie Hopper',
        linesOfCode: 1000
    }
];
let totalOutput = programmerOutput
  .map(output => output.linesOfCode)
  .reduce((totalLines, lines) => totalLines + lines, 0)
// bad
const programmerOutput = [
    {
        name: 'Uncle Bobby',
        linesOfCode: 500
    }, {
        name: 'Suzie Q',
        linesOfCode: 1500
    }, {
        name: 'Jimmy Gosling',
        linesOfCode: 150
    }, {
        name: 'Gracie Hopper',
        linesOfCode: 1000
    }
];
let totalOutput = 0;
for (let i = 0; i < programmerOutput.length; i++) {
    totalOutput += programmerOutput[i].linesOfCode;
}


缩进


统一使用一个 作为缩进tab


空格


二元运算符两侧必须有一个空格,一元运算符与操作对象之间不允许有空格。

用作代码块起始的左花括号 { 前必须有一个空格。

// good
var a = !arr.length;
a++;
a = b + c;
// good
if (condition) {
}
while (condition) {
}
function funcName() {
}
// bad
if (condition){
}
while (condition){
}
function funcName(){
}


禁止使用 var,使用 let、const 代替


// good
let a = 123;
// bad
var a = 123;


JS 中使用单引号',在 DOM 中使用双引号"


// good
const str = '我是一个字符串';
<div className="div" />
// bad
const str = "我是一个字符串";
<div className='div' />


使用模板字符拼接字符串``


// good
const name = 'faker';
const str = `我叫${a}`;
// bad
const name = 'faker';
const str = '我叫' + a;


变量命名语义化


// good
const student = 'faker';
// bad
const a = 'faker';


注释


  • 单行注释:必须独占一行。 后跟一个空格,缩进与下一行被注释说明的代码一致//
  • 多行注释:避免使用 这样的多行注释。有多行注释内容时,使用多个单行注释/_..._/
  • 文档化注释:为了便于代码阅读和自文档化,以下内容必须包含以 形式的块注释中。/\*_..._/


每个 JS 文件在头部需要给出该页面的信息


// good
/*
 * 充值记录页面
 * @Author: Jiang
 * @Date: 2019-06-12 15:21:19
 * @Last Modified by: Jiang
 * @Last Modified time: 2019-07-23 10:55:51
*/
// bad
无任何注释


不要省略分号


// good
const student = 'faker';
// bad
const student = 'faker'
目录
相关文章
|
3月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
128 1
|
29天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
1月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
18 0
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
3月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
3月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
4月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
140 4
|
5月前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
37 5
|
4月前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
53 1
|
4月前
|
存储 JavaScript 前端开发
下一篇
无影云桌面