阿里前端开发中的规范要求

目录
  • 1.命名规范
    • 1.1  项目命名
    • 1.2  目录命名
    • 1.3 JS 、CSS 、SCSS 、HTML 、PNG  文件命名
    • 1.4  命名严谨性
  • 2.HTML规范
    • 2.1 HTML  类型
    • 2.2  缩进
    • 2.3  分块注释
    • 2.4  语义化标签
    • 2.5  引号
  • 3 CSS  规范
    • 3.1  命名
    • 3.2  选择器
    • 3.3  尽量使用缩写属性
    • 3.4  每个选择器及属性独占一行
    • 3.5  省略 0  后面的单位
  • 4 Javascript  规范
    • 4.1  命名
    • 4.2  代码格式
    • 4.3  字符串
    • 4.4  对象声明
    • 4.5 用 使用 ES6+
    • 4.6  括号
    • 4.7 undefined  判断
    • 4.8  条件判断和循环最多三层
    • 4.9 this  的转换命名
    • 4.10 慎用 console.log
  • 结尾

web前端开发中,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式,提升协作效率,降低沟通成本。规范的目的是为了编写高质量的代码。

1.命名规范

1.1  项目命名

全部采用小写方式,以中线分隔。
正例:mall-management-system
反例:mall_management-system / mallManagementSystem

1.2  目录命名

全部采用小写方式, 以中划线分隔,有复数结构时,要采用复数命名法, 缩写不用复数。

正例: scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc
反例: script / style / demo_scripts / demoStyles / imgs / docs
【特殊】VUE 的项目中的 components 中的组件目录,使用 kebab-case 命名。
正例: head-search / page-loading / authorized / notice-icon
反例: HeadSearch / PageLoading
【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名。
正例: page-one / shopping-car / user-management
反例: ShoppingCar / UserManagement

1.3 JS 、CSS 、SCSS 、HTML 、PNG  文件命名

全部采用小写方式, 以中划线分隔。
正例: render-dom.js / signup.css / index.html / company-logo.png
反例: renderDom.js / UserManagement.html

1.4  命名严谨性

代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。 说明:正确的英文拼写和语法可以让阅读者易于理解,避免歧义。注意,即使纯拼音命名方式也要避免采用
正例:henan / luoyang / rmb 等国际通用的名称,可视同英文
反例:DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3
杜绝完全不规范的缩写,避免望文不知义:
反例:AbstractClass “缩写”命名成 AbsClass;condition “缩写”命名成 condi,此类随意缩写严重降低了代码的可阅读性。

2.HTML规范

2.1 HTML  类型

推荐使用 HTML5 的文档类型申明:(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。

2.2  缩进

缩进使用 2 个空格(一个 tab);
嵌套的节点应该缩进。

2.3  分块注释

在每一个块状元素,列表元素和表格元素后,加上一对 HTML 注释。

2.4  语义化标签

HTML5 中新增很多语义化标签,所以优先使用语义化标签,避免一个页面都是 div 或者 p 标签。

正例
<header></header>
<footer></footer>
反例
<div>
<p></p>
</div>

2.5  引号

使用双引号(" ") 而不是单引号(’ ') 。

3 CSS  规范

3.1  命名

类名使用小写字母,以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称,或其他通用的名称,代替表象和晦涩难懂的名称。

3.2  选择器

1) css  选择器中避免使用标签名

从结构、表现、行为分离的原则来看,应该尽量避免 css 中出现 HTML 标签,并且在 css 选择器中出现标签名会存在潜在的问题。

2)  使用 直接子选择器

很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而,在任何情况下,这是一个非常不好的做法。如果你不写很通用的,需要匹配到 DOM 末端的选择器, 你应该总是考虑直接子选择器。

3.3  尽量使用缩写属性

不推荐:

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;

推荐:

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

3.4  每个选择器及属性独占一行

不推荐:

button {
width: 100px;
height: 50px;
color: #fff;
background: #00a0e9;
}

推荐:

button {
width: 100px;
height: 50px;
color: #fff;
background: #00a0e9;
}

3.5  省略 0  后面的单位

div {
padding-bottom: 0;
margin: 0;
}

3.6  避免使用 ID  选择器及全局标签选择器防止污染全局样式

不推荐:

#header {
padding-bottom: 0px;
margin: 0em;
}

4 Javascript  规范

4.1  命名

1) 采用小写驼峰命名 lowerCamelCase,  代码中的命名均不能以下划线 ,也不能以下划线或美元符号结束

