阿里巴巴前端开发规范

最新推荐文章于 2024-04-03 01:18:47 发布
最新推荐文章于 2024-04-03 01:18:47 发布
阅读量453 收藏 2
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57404736/article/details/131881252
版权

前言

规范的目的是为了编写高质量的代码，让你的团队成员每天的心情都是愉悦的，大家在一起是快乐的。

  • 现在软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，指定交通法规表面上是要限制行车权，实际上是保障公众地人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容地创造性、优雅性，而是限制过度个性化，以一种普遍认可地统一方式一起做事，提升协作效率，降低沟通成本。代码地字里行间流淌的是软件系统地血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。

一、变成规约

(一)、命名规范

1.1.1、项目命名

  • 全部采用小写方式，以中线分割

正例：mall-management-system

反例：mall_management-system/mallManagementSystem

1.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.1.3、JS、CSS、SCSS、HTML、PNG文件命名

全部采用小写方式，以中划线分割

正例：render-dom.js/signup.css/index.html/comany-logo.png

反例：renderDom.js/UserManagement.html

1.1.4、命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用

正例：henan/luoyang/rmb等国际通用的名称，可视同英文

反例：DaZhePromotion[打折]/getPingfenByName()[评分]/int 某变量 = 3

杜绝完全不规范的缩写，避免望文不知意;

反例：AbstractClass "缩写" 命名成 AbsClass; condition "缩写" 命名成 condi，此类随意缩写严重降低了代码的可阅读性

(二)、HTML规范(Vue Template 同样适用)

1.2.1、HTML类型

推荐使用HTML5的文档类型申明;

  • 建议使用text/html格式的 HTML.避免使用XHTML。XHTML以及它的属性，比如application/xhtml+xml在浏览器中的应用支持与优化都十分有限
  • 规定字符编码
  • IE兼容模式
  • 规定字符编码
  • doctype大写

正例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper"></div>
  </body>
</html>

1.2.2、缩进

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

1.2.3、分块注释

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

1.2.4、语义化标签

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

正例：

<header></header>
<footer></footer>

反例：

<div>
    <p></p>
</div>

1.2.5、引号

使用双引号(“”)，而不是单引号(‘’)

正例：

<div class="box"></div>

反例：

<div class='box'></div>

(三)、css规范

1.3.1、命名

  • 类名使用小写字母，以中划线分隔
  • id采用驼峰式命名
  • scss中的变量、函数、混合、placeholder 采用驼峰式命名

ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称。

不推荐：

.fw-800{
    font-weight: 800;
}
.red{
    color: red;
}

推荐：

.heavy{
    font-weight: 800;
}
.important{
    color: red;
}

1.3.2、选择器

(1)、css选择器中谜面使用标签名

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

(2)、直接使用子选择器

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

不推荐：

.content .title{
    font-size: 2rem;
}

推荐：

.content>.title{
    font-size:2rem;
}

1.3.3、尽量使用缩写属性

不推荐：

padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐

padding: 0 1em 2em;

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

不推荐：

button{ width: 100px;
    height: 50px;
}

推荐：

button{
    width: 100px;
    height: 50px;
}

1.3.5、省略0后面的单位

不推荐：

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

推荐：

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

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

不推荐：

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

推荐：

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

(四)、LESS规范

1.4.1、代码组织

(1)、将公共less文件放置在style/less/common文件夹

例：//color.less,common.less

(2)、按以下顺序组织
  1. @import;
  2. 变量声明;
  3. 样式声明;
@import "mixins/size.less";

@default-text-color: #333;

.page{
    width: 960px;
    margin: 0 auto;
}

1.4.2、避免嵌套层级过多

将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的ccss选择器。避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多余20行的嵌套规则出现。

不推荐：

.main{
    .title{
        .name{
            color: #fff;
        }
    }
}

推荐：

.main-title{
    .name{
        color: #fff;
    }
}

(五)、javascript规范

1.5.1、命名

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

反例：_name/name_/name$

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

正例：localValue/getHttpMessage()/inputUserId

其中method方法命名必须是 动词 或者 动词+名称 形式

正例：saveShopCarData/openShopCarInfoDialog

反例：save/open/show/go

特此说明：增删改查，详情统一使用如下 5 个单纯，不得使用其他(目的是为了统一各个端)

