web前端开发命名规范参考 div+CSS的命名规则？

我爱编程网小编给大家带来了web前端开发命名规范参考 div+CSS的命名规则？相关文章，一起来看一下吧。

div+CSS的命名规则？

css样式的类名或者相关的ID名也是需要一定的规则，这样有利于前台和后台的交互。
1、一般公司开发都是给技术员一本网站前端开发规范，里面详细的说明了各个命名的规则等相关的问题。
2、常见的人们约定的命名习惯为：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

Web前端工程师要知道的JavaScript变量命名规范

今天小编要跟大家分享的文章是关于Web前端工程师要知道的JavaScript变量命名规范，正在从事Web前端工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。


JavaScript变量命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。





下列都是非常正确的变量命名：


varhaha=250;


varxixi=300;


vara1=400;


vara2=400;


varabc_123=400;


var$abc=999;


var$o0_0o$=888;


var$=1000;


var_=2000;


var________=3000;


下列都是错误的命名：


vara-1=1000;//不能有怪异符号


vara@=2000;//不能有怪异符号


var2year=3000;//不能以数字开头


vara￥=4000;//不能有怪异符号


vara*#$#$@=5000;//不能有怪异符号


varab=300;//不能有空格


下列的单词，叫做保留字，就是说不允许当做变量名


abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto


implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile


需要注意大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。


1varA=250;


2vara=888;


以上就是小编今天为大家分享的关于Web前端工程师要知道的JavaScript变量命名规范的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利!

艾思软件：前端开发规范文档

开发规范（前端）

版本： v1.0

日期： 2022-01-15

一：命名规范

命名统一使用英文单词，要求简单，通俗易懂。

项目命名

使用小写字母，多单词采用 “ - ” 中划线拼接。

例如：my-world / world

文件夹命名

使用小写字母，多单词采用 “ - ” 中划线拼接。

例如：home-page / home

文件命名

使用小写字母，多单词采用 “ - ” 中划线拼接。 我爱编程网

例如：home-page / home

变量命名

使用小驼峰命名。如果单文件中变量过多，可能会出现重名的情况，建议增加前缀来区分不同功能的变量。或者把变量拆分到不同的文件之中。

例如：maxHeight / userMaxHeight / homeMaxHeight

常量命名

全部使用大写字母。多单词采用 “ _ ” 下划线隔开。

例如：const USER_TYPE = “9001”；

函数命名

规范一：使用小驼峰命名。被继承的父类的私有函数需要增加下划线前缀 “ _getPrice() ”。

例如：showToast / _getPrice

规范二：根据函数作用，适当添加动词前缀。

例如：getSize / setSize / hasNumber

前缀请查看文档最底部 “ 附件一：（函数命名动词前缀整合） ”

二：注释规范

简单易懂的变量方法，尽量编写注释。复杂难懂的变量方法，必须编写注释

单行注释 //

在代码上一行编写单行注释，简单介绍下方代码用途、注意事项等内容。

多行注释 /* */ 或 /** */

方法必须使用多行注释。当变量或代码块复杂，单行注释不足以解释清楚的时候，也需要使用多行注释。

例如：

// 商品名称

goodsName: '猕猴桃',

/**

* 传入人员姓名，从数据库中查询该人员的手机号码

* @param {String} userName 姓名

* @return {Number} 手机号

*/

getUserMobile(userName){

......

return mobile;

},

三：CSS规范

1. class类名使用小写字母，多单词采用 “ - ” 中划线拼接。

2. id采用小驼峰命名。

3. scss、less中变量、函数、mixin统一采用小驼峰命名。

4. 缩进整洁有序。

四：项目规范

项目结构建议规范（实际根据具体需求逻辑进行调整）

src

api 所有接口封装

asstes 资源文件

- images 图片

- videos

components 所有组件

router 路由

store 状态管理

styles 公共样式

utils 公共函数库

view 视图

- home 视图文件需要分模块分文件夹存放

home.vue

home-detail.view

- user

五：附件

附件一：（函数命名动词前缀整合）

以上就是我爱编程网小编给大家带来的web前端开发命名规范参考 div+CSS的命名规则？，希望能对大家有所帮助。