前端开发规范

在遵循团队规范的前提下阅读

1 命名

1.1 文件命名

1. 不使用大写，除非框架特别约定组件首字母大写；
2. 特别提醒的文件名可采用大写如：README.md;

1.2 文件夹命名

1. 使用复数单词，多单词用连接符-连接；如：pages,images

2. 使用单词简写时，不用加复数；如：css,img

3. 均使用小写；参考资料阮一峰博客：为什么文件名要小写？

附：一些常见的文件夹名：

文件名	解释	位置	作用
src	source的简写，指源代码	一级目录	存放业务源代码
lib/dep/plugins	library/dependence/plugins的简写，依赖工具库/框架	二级目录	存放依赖的第三方工具库/
dist/build	distribution/build的简写	一级目录	存放最终打包发布的代码或应用
docs	document的简写	一级目录	存放一些需求文档，开发文档
examples/demo		二级目录	存放应用的例子
assets	项目资源	二级目录	存放一些多媒体资源，存放的资源会经过编译处理
static/resources/res		二级目录	存放一些静态资源，*存放的资源不会经过编译处理*
images			图片资源
media	media是medium的复数		存放一些音视频资源
utils/tools		二级目录	项目需要使用到的工具方法代码，存放项目自定义的工具方法代码，非第三方工具方法代码
common/public	存放一些公共资源		公共图片、公共音视频、公用工具库
locale			存放一些国际化与本地化的配置文件
api	应用程序编程接口 Application Programming Interface 的简写	二级目录	存放一些应用程序接口的方法代码
conf	config的简写，配置文件	二级目录	存放一些项目配置文件（如：xml、json）
logs	日志文件	二级目录	存放一些日志文件
test/test	单元测试文件	二级目录	存放一些单元测试文件
clients	客户端源代码	二级目录	存放前端源代码
server	服务端源代码	二级目录	存放后端源代码

1.3 CSS类名命名

1. 命名原则：基于祖先姓氏命名法 ；

       <div class="nav">
         <ul class="nav-list">
           <li class="nav-item">
             <img src="" alt="" class="nav-item-img" />
           </li>
         </ul>
       </div>
   

   嵌套关系最好不要超过3层。

2. 使用连接符 - class-name，不使用下划线_class_name和小驼峰className;与font-family，background-color等风格保持一致 。

1.4 变量命名

1. 忘掉var，当它从来没出现过，一律使用const或let声明；

2. 采用有意义的单词；做到名字即注释；

3. 变量名使用名词、is+形容词、表示状态的形容词；

4. 不要使用单词简写，除非是大众都知晓的，常见的；

5. 在一个代码块中，变量作用域越大，命名应该越长越精确。相应的，变量名越短，就应该保持变量的作用域越小。

6. 常量名全部大写和下划线来组合命名，下划线用来分割单词。

   const MAX_COUNT = 100
   const URL = 'www.baidu.com'
   

1.5 函数名命名

1. 采用有意义的单词；做到名字即注释
2. 前缀应该为动词，常见动词：get获取某个值,set设置某个值 ,send发送某个值,can 判断是否可执行某个动作,has判断是否含义某个值,is判断是否为某个值,load加载某些数据...
3. 不要使用单词简写，除非是大众都知晓的，常见的；