add/update/delete/detail/get
附：函数方法常用的动词：
get 获取， set 设置，
add 增加， remove 删除，
create 创建， destory 销毁，
start 启动， stop 停止，
open 打开， close 关闭，
read 读取， write 写入，
load 载入， save 保存，
begin 开始， end 结束，
backup 备份， restore 恢复，
import 导入， export 导出，
split 分割， merge 合并，
inject 注入， extract 提取，
attach 附着， detach 脱离，
bind 绑定， separate 分离，
view 查看， browse 浏览，
edit 编辑， modify 修改，
select 选取， mark 标记，
copy 复制， paste 粘贴，
undo 撤销， redo 重做，
insert 插入， delete 移除，
add 加入， append 添加，
clean 清理， clear 清除，
index 索引， sort 排序，
find 查找， search 搜索，
increase 增加， decrease 减少，
play 播放， pause 暂停，
launch 启动， run 运行，
compile 编译， execute 执行，
debug 调试， trace 跟踪，
observe 观察， listen 监听，
build 构建， publish 发布，
input 输入， output 输出，
encode 编码， decode 解码，
encrypt 加密，decrypt 解密，
compress 压缩， decompress 解压缩
pack 打包， unpack 解包，
parse 解析， emit 生成，
connect 连接， disconnect 断开，
send 发送， receive 接收，
download 下载， upload 上传，
refresh 刷新， synchronize 同步，
update 更新， revert 复原
lock 锁定， unlock 解锁，
check out 签出， check in 签入，
submit 提交， commit 交付，
push 推， pull 拉，
expand 展开， collapse 折叠，
enter 进入， exit 退出，
abort 放弃， quit 离开，
obsolete 废弃， depreciate 废旧
collect 收集， aggregate 聚集
(3)、常量命名全部大写，单词间用下划线隔开，力求语义表达完整清除，不要嫌名字长

正例：MAX_STOCK_COUNT

反例：MAX_COUNT

1.5.2、代码格式

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

正例：

if(x<y) {
    x += 10;
} else {
    x += 1;
}
(2)、不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性

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

1.5.3、字符串

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

正例：

let str = 'foo'
let testDiv = '<div id="test"></div>';

反例：

let str = 'foo';
let testDiv = "<div id='test'><div>";

1.5.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;

1.5.5、使用ES6+

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

1.5.6、括号

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

正例：

if(condition){
    doSomething();
}

反例：

if(condition) doSomething();

1.5.7、undefined判断

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

正例：

if(typeof person === 'undefined'){
    ...
}

反例：

if(person === undefined){
    ...
}

1.5.8、条件判断和循环最多三层

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

1.5.9、this的转换命名

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

1.5.10、慎用console.log

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

二、Vue项目规范

(一)、Vue编码基础

