前端命名规范

最新推荐文章于 2025-07-16 16:11:48 发布

置顶 M周

最新推荐文章于 2025-07-16 16:11:48 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签：前端命名规范前端开发

本文链接：https://blog.youkuaiyun.com/qq_36538734/article/details/90111400

命名

驼峰式命名法介绍

Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo
Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

文件夹命名

驼峰命名orderList

文件资源命名（js）

文件名不得含有空格

驼峰命名

文件名建议只使用小写字母，不使用大写字母。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )

引入资源使用相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除非这两者协议都不可用。

<script src="//cdn.com/foundation.min.js"></script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190511161616929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4NzM0,size_16,color_FFFFFF,t_70

H5语义化标签

DOM结构，用H5语义化标签 header footer aside main（main一个page中only one）

Vue 组件命名

驼峰命名

subHeader

Vue组件使用

单词之间-隔开

<sub-header></sub-header>

变量命名

编辑
命名方式 : 小驼峰式命名方法
命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词

类型	小写字母
array	a
boolean	b
number	n
function	fn
object	o
string	s

let tableTitle = "LoginTable"      let oUser={key:value}

函数命名

动词+名词驼峰

每个函数前加注释

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

//是否可阅读function canRead(){    return true;
}

//获取姓名function getName{    return this.name
}

/**
* 关闭路径为url的tab 并不在缓存
* @param url {string} 路由路径
*/
bus.$on('closeTab', url => {
    var index = this.path.indexOf(url)
    bus.$emit('closeTags',index)
})

常量

命名方法 : 全部大写

const 定义

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

 var MAX_COUNT = 10;
 var URL = 'http://www.baidu.com';

注释规范

编辑
注释可以用编译器快捷方法，但解释注释请按照规定来

单行注释 ( // )

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

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

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

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

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

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

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

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


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

/**
- 合并Grid的行
- @param grid {Ext.Grid.Panel} 需要合并的Grid
- @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
- @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
- @return void
- @author zy 2018/01/01
- @example   <title name="zy" ></title>  

 */