关于JavaScript语法规范

开课吧开课吧锤锤2021-06-08 14:39

    JavaScript因为互联网而生,紧随着浏览器的出现而问世。

web

   标识符的命名规范

    ECMAScript标识符遵循以下标准命名规则:

    第一字符必须是为字母、下划线(_)或者美元符号($)。

    其他字符可以是字母、下划线、美元符号或数字,最好不要包含其他字符。

    不能把关键字或者保留字作为标识符。

    例如下面的代码都是错误的:

var 5count=0;       //首字符不能使用数字
var yes/no=false;    //包含非法字符“/”
var undefined="undefined";  //undefined是内建常量关键字

    程序注释

    (1)单行注释和尾随注释

    使用双斜线“//”可以定义单行注释或尾随注释。

    例如下面的代码:

var oDate=new Date();   // 创建新的日期对象
// 检查今天是否是星期日
if(day=="sun"){
}

    (2)多行注释

    多行注释又被称为块注释,可以使用“/*”和“*/”进行定义,位于注释开始标签“/*”和注释结束标签“*/”之间的任何字符都将被解释为注释并忽略。

    例如下面的代码:

/* 本例采用多行的注释方式
*/

    (3)文档注释

     文档注释以“/**”开始,以“*/”结束,且每行都以一个星号“*”开头。

    例如下面的代码:

/**
  * 该类为文档注释示例类
  * @author pengjunlee
  * @versioin 1.0.0.1
  * @since js 1.5
  */   
  function HelloWorld(){}

    (4)HTML注释

    HTML注释以“”结束。

    例如下面的代码:

<!--这里是HTML注释-->

    常用标识符命名方法

    (1)驼峰命名法(CamelNotation)

    第一个单词首字母小写,其余所有单词首字母大写。变量、函数、方法、属性等基本都采用这种命名方法。

    例如下面的定义:

function displayUserInfo(){};
var userName;

    (2)帕斯卡名法(PascalNotation)

    所有单词首字母大写。经常被用在类、接口的声明中,例如,HelloWorld就可以作为一个类名,而接口名经常在前面加一个大写字母I,例如IHelloWorld。

    (3)匈牙利命名法(HungarianNotation)

    在标识符前面增加小写字母做前缀,多用于C、C++的标识符命名。其基本规则是:

    标识符名称=特性前缀+功能描述

    例如变量m_wndStatusBar,前缀m_表示类的成员,wnd也是前缀,表示的是变量对象特性,这里wnd的意义是窗口,所以m_wnd表示窗口类的成员,而StatusBar则是变量的功能描述。

    ECMAScript5严格模式

    严格模式(StrictMode)是ECMAScript5新增的功能,使用严格模式可以捕捉到一些常见的代码错误,抛出异常。当一些相对来说不安全的操作执行时,使用严格模式可以阻止或者抛出异常。

    要在全局范围内使用严格模式,只需在程序第一行定义下面的一行代码:

"use strict";

    要在函数内使用严格模式,只需在函数体内第一行定义下面的一行代码:

function fnInStrictMode(){
      "use strict";
      //... 其他代码 ...
}

    采用小写驼峰式命名

// 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'

    外链式注意点

    外链式的script代码块中不能编写js代码,即便写了也不会执行

    由于每次加载外链式的js文件都会发送一次请求,这样非常消耗性能,所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。

    页内式注意点

    <script></script>标签中的js代码一半写在文档的尾部;

    网页是从上至下加载,而js代码通常是给标签添加交互(操作元素),所以需要先加载HTML,否则如果执行js代码时HTML还未被加载,那么js代码将无法添加交互(操作元素);

    HTML页面中出现<script>标签后,就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。所以如果把js代码如果写在head中,那么js代码执行完毕之前后续网页无法被加载。

    行内式

<button onclick="alert('今天天气很好!');">今天天气很好!</button>

    页内式

</body>
      ......     <script type="text/javascript">
        alert("今天天气很好!");     </script>
 </body>

    外链式格式

 <script type="text/javascript" src="01-js书写格式.js"></script>
      <script type="text/javascript" src="index.js">
            alert("今天天气很好!"); // 不会被执行
       </script>

    严格模式仅仅是使用一行文本字符串声明来实现,所以对于旧的不支持严格模式的浏览器来说不存在兼容性问题,因此可以放心大胆地使用。

    以上就是小编为大家整理的“关于JavaScript语法规范”一文,更多Web教程尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享