vue项目规范以Vue官方规范(https://cn.vuejs.org/v2/style-guide)中的A规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。

请仔仔细细阅读 Vue官方规范，切记，此为第一步

2.1.1、组件规范

(1)、组件名为多个单词
  • 组件名应该始终是多个单词组成(大于等于2)，且命名规范为kebab-case格式。
  • 这样做可以避免跟现有的以及未来的HTML元素相冲突，因为所有的HTML元素名称都是单个单词的。

正例：

export default {
    name: 'TodoItem'
}

反例：

export default {
    name: 'Todo',
}
export default {
    name: 'todo-item'
}
(2)、组件文件名为pascal-case格式

正例：

components/
|- my-component.vue

反例：

components/
|- myComponent.vue
|- MyComponent.vue
(3)、基础组件文件名为base开通，使用完整单词而不是缩写

正例：

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- icon.vue
(4)、和父组件紧密耦合的子组件应该以父组件名作为前缀命名

正例：

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue (完整单词)

反例：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue (使用了缩写)
(5)、在Template模板中使用组件，应使用PascalCase模式，并且使用自闭和组件

正例：

<!-- 在单文件组件、字符串模板和JSX中 -->
<MyComponent />
<Row><table :column="data"/></Row>

反例：

<my-component/><row><table :column="data"/></row>
(6)、组建的data必须是一个函数
  • 当在组件中使用data属性的时候(除了new Vue外的任何地方)，它的值必须是返回一个对象的函数。
  • 因为如果直接是一个对象的话，子组件之间的属性值就会互相影响。

正例：

export default {
    data(){
        return {
            name: 'jack'
        }
    }
}

反例：

export default {
    data: {
        name: 'jack'
    }
}
(7)、Prop定义应该尽量详细
  • 必须使用camelCase驼峰命名
  • 必须指定类型
  • 必须加上注释，表明其含义
  • 必须加上required或者default，两者二选其一
  • 如果有业务需要，必须加上validator验证

正例：

props: {
    // 组件状态，用于控制组件的颜色
    status: {
        type: String,
        required: true,
        validator: function(value) {
            return [
                'succ',
                'info',
                'error'
            ].indexOf(value) !== -1
        }        
    },
    // 用户级别，用于显示皇冠个数
    userLevel: {
        type: String,
        required: true
    }
}
(8)、为组件样式设置作用域

正例：

<template>
	<button class="btn btn-close">
        X
    </button>
</template>

<!-- 使用`scoped`特性 -->
<style scoped>
    .btn-close {
        background-color: red;
    }
</style>

反例：

<template>
	<button class="btn btn-close">
        X
    </button>
</template>

<!-- 没有使用`scoped`特性 -->
<style>
    .btn-close {
        background-color: red;
    }
</style>
(9)、如果特性元素较多，应该主动换行

正例：

<MyComponent foo="a" bar="b" baz="c"
             foo="a" bar="b" baz="c"
             foo="a" bar="b" baz="c"
/>

反例：

<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c"/>

2.1.2、模板中使用简单的表达式

  • 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
  • 复杂表达式会让你的模板变得不那么生命式。
  • 我们应该尽量描述应该出现的是什么，而非如何计算那个值。
  • 而且计算数学和方法使得代码可以重用。

正例：

<template>
	<p>
        {{ normalizedFullName }}
    </p>
</template>

<script>
	// 复杂表达式已经移入一个计算属性
    computed:{
		normalizedFullName: function(){
            return this.fullName.split('').map(function(word){
                return word[0].toUpperCase() + word.slice(1)
            }).join('')
        }
    }
</script>

反例：

<template>
	<p>
        {{
        	fullName.split('').map(function(word){
                return word[0].toUpperCase() + word.slice(1)
            }).join('')
        }}
    </p>
</template>

2.1.3、指令都使用缩写形式

指令推荐都是用缩写形式，(用:表示 v-bind、用@表示v-on、用#表示v-slot)

正例：

<input 
   @input="onInput"
   @focus="onFocus"
/>

反例：

<input 
   v-on:input="onInput"
   @focus="onFocus"
/>

2.1.4、标签顺序保持一致

单文件组件应该总是让标签顺序保持一致

正例：

<template>...</template>
<script>...</script>
<style>...</style>

反例：

<template>...</template>
<style>...</style>
<script>...</script>

2.1.5、必须为v-for设置键值key

2.1.6、v-show与v-if选择

如果运行时，需要非常频繁地切换，使用v-show;如果在运行时，条件很少改变，使用v-if

2.1.7、script标签内部结构顺序

name > components > mixins > props > data > computed > filter > 钩子函数(钩子函数安其执行顺序) > methods

2.1.8、Vue Router规范

(1)、页面跳转数据传递使用路由参数

页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面地数据传递到 B页面，推荐使用 路由参数进行传参，而不是将需要传递地数据保存vuex，然后在 B 页面去出vuex地数据，因为如果在 B 页面刷新会导致vuex数据丢失，导致 B 页面无法正常显示数据。

正例：

let id = '123';
this.$router.push({name: 'userCenter',query:{id:id}})
(2)、使用路由懒加载(延迟加载)机制
{
    path: 'uploadAttachment',
    name: 'uploadAttachment',
    meta: {
        title: '上传附件'
    },
    component: () => import('@/view/components/uploadAttachment/index.vue')
}
(3)、router中的命名规范
  • path、childrenPoints命名规范采用kebeb-case命名规范(尽量vue文件的目录结构保持一致，因为目录、文件名都是kebeb-case,这样很方便找到对应的文件)
  • name命名规范采用kebeb-case命名规范且和component组件名保持一致！(因为要保持keep-alive特性，keep-alive按照component的name进行换乘，所以两者必须高度保持一致)
// 动态加载
export const reload = [{
    path； ‘/reload',
    name: 'reload',
    component: Main,
    meta: {
        title: '动态加载',
        icon: 'icon iconfont'
    }，
    childred: [{
		path: '/reload/smart-reload-list',
        name: 'SmartReloadList',
        meta: {
        	title: 'SmartReload',
            childrenPoins:[{
            	title: '查询',
            	name: 'smart-reload-search'
            }]
		},
        component: () => important('@/views/reload/smart-reload/smart-reload-list.vue')
	}]
}]
(4)、router中的path命名规范
  • path除了采用kebab-case命名规范以外，必须以/开头，即使是children里的path也要以/开头。
  • 目的：
    • 经常有这样的场景：某个页面有问题，要立刻找到这个vue文件，如果不以/开头，path为parent和children组成的，可能经常需要在router文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件
{
  path: 'file',
  name: 'File',
  component: Main,
  meta: {
    title: '文件服务',
    icon: 'iox-cloud-upload'
  },
  children: [
    {
      path: '/file/file-list',
      name: 'FileList',
      component: () => import('@/views/file/file-list.vue')
    },
    {
      path: '/file/file-add',
      name: 'FileAdd',
      component: () => import('@/views/file/file-add.vue')
    }
  ]
}

(二)Vue项目目录规范

2.2.1、基础

  • vue项目中的所有命名一定要与后端名统一
  • 比如权限：后端privilege，前端无论router、store，api等都必须使用rivielege单词，

2.2.2、使用Vue-cli脚手架

使用vue-cli3来初始化项目，项目名按照上面的命名规范

2.2.3、目录说明

目录名按照上面的命名规范，其中components组件用大写驼峰，其余除components组件目录外的所有目录均使用kebab-case命名。

src			源码目录
|-- api			所有api接口
|-- assets			静态资源，images，icons，styles等
|-- components			公用组件
|-- config			配置信息
|-- constants			常量信息，项目所有Enum，全局常量等
|-- directives			自定义指令
|-- filters			过滤器，全局工具
|-- datas			模拟数据，临时存放
|-- lib			外部引用的插件存放及修改文件
|-- mock			模拟接口，临时存放
|-- plugins			插件，全局使用
|-- router			路由，统一管理
|-- store			vuex，统一管理
|-- themes			自定义样式主题
|-- views			视图目录
|	|-- role			role模块名
|	|--|-- role-list.vue	role列表页面
|	|--|-- role-add.vue			role新建页面
|	|--|-- role-update.vue			role更新页面
|	|--|-- index.less			role模块样式
|	|--|-- components			role模块通用组件文件夹
|	|-- employee			employee模块
(1)、api目录
  • 文件、变量命名要与后端保持一致
  • 此目录对应后端API接口，按照后端一个controller一个api.js文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致
  • api中的方法名字要与后端api url尽量保持语义高度一致性
  • 对于api中的每个方法要添加注释，注释与后端swagger文档保持一致。

正例：

后端 url： EmployeeController.java
/employee/add
/employee/delete/{id}
/employee/update

前端： employee.js
// 添加员工
function adEmployee(data) {
    return postAxios('/employee/add',data)
}

// 跟新员工信息
function updateEmployee(data ){
    return postAxios('/employee/update',data)
}

// 删除员工
function delefeEmployee(employeeId) {
    return postAxios('/employee/delete/' + employeeId)
}

// 获取员工信息
function getEmployee(data) {
    return postAxios('/employee/get',data)
}

// 获取员工信息列表
function getEmployeeList(data) {
    return postAxios('/employee/getlist',data)
}
(2)、assets目录

assets为静态资源，里面存放images、styles、icons等静态资源，静态资源命名格式为kebab-case

| assets
|-- icons
|-- images
|	|-- background-color.png
|	|-- upload-header.png
|-- styles
(3)、components目录

此目录应按照组件进行目录划分，目录命名为kebab-case，组件命名规范也为kebab-case

| components
|-- error-log
|	|-- index.vue
|	|-- index.less
|-- markdown-editor
|	|-- index.vue
|	|-- index.js
|-- kebab-case
(4)、constants目录

此目录存放项目所有常量，如果常量在vue中使用，请使用vue-enum插件

目录结构：
| constants
|-- index.js
|-- role.js
|-- employee.js
例子： employee.js
export const EMPLOYEE_STATUS = {
    NORMAL: {
        value: 1,
        desc: '正常'
    },
    DISABLED: {
        value: 1,
        desc: '禁用'
    },
    DELETED: {
        value: 2,
        desc: '已删除'
    }
}

export const EMPLOYEE_ACCOUNT_TYPE = {
    QQ: {
        value: 1,
        desc: 'QQ登录'
    },
    WECHAT: {
        value: 2,
        desc: '微信登录'
    },
    DINGDING: {
        value: 3,
        desc: '钉钉登录'
    },
    USERNAME: {
        value: 4,
        desc: '用户名密码登录'
    }
}

export default {
    EMPLOYEE_STATUS,
    EMPLOYEE_ACCOUNT_TYPE
}
(5)、router与store目录
  • 这两个目录一顶要将业务进行拆分，不能放到一个js文件里。
  • router尽量按照views中的结构保持一致
  • store按照业务进行拆分不同的js文件
(6)、views目录
  • 命名要与后端、router、api等保持一致
  • components中组件要使用PascalCase规则
|-- views			视图目录
|	|-- role			role 模块名
|	|	|-- role-list.vue			role 列表页面
|	|	|-- role-add.vue			role新建页面
|	|	|-- role-update.vue			role更新页面
|	|	|-- index.less			role模块样式
|	|	|-- components			role 模块通用组件文件夹
|	|	|	|-- role-header.vue			role 头部组件
|	|	|	|-- role-modal.vue			role弹出框组件
|	|-- employee			employee 模块
|	|-- behavior-log			行为日志log模块
|	|-- code-generator			代码生成器模块

2.2.4、注释说明

整理必须加注释的地方

  • 公共组件使用说明
  • api目录的js文件必须加注释
  • store中的state、mutation、action等必须加注释
  • vue文件中的template必须加注释，若文件较大添加start end注释
  • vue文件的methods，每个method必须添加注释
  • vue文件的data，非常见单词要加注释

2.2.5、其他

(1)、尽量不要手动操作DOM
  • 因使用vue框架，所以在项目开发中尽量使用vue的数据驱动更新DOM
  • 尽量(不到万不得已)不要手动操作DOM，包括：增删改dom元素、以及更改样式、添加事件等。
(2)、删除无用代码

因使用了git/svn等代码版本工具，对于无用代码必须及时删除，例如：一些调试的console语句、无用的弃用功能代码

大米☋
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里巴巴前端开发规范.docx
07-10
阿里巴巴前端开发规范.docx
阿里巴巴开发手册
03-14
《阿里巴巴 Java 开发手册》是阿里巴巴集团技术团队的集体智慧结晶和经验总 结，经历了多次大规模一线实战的检验及不断完善，系统化地整理成册，回馈给广大 开发者。现代软件行业的高速发展对开发者的综合素质要求越来越高，因为不仅是编 程知识点，其它维度的知识点也会影响到软件的最终交付质量。比如:数据库的表结 构和索引设计缺陷可能带来软件上的架构缺陷或性能风险;工程结构混乱导致后续维 护艰难;没有鉴权的漏洞代码易被黑客攻击等等。所以本手册以 Java 开发者为中心视 角，划分为编程规约、异常日志、单元测试、安全规约、MySQL 数据库、工程结构、设 计规约七个维度，再根据内容特征，细分成若干二级子目录。根据约束力强弱及故障 敏感性，规约依次分为强制、推荐、参考三大类。对于规约条目的延伸信息中，“说 明”对规约做了适当扩展和解释;“正例”提倡什么样的编码和实现方式;“反例” 说明需要提防的雷区，以及真实的错误案例。
2024最新阿里代码规范（前端篇），JavaScript的算数运算符与比较运算符
cwcnl25131的博客
04-03 313
必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义必须加上 required 或者 default，两者二选其一如果有业务需要，必须加上 validator 验证props: {// 组件状态，用于控制组件的颜色status: {return [‘succ’,‘info’,‘error’== -1},// 用户级别，用于显示皇冠个数资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。
阿里web前端开发手册.pdf
11-03
阿里web前端开发手册.pdf
阿里前端开发规范.pdf
10-21
阿里前端开发规范.pdf
阿里巴巴开发规范手册
11-16
共61页，划分为编程规约、异常日志、 单元测试、 安全规约、 MySQL 数据库、 工程结构、 设计规约七个维度，再根据内容特征，细分成若干二级子目录。涉及到大多数开发规范的约定。
阿里 前端 规范_阿里前端开发规范
細水、長流√的专栏
03-01 2809
页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。经常有这样的场景：某个页面有问题，要立刻找到这个vue文件，如果不用以/开头，path为parent和children组成的，可能经常需要在router文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件。
阿里巴巴开发规范--精选常用规范
misu_hui的博客
11-08 5137
3、在varchar字段上建立索引时，必须指定索引长度，没必要对全字段建立索引，根据实际文本区分度决定索引长度即可，一般对字符串类型数据，长度为20的索引，区分度会高达90%以上，可以使用count(distinct left(列名，索引长度))/count("")的区分度来确定。1、线程资源必须通过线程池提供，不允许在应用中自行显式创建线程，线程不允许使用Executors去创建，而是通过ThraedPoolExecutor的方式，这样的处理方式让写的同学更加明确线程池的运行规则，规避资源耗尽的风险。
阿里前端开发规范（word文档）
最新发布
04-08
阿里前端开发规范（word文档）
前端开发规范
03-03
详细的前端开发规范
阿里开发规范
04-04
017年，阿里官方推出一套Java编程规范：《阿里巴巴Java开发手册(终极版)》，这套Java统一规范标准将有助于提高行业编码规范化水平，帮助行业人员提高开发质量和效率、大大降低代码维护成本。推出之后，在CSDN，InfoQ，知乎等网站引起广泛讨论，口碑收获颇丰。本文旨在抛砖引玉，共同学习这套阿里巴巴近万名开发同学集体智慧的结晶写出来的编程规范。
阿里前端开发规范《word文档》
04-08
阿里前端开发规范《word文档》
阿里巴巴Java开发手册中的DO、DTO、BO、AO、VO、POJO定义
angou6476的博客
12-03 4682
分层领域模型规约： DO（ Data Object）：与数据库表结构一一对应，通过DAO层向上传输数据源对象。 DTO（ Data Transfer Object）：数据传输对象，Service或Manager向外传输的对象。 BO（ Business Object）：业务对象。 由Service层输出的封装业务逻辑的对象。 AO（ Application Object）：应...
不愧是Alibaba出品，这份Vue+Spring Boot前后端分离开发实战手册也太强了
公众号：该用户快成仙了
03-25 134
现在企业通常要求程序员既要有实战技能，也要内功扎实，对于新项目可以快速上手，熟悉底层原理后还应后劲十足，因此在笔试和面试时结合底层知识、实战应用、设计思维三方面进行考查。针对这3个方面的需求
果然，GitHub上哄抢的500页微服务前后端开发手册，是出自Alibaba
m0_63437643的博客
01-14 303
企业技能要求 现在企业通常要求程序员既要有实战技能，也要内功扎实，对于新项目可以快速上手，熟悉底层原理后还应后劲十足，因此在笔试和面试时结合底层知识、实战应用、设计思维三方面进行考查。针对这3个方面的需求，阿嘴找到了这份“Vue+Spring Boot前后端分离开发实战手册。”本手册有三大特点。 注重实战应用。本手册精心设计的案例对于工作多年的人也具有很高的参考价值;手册中引入了两个项目，让读者体验“编程之美”和“编程之乐”。 理论讲解丰富。深入浅出，环环相扣，让读者更容易理解。 设计者思维植入。本
前端代码规范（阿里） --- Vue
pig_is_duck的博客
05-19 3770
一、Vie编码基础 vue项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）中的A规范为基础 (一) 组件规范 1、组件名为多个单词 组件名应该始终是多个单词的，且命名规范为 KebabCase格式 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。 正例： export default { name: 'TodoItem', ... } 反例： export default { nam
Github获赞68K！阿里Vue+Spring Boot前后端分离开发实战手册，首次开源
m0_57042151的博客
02-08 152
Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅仅限于服务器端的开发。从简单性、可测试性和松耦合性角度而言，绝大部分Java应用都可以从Spring中受益。
阿里开发手册规范(JAVA)
热门推荐
weixin_51360584的博客
11-29 1万+
阿里开发手册规范(JAVA)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值