前端开发规范-一般规范

Posted 传一乐程网

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发规范-一般规范相关的知识,希望对你有一定的参考价值。

命名规范

命名分类

· 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 判断语句






 

以上是关于前端开发规范-一般规范的主要内容,如果未能解决你的问题,请参考以下文章

前端开发规范总结

web前端开发规范项目流程总结

web前端开发代码规范!

前端开发规范-JS规范

前端开发代码规范

前端开发规范及开发文档