反例: _name / name_ / name$

2)  方法名、参数名、 成员变量、局部变量都统一使用 lowerCamelCase 风格,必须遵从驼峰形式

正例: localValue / getHttpMessage() / inputUserId
*中 其中 method 是 方法命名必须是 词 动词 者 或者  动词+词 名词  形式*
正例:saveShopCarData /openShopCarInfoDialog
反例:save / open / show / go

3)  常量命名全部大写,单词间用下划线隔开,力求语义表达完整清楚 ,不要嫌名字长

正例: MAX_STOCK_COUNT
反例: MAX_COUNT

4.2  代码格式

1) 用 使用 2  个空格进行缩进

2)  不同逻辑 、 不同语义 、 不同业务的代码之间插入一个空行分隔开来以提升可读性

说明:任何情形,没有必要插入多个空行进行隔开。

4.3  字符串

统一使用单引号(‘),不使用双引号(“)。这在创建 HTML 字符串非常有好处:

4.4  对象声明

1)  使用字面值创建对象

正例: let user = {};
反例: let user = new Object();

2)  使用字面量来代替对象构造器

正例:
var user = {
age: 0,
name: 1,
city: 3
};
反例:
var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;

4.5 用 使用 ES6+

必须优先使用 ES6+ 中新增的语法糖和函数。这将简化你的程序,并让你的代码更加灵活和可复用。比如箭头函数、await/async , 解构, let , for…of 等等。

4.6  括号

下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch,finally, with。

正例:
if (condition) {
doSomething();
}
反例:
if (condition) doSomething();

4.7 undefined  判断

永远不要直接使用 undefined 进行变量判断;使用 typeof 和字符串’undefined’对变量进行判断。

正例:
if (typeof person === 'undefined') {
...
}
反例:
if (person === undefined) {
...
}

4.8  条件判断和循环最多三层

条件判断能使用三目运算符和逻辑运算符解决的,就不要使用条件判断,但是谨记不要写太长的
三目运算符。如果超过 3 层请抽成函数,并写清楚注释。

4.9 this  的转换命名

对上下文 this 的引用只能使用 ’self’ 来命名。

4.10 慎用 console.log

因 console.log 大量使用会有性能问题,所以在非 webpack 项目中谨慎使用 log 功能。

结尾

