前端开发规范-一般规范

Posted 2021-03-30 传一乐程网

命名规范

命名分类

· camelCase（驼峰式，也叫小驼峰命名，e.g. userInfo）

· PascalCase（帕斯卡命名式，也叫大驼峰命名，e.g. UserInfo）

· kebab-case（短横线连接式，e.g. user-info）

· snake_case（下划线连接式，e.g. user_info）

变量命名

· 命名方式 : 小驼峰式命名方法

· 命名规范 : 类型+对象描述或属性的方式

// badvar getTitle = "LoginTable"
// goodlet tableTitle = "LoginTable"

函数命名

· 命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 )

· 命名规则 : 前缀为动词

动词 含义 返回值can  判断是否可执行某个动作 (权)  函数返回一个布尔值。true：可执行；false：不可执行has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值is   判断是否为某个值            函数返回一个布尔值。true：为某个值；false：不为某个值get  获取某个值                 函数返回一个非布尔值set  设置某个值                 无返回值、返回是否设置成功或者返回链式对象

推荐：

//是否可阅读function canRead(){ return true;}
//获取姓名function getName{ return this.name}

常量命名

· 命名方法 : 全部大写

· 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。

推荐：

const MAX_COUNT = 10;const URL = 'http://test.host.com';

类的成员命名

· 公共属性和方法 : 同变量命名方式

· 私有属性和方法 : 前缀为下划线(_)后面跟公共属性和方法一样的命名方式

推荐：

function Student(name) { var _name = name; // 私有成员  // 公共方法 this.getName = function () { return _name; }  // 公共方式 this.setName = function (value) { _name = value; }}var st = new Student('tom');st.setName('jerry');console.log(st.getName()); // => jerry：输出_name私有变量的值

注释规范

单行注释

1. 单独一行：//(双斜线)与注释文字之间保留一个空格

2. 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。

3. 注释代码：//(双斜线)与代码之间保留一个空格。

推荐 :

// 调用了一个函数 <= 1)单独在一行setTitle(); var maxCount = 10; // 设置最大量 <= 2)在代码后面注释 // setName(); // <= 3)注释代码

多行注释 ( / 注释说明 / )

· 若开始(/\*)和结束(\*/)都在一行，推荐采用单行注释

· 若至少三行注释时，第一行为/\*，最后行为\*/，其他行以*开始，并且注释文字与*保留一个空格。

推荐 :

/** 代码执行到这里后会调用setTitle()函数* setTitle()：设置title的值*/setTitle();

函数 ( 方法 ) 注释

函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照JavaDoc规范

语法：

/*** 函数说明* @关键字*/

常用注释关键字：

注释名	语法	含义	示例
@param	@param 参数名 {参数类型} 描述信息	描述参数的信息	@param name {String} 传入名称
@return	@return {返回类型} 描述信息	描述返回值的信息	@return {Boolean} true:可执行;false:不可执行
@author	@author 作者信息 [附属信息：如邮箱、日期]	描述此函数作者的信息	@author 张三 2015/07/21
@version	@version XX.XX.XX	描述此函数的版本号	@version 1.0.3
@example	@example 示例代码	@example setTitle('测试')

需要添加注释的地方

代码注释在一个项目的后期维护中显得尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。

以下情况，务必添加注释:

1. 公共组件使用说明2. 各组件中重要函数或者类说明3. 复杂的业务逻辑处理说明4. 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述7. 多重 if 判断语句