阿裡前端 JS 項目開發規範
規範的目的是為了編寫高品質的代碼，讓你的團隊成員每天得心情都是愉悅的，大家在一起是快樂的。
引自《阿裡規約》的開頭片段：
----現代軟體架構的複雜性需要協同開發完成，如何高效地協同呢？無規矩不成方圓，無規範難以協同，比如，制訂交通法規表面上是要限制行車權，實際上是保障公衆的人身安全，試想如果沒有限速，沒有紅綠燈，誰還敢上路行駛。對軟體來說，适當的規範和标準絕不是消滅代碼内容的創造性、優雅性，而是限制過度個性化，以一種普遍認可的統一方式一起做事，提升協作效率，降低溝通成本。代碼的字裡行間流淌的是軟體系統的血液，品質的提升是盡可能少踩坑，杜絕踩重複的坑，切實提升系統穩定性，碼出品質。
一、程式設計規約
(一)命名規範
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 / company-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 http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="UTF-8" />
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company" />
</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 引号
使用雙引号(" ") 而不是單引号(’ ') 。
正例：
" "
反例：
' '
(三) 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 盡量使用縮寫屬性
不推薦：
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;
1.3.4 每個選擇器及屬性獨占一行
不推薦：
button{
width:100px;height:50px;color:#fff;background:#00a0e9;
}
推薦：
button{
width:100px;
height:50px;
color:#fff;
background:#00a0e9;
}
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級的嵌套，給予重新評估。這可以避免出現過于詳實的CSS選擇器。
避免大量的嵌套規則。當可讀性受到影響時，将之打斷。推薦避免出現多于20行的嵌套規則出現
不推薦：
.main{
.title{
.name{
color:#fff
}
}
}
推薦：
.main-title{
.name{
color:#fff
}
}
(五) Javascript 規範
1.5.1 命名
- 采用小寫駝峰命名
lowerCamelCase
，代碼中的命名均不能以下劃線，也不能以下劃線或美元符号結束
反例：
_name / name_ / name$
- 方法名、參數名、成員變量、局部變量都統一使用
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 儲存,
create 建立/destroy 銷毀
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 折疊
begin 起始/end 結束,
start 開始/finish 完成
enter 進入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集
-
常量命名全部大寫，單詞間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長。
正例：
MAX_STOCK_COUNT
反例：
MAX_COUNT
1.5.2 代碼格式
-
使用 2 個空格進行縮進
正例：
if (x < y) {
x += 10;
} else {
x += 1;
}
-
不同邏輯、不同語義、不同業務的代碼之間插入一個空行分隔開來以提升可讀性。
說明：任何情形，沒有必要插入多個空行進行隔開。
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();
-
使用字面量來代替對象構造器
正例：
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,7
必須優先使用 ES6,7 中新增的文法糖和函數。這将簡化你的程式，并讓你的代碼更加靈活和可複用。
必須強制使用 ES6, ES7 的新文法，比如
箭頭函數、await/async ， 解構， let ， for…of 等等
1.5.6 括号
下列關鍵字後必須有大括号（即使代碼塊的内容隻有一行）：
if, else, for, while, do, switch, try, catch, finally, with。
正例：
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. 元件規範
-
元件名為多個單詞。
元件名應該始終是多個單詞組成（大于等于 2），且命名規範為
KebabCase
格式。
這樣做可以避免跟現有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的。
正例：
export default {
name: 'TodoItem'
// ...
};
反例：
export default {
name: 'Todo',
// ...
}
export default {
name: 'todo-item',
// ...
}
-
元件檔案名為 pascal-case 格式
正例：
components/
|- my-component.vue
反例：
components/
|- myComponent.vue
|- MyComponent.vue
-
基礎元件檔案名為 base 開頭，使用完整單詞而不是縮寫。
正例：
components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue
反例：
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
-
和父元件緊密耦合的子元件應該以父元件名作為字首命名
正例：
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 （使用了縮寫）
-
在 Template 模版中使用元件，應使用 PascalCase 模式，并且使用自閉合元件。
正例：
<MyComponent />
<Row><table :column="data"/></Row>
反例：
-
元件的 data 必須是一個函數
當在元件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是傳回一個對象的函數。 因為如果直接是一個對象的話，子元件之間的屬性值會互相影響。
正例：
export default {
data () {
return {
name: 'jack'
}
}
}
反例：
export default {
data: {
name: 'jack'
}
}
-
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
}
}
-
為元件樣式設定作用域
正例：
<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>
-
如果特性元素較多，應該主動換行。
正例：
<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>
// 複雜表達式已經移入一個計算屬性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
反例：
<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>
反例：
…
2.1.5 必須為 v-for 設定鍵值 key
2.1.6 v-show 與 v-if 選擇
如果運作時，需要非常頻繁地切換，使用 v-show ；如果在運作時，條件很少改變，使用 v-if。
2.1.7 script 标簽内部結構順序
标題components > props > data > computed > watch > filter > 鈎子函數（鈎子函數按其執行順序） > methods
2.1.8 Vue Router 規範
-
頁面跳轉資料傳遞使用路由參數
頁面跳轉，例如 A 頁面跳轉到 B 頁面，需要将 A 頁面的資料傳遞到 B 頁面，推薦使用 路由參數進行傳參，而不是将需要傳遞的資料儲存 vuex，然後在 B 頁面取出 vuex 的資料，因為如果在 B 頁面重新整理會導緻 vuex 資料丢失，導緻 B 頁面無法正常顯示資料。
正例：
let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });
- 使用路由懶加載（延遲加載）機制
{
path: ‘/uploadAttachment’,
name: ‘uploadAttachment’,
meta: {
title: ‘上傳附件’
},
component: () => import(’@/view/components/uploadAttachment/index.vue’)
},
-
router 中的命名規範
path、childrenPoints 命名規範采用kebab-case命名規範（盡量vue檔案的目錄結構保持一緻，因為目錄、檔案名都是kebab-case，這樣很友善找到對應的檔案）
name 命名規範采用KebabCase命名規範且和component元件名保持一緻！（因為要保持keep-alive特性，keep-alive按照component的name進行緩存，是以兩者必須高度保持一緻）
// 動态加載
export const reload = [
{
path: '/reload',
name: 'reload',
component: Main,
meta: {
title: '動态加載',
icon: 'icon iconfont'
},
children: [
{
path: '/reload/smart-reload-list',
name: 'SmartReloadList',
meta: {
title: 'SmartReload',
childrenPoints: [
{
title: '查詢',
name: 'smart-reload-search'
},
{
title: '執行reload',
name: 'smart-reload-update'
},
{
title: '檢視執行結果',
name: 'smart-reload-result'
}
]
},
component: () =>
import('@/views/reload/smart-reload/smart-reload-list.vue')
}
]
}
];
-
router 中的 path 命名規範
path除了采用kebab-case命名規範以外，必須以 / 開頭，即使是children裡的path也要以 / 開頭。如下示例
目的：
經常有這樣的場景：某個頁面有問題，要立刻找到這個vue檔案，如果不用以/開頭，path為parent和children組成的，可能經常需要在router檔案裡搜尋多次才能找到，而如果以/開頭，則能立刻搜尋到對應的元件
*
{
path: '/file',
name: 'File',
component: Main,
meta: {
title: '檔案服務',
icon: 'ios-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')
},
{
path: '/file/file-update',
name: 'FileUpdate',
component: () => import('@/views/file/file-update.vue')
}
]
}
(二) Vue 項目目錄規範
2.2.1 基礎
vue 項目中的所有命名一定要與後端命名統一。
比如權限：後端 privilege, 前端無論 router , store, api 等都必須使用 privielege 單詞！
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子產品
-
api 目錄
檔案、變量命名要與後端保持一緻。
此目錄對應後端 API 接口，按照後端一個 controller 一個 api js 檔案。若項目較大時，可以按照業務劃分子目錄，并與後端保持一緻。
api 中的方法名字要與後端 api url 盡量保持語義高度一緻性。
對于 api 中的每個方法要添加注釋，注釋與後端 swagger 文檔保持一緻。
正例：
後端 url： EmployeeController.java
/employee/add
/employee/delete/{id}
/employee/update
前端： employee.js
// 添加員工
addEmployee: (data) => {
return postAxios('/employee/add', data)
},
// 更新員工資訊
updateEmployee: (data) => {
return postAxios('/employee/update', data)
},
// 删除員工
deleteEmployee: (employeeId) => {
return postAxios('/employee/delete/' + employeeId)
},
-
assets 目錄
assets 為靜态資源，裡面存放 images, styles, icons 等靜态資源，靜态資源命名格式為 kebab-case
|assets
|-- icons
|-- images
| |-- background-color.png
| |-- upload-header.png
|-- styles
-
components 目錄
此目錄應按照元件進行目錄劃分，目錄命名為 KebabCase，元件命名規則也為 KebabCase
|components
|-- error-log
| |-- index.vue
| |-- index.less
|-- markdown-editor
| |-- index.vue
| |-- index.js
|-- kebab-case
-
constants 目錄
此目錄存放項目所有常量，如果常量在 vue 中使用，請使用 vue-enum 插件(https://www.npmjs.com/package/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
};
-
router 與 store 目錄
這兩個目錄一定要将業務進行拆分，不能放到一個 js 檔案裡。
router 盡量按照 views 中的結構保持一緻
store 按照業務進行拆分不同的 js 檔案
-
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 其他
-
盡量不要手動操作 DOM
因使用 vue 架構，是以在項目開發中盡量使用 vue 的資料驅動更新 DOM，盡量（不到萬不得已）不要手動操作 DOM，包括：增删改 dom 元素、以及更改樣式、添加事件等。
-
删除無用代碼
因使用了 git/svn 等代碼版本工具，對于無用代碼必須及時删除，例如：一些調試的 console 語句、無用的棄用功能代碼。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)