前端项目命名规范
前端项目命名规范源码
参考阿里命名规范
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="never">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>闲时间前端开发规范title>
<script src="https://code.jquery.com/jquery-2.2.4.js">script>
head>
<body class="no-navbar">
<div id="home">
<div id="main">
<div id="mainContent">
<div class="forFlow">
<div id="post_detail">
<div id="topics">
<div class="post">
<h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2 vertical-middle">
<span>闲时间前端开发规范span>
a>
h1>
<div class="clear">div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
<p>p>
<div class="toc"
style="width:400px;position: fixed;top: 0;background-color: #FDFDFD;z-index: 9999;padding-left: 12px;
height: 100%;overflow-y: scroll">
<div class="toc-container-header">目录div>
<ul>
<li><a href="#声明">声明a>li>
<li><a href="#前端代码规范">前端代码规范a>li>
<li><a href="#前端-js-项目开发规范">前端 JS 项目开发规范a>li>
<li><a href="#一、编程规约">一、编程规约a>
<ul>
<li><a href="#一命名规范">(一)命名规范a>
<ul>
<li><a href="#111-项目命名">1.1.1 项目命名a>li>
<li><a href="#112-目录命名">1.1.2 目录命名a>li>
<li><a href="#113-js、css、scss、html、png-文件命名">1.1.3
JS、CSS、SCSS、HTML、PNG 文件命名a>li>
<li><a href="#114-命名严谨性">1.1.4 命名严谨性a>li>
ul>
li>
<li><a href="#二html-规范-（vue-template-同样适用）">(二)HTML 规范 （Vue Template
同样适用）a>
<ul>
<li><a href="#121-html-类型">1.2.1 HTML 类型a>li>
<li><a href="#122-缩进">1.2.2 缩进a>li>
<li><a href="#123-分块注释">1.2.3 分块注释a>li>
ul>
li>
<li><a href="#124-语义化标签">1.2.4 语义化标签a>
<ul>
<li><a href="#125-引号">1.2.5 引号a>li>
ul>
li>
<li><a href="#三-css-规范">(三) CSS 规范a>
<ul>
<li><a href="#131-命名">1.3.1 命名a>li>
<li><a href="#132-选择器">1.3.2 选择器a>li>
<li><a href="#133-尽量使用缩写属性">1.3.3 尽量使用缩写属性a>li>
<li><a href="#134-每个选择器及属性独占一行">1.3.4 每个选择器及属性独占一行a>li>
<li><a href="#135-省略0后面的单位">1.3.5 省略0后面的单位a>li>
<li><a href="#136-避免使用id选择器及全局标签选择器防止污染全局样式">1.3.6
避免使用ID选择器及全局标签选择器防止污染全局样式a>li>
ul>
li>
<li><a href="#四-less-规范">(四) LESS 规范a>
<ul>
<li><a href="#141-代码组织">1.4.1 代码组织a>
<ul>
<li><a href="#1将公共less文件放置在stylelesscommon文件夹">1)将公共less文件放置在style/less/common文件夹a>
li>
<li><a href="#2按以下顺序组织">2)按以下顺序组织a>li>
ul>
li>
<li><a href="#142-避免嵌套层级过多">1.4.2 避免嵌套层级过多a>li>
ul>
li>
<li><a href="#五-javascript-规范">(五) Javascript 规范a>
<ul>
<li><a href="#151-命名">1.5.1 命名a>
<ul>
<li>
<a href="#1-采用小写驼峰命名-lowercamelcase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束">1)
采用小写驼峰命名
lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束a>
li>
<li>
<a href="#2-方法名、参数名、成员变量、局部变量都统一使用-lowercamelcase-风格，必须遵从驼峰形式。">2)
方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase
风格，必须遵从驼峰形式。a>li>
<li>
<a href="#3-常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。">3)
常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。a>
li>
ul>
li>
<li><a href="#152-代码格式">1.5.2 代码格式a>
<ul>
<li><a href="#1-使用-2-个空格进行缩进">1) 使用 2 个空格进行缩进a>
li>
<li>
<a href="#2-不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。">2)
不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。a>
li>
ul>
li>
<li><a href="#153-字符串">1.5.3 字符串a>li>
<li><a href="#154-对象声明">1.5.4 对象声明a>
<ul>
<li><a href="#1使用字面值创建对象">1)使用字面值创建对象a>li>
<li><a href="#2-使用字面量来代替对象构造器">2) 使用字面量来代替对象构造器a>
li>
ul>
li>
<li><a href="#155-使用-es67">1.5.5 使用 ES6,7a>li>
<li><a href="#156-括号">1.5.6 括号a>li>
<li><a href="#157-undefined-判断">1.5.7 undefined 判断a>li>
<li><a href="#158-条件判断和循环最多三层">1.5.8 条件判断和循环最多三层a>li>
<li><a href="#159-this-的转换命名">1.5.9 this 的转换命名a>li>
<li><a href="#1510-慎用-consolelog">1.5.10 慎用 console.loga>
li>
ul>
li>
ul>
li>
<li><a href="#二、vue-项目规范">二、Vue 项目规范a>
<ul>
<li><a href="#一-vue-编码基础">(一) Vue 编码基础a>
<ul>
<li><a href="#211-组件规范">2.1.1. 组件规范a>
<ul>
<li><a href="#1-组件名为多个单词。">1) 组件名为多个单词。a>li>
<li><a href="#2-组件文件名为-pascal-case-格式">2) 组件文件名为
pascal-case 格式a>li>
<li><a href="#3-基础组件文件名为-base-开头，使用完整单词而不是缩写。">3)
基础组件文件名为 base 开头，使用完整单词而不是缩写。a>li>
<li><a href="#4-和父组件紧密耦合的子组件应该以父组件名作为前缀命名">4)
和父组件紧密耦合的子组件应该以父组件名作为前缀命名a>li>
<li>
<a href="#5-在-template-模版中使用组件，应使用-pascalcase-模式，并且使用自闭合组件。">5)
在 Template 模版中使用组件，应使用 PascalCase
模式，并且使用自闭合组件。a>li>
<li><a href="#6-组件的-data-必须是一个函数">6) 组件的 data
必须是一个函数a>li>
<li><a href="#7-prop-定义应该尽量详细">7) Prop 定义应该尽量详细a>
li>
<li><a href="#8-为组件样式设置作用域">8) 为组件样式设置作用域a>li>
<li><a href="#9-如果特性元素较多，应该主动换行。">9)
如果特性元素较多，应该主动换行。a>li>
ul>
li>
<li><a href="#212-模板中使用简单的表达式">2.1.2. 模板中使用简单的表达式a>li>
<li><a href="#213-指令都使用缩写形式">2.1.3 指令都使用缩写形式a>li>
<li><a href="#214-标签顺序保持一致">2.1.4 标签顺序保持一致a>li>
<li><a href="#215-必须为-v-for-设置键值-key">2.1.5 必须为 v-for 设置键值
keya>li>
<li><a href="#216-v-show-与-v-if-选择">2.1.6 v-show 与 v-if
选择a>li>
<li><a href="#217-script-标签内部结构顺序">2.1.7 script 标签内部结构顺序a>
li>
<li><a href="#218-vue-router-规范">2.1.8 Vue Router 规范a>
<ul>
<li><a href="#1-页面跳转数据传递使用路由参数">1)
页面跳转数据传递使用路由参数a>li>
<li><a href="#2-使用路由懒加载（延迟加载）机制">2)
使用路由懒加载（延迟加载）机制a>li>
<li><a href="#3-router-中的命名规范">3) router 中的命名规范a>
li>
<li><a href="#4-router-中的-path-命名规范">4) router 中的
path 命名规范a>li>
ul>
li>
ul>
li>
<li><a href="#二-vue-项目目录规范">(二) Vue 项目目录规范a>
<ul>
<li><a href="#221-基础">2.2.1 基础a>li>
<li><a href="#222-使用-vue-cli-脚手架">2.2.2 使用 Vue-cli 脚手架a>
li>
<li><a href="#223-目录说明">2.2.3 目录说明a>
<ul>
<li><a href="#1-api-目录">1) api 目录a>li>
<li><a href="#2-assets-目录">2) assets 目录a>li>
<li><a href="#3-components-目录">3) components 目录a>
li>
<li><a href="#4-constants-目录">4) constants 目录a>
li>
<li><a href="#5-router-与-store-目录">5) router 与 store
目录a>li>
<li><a href="#6-views-目录">6) views 目录a>li>
ul>
li>
<li><a href="#224-注释说明">2.2.4 注释说明a>li>
<li><a href="#225-其他">2.2.5 其他a>
<ul>
<li><a href="#1-尽量不要手动操作-dom">1) 尽量不要手动操作 DOMa>
li>
<li><a href="#2-删除无用代码">2) 删除无用代码a>li>
ul>
li>
ul>
li>
ul>
li>
ul>
div>
<div style="padding-left: 430px;">
<p>p>
<h1 id="前端代码规范">前端代码规范h1>
<p>Front Standard Guidep>
<h1 id="前端-js-项目开发规范">前端 JS 项目开发规范h1>
<p>规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。p>
<p>引自《闲时间规约》的开头片段：p>
<p><em>----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。em>
p>
<h1 id="一、编程规约">一、编程规约h1>
<h3 id="一命名规范">(一)命名规范h3>
<h4 id="111-项目命名">1.1.1 项目命名h4>
<p>全部采用小写方式， 以中划线分隔。p>
<p>正例：<code>mall-management-systemcode>p>
<p>反例：<code>mall_management-system / mallManagementSystemcode>p>
<h4 id="112-目录命名">1.1.2 目录命名h4>
<p>全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数p>
<p>正例： <code>scripts / styles / components / images / utils / layouts /
demo-styles
/ demo-scripts / img / doccode>p>
<p>反例： <code>script / style / demo_scripts / demoStyles / imgs / docscode>p>
<p>【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名p>
<p>正例： <code>head-search / page-loading / authorized / notice-iconcode>p>
<p>反例： <code>HeadSearch / PageLoadingcode>p>
<p>【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名<br>
正例： <code>page-one / shopping-car / user-managementcode>p>
<p>反例： <code>ShoppingCar / UserManagementcode>p>
<h4 id="113-js、css、scss、html、png-文件命名">1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名h4>
<p>全部采用小写方式， 以中划线分隔p>
<p>正例： <code>render-dom.js / signup.css / index.html / company-logo.pngcode>
p>
<p>反例： <code>renderDom.js / UserManagement.htmlcode>p>
<h4 id="114-命名严谨性">1.1.4 命名严谨性h4>
<p>代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。
说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用p>
<p>正例：<code>henan / luoyang / rmb 等国际通用的名称，可视同英文。code>p>
<p>反例：<code>DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3code>
p>
<p><strong>杜绝完全不规范的缩写，避免望文不知义：strong>p>
<p>反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成
condi，此类随意缩写严重降低了代码的可阅读性。p>
<h3 id="二html-规范-（vue-template-同样适用）">(二)HTML 规范 （Vue Template 同样适用）h3>
<h4 id="121-html-类型">1.2.1 HTML 类型h4>