到此这篇关于阿里前端开发中的规范要求的文章就介绍到这了,更多相关阿里前端规范内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Mybatis-Plus 多表联查分页的实现代码

    上一节,简单讲述了 Mybatis-Plus 搭建与使用入门,这一节,简单讲一下如何使用 MP 实现多表分页. 分析 使用的工程,依旧是 spring-boot,关于分页,官网给出了一个单表的demo,其实多表分页实现原理相同,都是通过 mybatis 的拦截器 (拦截器做了什么?他会在你的 sql 执行之前,为你做一些事情,例如分页,我们使用了 MP 不用关心 limit,拦截器为我们拼接.我们也不用关心总条数,拦截器获取到我们 sql 后,拼接 select count(*) 为我们查询总条

  • 常用的jquery模板插件——jQuery Boilerplate介绍

    在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很"烂"的插件:难以维护.难以扩展.使用繁琐.性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢? 如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的"迷惘"那该多好!

  • 前端编码规范(3)JavaScript 开发规范

    JavaScript规范 变量声明 总是使用 var 来声明变量.如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制.如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域).所以,请总是使用 var 来声明变量. 采用严格模式带来的好处是,当你手误输入错误的变量名时,它可以通过报错信息来帮助你定位错误出处. 变量名 变量名推荐使用驼峰法来命名(camelCase) 全局变量为大写 (UPPERCASE ) 常量

  • ASP.Net中英文复合检索文本框实现思路及代码

    前段时间,写一个用户部门的管理页面,需要对后台获取的用户数据实现英汉检索功能. 同时,选定一个选项之后,需要触发事件与后台交互,将该用户所在的部门显示到页面右边的ListBox控件中. 一.Dojo的FilteringSelect组件实现拼音检索功能 在网上有不少相关的介绍,其中比较经典的有"海盗乱语"的关于重写Dojo的FilteringSelect组件实现拼音检索功能的介绍(地址http://cosbor.web-144.com/?p=38.http://cosbor.web-14

  • 阿里前端开发中的规范要求

    目录 1.命名规范 1.1  项目命名 1.2  目录命名 1.3 JS .CSS .SCSS .HTML .PNG  文件命名 1.4  命名严谨性 2.HTML规范 2.1 HTML  类型 2.2  缩进 2.3  分块注释 2.4  语义化标签 2.5  引号 3 CSS  规范 3.1  命名 3.2  选择器 3.3  尽量使用缩写属性 3.4  每个选择器及属性独占一行 3.5  省略 0  后面的单位 4 Javascript  规范 4.1  命名 4.2  代码格式 4.3

  • web前端开发中常见的多列布局解决方案整理(一定要看)

    多列布局 多列布局在web前端开发中也是较为常见的,比如常见的三列.四列及以上,列的布局使得单一的页面可以展示更多分门别类的内容.这里会提到的多列布局有两列定宽加一列自适应.多列不定宽加一列自适应.多列等分三种. 两列定宽加一列自适应布局 本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变.简易实现代码如下: 两列定宽加一列自适应 本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现.需要注

  • WEB 前端开发中防治重复提交的实现方法

    web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表单数据的连续重复提交,造成用户体检的不好,甚至影响到整个系统的安全性.而前端的防治重复提交至少很有效的防治了人为正常操作下的很多不必要麻烦.下面就来讲讲如何有效避免前端的表单重复提交 表单提交有以下几种方式: <form name="form" method="post" action=&qu

  • 对Web开发中前端框架与前端类库的一些思考

    说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有几百的小型电商网站,却要大喊"某宝就是这么搞的",然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统...等巴拉巴拉的一堆用来处理高并发,海量数据访问

  • javascript中UMD规范的代码推演

    1. UMD规范 地址:https://github.com/umdjs/umd UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它是为了让模块同时兼容AMD和CommonJs规范而出现的,多被一些需要同时支持浏览器端和服务端引用的第三方库所使用.UMD是一个时代的产物,当各种环境最终实现ES harmony的统一的规范后,它也将退出历史舞台. UMD规范的结构乍一看非常复杂,主要是因为想要看懂这段范式需要一些javascript基础知识,它的基本结构是这样的: (function (r

  • Vue前端开发规范整理(推荐)

    基于Vue官方风格指南整理 一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据 组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi

  • 在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法

    在前后端分离的开发模式中,接口数据模拟(API Mock)是不可避免的事情.前端同学在应对该情况时采取的办法可以各种各样,大概的方案可能会是这几类: 业务代码中临时写上 mock 数据的逻辑 在前端引入 mock 服务或框架,对 HTTP 请求服务进行拦截 代理转发至自建的 mock server 本文主要介绍在 Angular-cli 中引入 simple-mock 以快速实现项目数据接口模拟功能的方法.该方案本质上为上述的第三种方案. 1 simple-mock 简介 simple-mock

  • 浅谈JavaScript前端开发的MVC结构与MVVM结构

    MVC Model–View–Controller (MVC)是一种把信息展现逻辑和用户交互分离的计算机用户界面开发模式:Model包含应用的数据和业务逻辑:Controller负责把用户的输入,转换为命令传递给Model和View;这是维基百科的解释: 这种模式最初是由Trygve Reenskaug在使用Smalltalk-80(1979)工作时设计的,刚开始叫做Model-View-Controller-Editor:后来通过<Design Patterns: Elements of Re

  • 总结在前端排序中遇到的问题

    貌似前端圈一直以来流传着一种误解:前端用不到算法知识.长久以来,大家或许都曾受这种说法的影响.直到前阵子遇到一个产品需求,回过头来看,发现事实并非如此. 前端排序 前端排序的场景 前端将排序条件作为请求参数传递给后端,后端将排序结果作为请求响应返回前端,这是一种常见设计.但是对于有些产品则不是那么适用. 试想一个场景:你在使用美食类APP时,是否会经常切换排序方式,一会儿按照价格排序,一会儿按照评分排序. 实际生产中,受限于服务器成本等因素,当单次数据查询成为整体性能瓶颈时,也会考虑通过将排序在

  • 前端开发不得不知的10个最佳ES6特性

    为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改.另外,本文版权归原作者所有,翻译仅用于学习. ES6,正式名称是ECMAScript2015,但是ES6这个名称更加简洁.ES6已经不再是JavaScript最新的标准,但是它已经广泛用于编程实践中.如果你还没用过ES6,现在还不算太晚- 下面是10个ES6最佳特性,排名不分先后: 函数参数默认值 模板字符串 多行字符串 解构赋值 对象属性简写 箭头函数 Promise Let与Const 类 模块化 函数参数默认值 不使用ES6

随机推荐