阿里前端开发中的规范要求
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">1.命名规范</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">1.1 项目命名</a></li><li><a href="#_lab2_0_1">1.2 目录命名</a></li><li><a href="#_lab2_0_2">1.3 JS 、CSS 、SCSS 、HTML 、PNG 文件命名</a></li><li><a href="#_lab2_0_3">1.4 命名严谨性</a></li></ul><li><a href="#_label1">2.HTML规范</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_4">2.1 HTML 类型</a></li><li><a href="#_lab2_1_5">2.2 缩进</a></li><li><a href="#_lab2_1_6">2.3 分块注释</a></li><li><a href="#_lab2_1_7">2.4 语义化标签</a></li><li><a href="#_lab2_1_8">2.5 引号</a></li></ul><li><a href="#_label2">3 CSS 规范</a></li><ul class="second_class_ul"><li><a href="#_lab2_2_9">3.1 命名</a></li><li><a href="#_lab2_2_10">3.2 选择器</a></li><li><a href="#_lab2_2_11">3.3 尽量使用缩写属性</a></li><li><a href="#_lab2_2_12">3.4 每个选择器及属性独占一行</a></li><li><a href="#_lab2_2_13">3.5 省略 0 后面的单位</a></li></ul><li><a href="#_label3">4 Javascript 规范</a></li><ul class="second_class_ul"><li><a href="#_lab2_3_14">4.1 命名</a></li><li><a href="#_lab2_3_15">4.2 代码格式</a></li><li><a href="#_lab2_3_16">4.3 字符串</a></li><li><a href="#_lab2_3_17">4.4 对象声明</a></li><li><a href="#_lab2_3_18">4.5 用 使用 ES6+</a></li><li><a href="#_lab2_3_19">4.6 括号</a></li><li><a href="#_lab2_3_20">4.7 undefined 判断</a></li><li><a href="#_lab2_3_21">4.8 条件判断和循环最多三层</a></li><li><a href="#_lab2_3_22">4.9 this 的转换命名</a></li><li><a href="#_lab2_3_23">4.10 慎用 console.log</a></li></ul><li><a href="#_label4">结尾</a></li><ul class="second_class_ul"></ul></ul></div><p>web前端开发中，适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化，以一种普遍认可的统一方式,提升协作效率,降低沟通成本。规范的目的是为了编写高质量的代码。</p><p class="maodian"><a name="_label0"></a></p><h2>1.命名规范</h2>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>1.1 项目命名</h3>
<p>全部采用小写方式，以中线分隔。<br />正例：mall-management-system<br />反例：mall_management-system / mallManagementSystem</p>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>1.2 目录命名</h3>
<p>全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数。</p>
<p>正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc<br />反例： script / style / demo_scripts / demoStyles / imgs / docs<br />【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名。<br />正例： head-search / page-loading / authorized / notice-icon<br />反例： HeadSearch / PageLoading<br />【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名。<br />正例： page-one / shopping-car / user-management<br />反例： ShoppingCar / UserManagement</p>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>1.3 JS 、CSS 、SCSS 、HTML 、PNG 文件命名</h3>
<p>全部采用小写方式， 以中划线分隔。<br />正例： render-dom.js / signup.css / index.html / company-logo.png<br />反例： renderDom.js / UserManagement.html</p>
<p class="maodian"><a name="_lab2_0_3"></a></p><h3>1.4 命名严谨性</h3>
<p>代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用<br />正例：henan / luoyang / rmb 等国际通用的名称，可视同英文<br />反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3<br />杜绝完全不规范的缩写，避免望文不知义：<br />反例：AbstractClass “缩写”命名成 AbsClass；condition “缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。</p>
<p class="maodian"><a name="_label1"></a></p><h2>2.HTML规范</h2>
<p class="maodian"><a name="_lab2_1_4"></a></p><h3>2.1 HTML 类型</h3>
<p>推荐使用 HTML5 的文档类型申明：（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。</p>
<p class="maodian"><a name="_lab2_1_5"></a></p><h3>2.2 缩进</h3>
<p>缩进使用 2 个空格（一个 tab）；<br />嵌套的节点应该缩进。</p>
<p class="maodian"><a name="_lab2_1_6"></a></p><h3>2.3 分块注释</h3>
<p>在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。</p>
<p class="maodian"><a name="_lab2_1_7"></a></p><h3>2.4 语义化标签</h3>
<p>HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签。</p>
<p>正例<br /><header></header><br /><footer></footer><br />反例<br /><div><br /><p></p><br /></div></p>
<p class="maodian"><a name="_lab2_1_8"></a></p><h3>2.5 引号</h3>
<p>使用双引号(" ") 而不是单引号(’ ') 。 </p>
<p class="maodian"><a name="_label2"></a></p><h2>3 CSS 规范</h2>
<p class="maodian"><a name="_lab2_2_9"></a></p><h3>3.1 命名</h3>
<p>类名使用小写字母，以中划线分隔<br />id 采用驼峰式命名<br />scss 中的变量、函数、混合、placeholder 采用驼峰式命名<br />ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称。</p>
<p class="maodian"><a name="_lab2_2_10"></a></p><h3>3.2 选择器</h3>
<p>1) css 选择器中避免使用标签名</p>
<p>从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。</p>
<p>2) 使用 直接子选择器</p>
<p>很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器， 你应该总是考虑直接子选择器。</p>
<p class="maodian"><a name="_lab2_2_11"></a></p><h3>3.3 尽量使用缩写属性</h3>
<p>不推荐：</p>
<div class="jb51code"><pre class="brush:css;">border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;</pre></div>
<p>推荐：</p>
<div class="jb51code"><pre class="brush:css;">border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;</pre></div>
<p class="maodian"><a name="_lab2_2_12"></a></p><h3>3.4 每个选择器及属性独占一行</h3>
<p>不推荐：</p>
<div class="jb51code"><pre class="brush:css;">button {
width: 100px;
height: 50px;
color: #fff;
background: #00a0e9;
}</pre></div>
<p>推荐：</p>
<div class="jb51code"><pre class="brush:css;">button {
width: 100px;
height: 50px;
color: #fff;
background: #00a0e9;
}</pre></div>
<p class="maodian"><a name="_lab2_2_13"></a></p><h3>3.5 省略 0 后面的单位</h3>
<div class="jb51code"><pre class="brush:css;">div {
padding-bottom: 0;
margin: 0;
}</pre></div>
<p>3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式</p>
<p>不推荐：</p>
<div class="jb51code"><pre class="brush:css;">#header {
padding-bottom: 0px;
margin: 0em;
}</pre></div>
<p class="maodian"><a name="_label3"></a></p><h2>4 Javascript 规范</h2>
<p class="maodian"><a name="_lab2_3_14"></a></p><h3>4.1 命名</h3>
<p>1) 采用小写驼峰命名 lowerCamelCase， 代码中的命名均不能以下划线 ，也不能以下划线或美元符号结束</p>
<p>反例： _name / name_ / name$</p>
<p>2) 方法名、参数名、 成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式</p>
<p>正例： localValue / getHttpMessage() / inputUserId<br />*中 其中 method 是 方法命名必须是 词 动词 者 或者 动词+词 名词 形式*<br />正例：saveShopCarData /openShopCarInfoDialog<br />反例：save / open / show / go</p>
<p>3) 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚 ，不要嫌名字长</p>
<p>正例： MAX_STOCK_COUNT<br />反例： MAX_COUNT</p>
<p class="maodian"><a name="_lab2_3_15"></a></p><h3>4.2 代码格式</h3>
<p>1) 用 使用 2 个空格进行缩进</p>
<p>2) 不同逻辑 、 不同语义 、 不同业务的代码之间插入一个空行分隔开来以提升可读性</p>
<p>说明：任何情形，没有必要插入多个空行进行隔开。</p>
<p class="maodian"><a name="_lab2_3_16"></a></p><h3>4.3 字符串</h3>
<p>统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：</p>
<p class="maodian"><a name="_lab2_3_17"></a></p><h3>4.4 对象声明</h3>
<p>1) 使用字面值创建对象</p>
<p>正例： let user = {};<br />反例： let user = new Object();</p>
<p>2) 使用字面量来代替对象构造器</p>
<p>正例：<br />var user = {<br />age: 0,<br />name: 1,<br />city: 3<br />};<br />反例：<br />var user = new Object();<br />user.age = 0;<br />user.name = 0;<br />user.city = 0;</p>
<p class="maodian"><a name="_lab2_3_18"></a></p><h3>4.5 用 使用 ES6+</h3>
<p>必须优先使用 ES6+ 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。比如箭头函数、await/async ， 解构， let ， for…of 等等。</p>
<p class="maodian"><a name="_lab2_3_19"></a></p><h3>4.6 括号</h3>
<p>下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch,finally, with。</p>
<p>正例：<br />if (condition) {<br />doSomething();<br />}<br />反例：<br />if (condition) doSomething();</p>
<p class="maodian"><a name="_lab2_3_20"></a></p><h3>4.7 undefined 判断</h3>
<p>永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。</p>
<p>正例：<br />if (typeof person === 'undefined') {<br />...<br />}<br />反例：<br />if (person === undefined) {<br />...<br />}</p>
<p class="maodian"><a name="_lab2_3_21"></a></p><h3>4.8 条件判断和循环最多三层</h3>
<p>条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的<br />三目运算符。如果超过 3 层请抽成函数，并写清楚注释。</p>
<p class="maodian"><a name="_lab2_3_22"></a></p><h3>4.9 this 的转换命名</h3>
<p>对上下文 this 的引用只能使用 ’self’ 来命名。</p>
<p class="maodian"><a name="_lab2_3_23"></a></p><h3>4.10 慎用 console.log</h3>
<p>因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能。</p>
<p class="maodian"><a name="_label4"></a></p><h2>结尾</h2>
頁:
[1]