Советы: Эта спецификация была сделана компанией по моей просьбе.Я надеюсь, что официальные лица могут помочь и дать больше мнений~
О спецификации данных бизнес-кода
В этой спецификации названия слов написаны верблюжьим регистром.
Кнопка с бизнес-функцией
Для кнопок с определенными бизнес-функциями, такими как添加用户 删除用户 编辑用户подождите, мы будем использоватьhandleНачните с того, как бизнес заканчивается
В качестве примера возьмем следующую ситуацию:
| кнопка бизнес | имя |
|---|---|
| Добавить пользователя | handleUserAdd |
| удалить пользователей | handleUserDel |
| изменить пользователя | handleUserEdit |
| Массовое удаление пользователей | handleUserDelBatch |
| Импорт пользователя Excel | importUserExcel |
| Экспорт пользователя в Excel | exportUserExcel |
Советы: Здесь нам нужно обратить внимание на ситуацию, то есть, если имя нашего метода совпадает с именем импортированного нами интерфейса, то мы должны изменить имя импортированного интерфейса в качестве первого метода операции.
общая номенклатура
осмысленное наименование
Критерии поиска и наименование табличных данных
Это будет разделено на два случая, первый случай — это случай отсутствия повторяющегося имени, а другой случай — случай повторяющегося имени.
Нет повторяющихся имен
| Значение поля | имя |
|---|---|
| условие поиска | searchApi |
| Табличные данные | tableData |
| данные дерева | treeData |
Есть повторяющиеся имена
Мы можем назвать каждое условие в сочетании с фактическим бизнесом
Пример будет приведен ниже:
| Значение поля | имя |
|---|---|
| Критерии поиска по списку городов | citySearchApi |
| данные таблицы города | cityTableData |
| Данные дерева города | cityTreeData |
Для спецификации данных в данных
небольшой объем данных
следующим образом
{
stringVariable: "",
nullVariable|numberVariable:null,
arrayVariable:[],
objectVariable:{},
arrayObjectVariable:[{},{}]
}
Сгруппировать по конкретному бизнесу
{
//group1
stringVariable: "",
nullVariable|numberVariable:null,
arrayVariable:[],
objectVariable:{},
arrayObjectVariable:[{},{}]
//group2
stringVariable: "",
nullVariable|numberVariable:null,
arrayVariable:[],
objectVariable:{},
arrayObjectVariable:[{},{}]
}
Спецификация для написания комментариев к методу
Вам необходимо предоставить методу его переменные, а также аннотацию для роли
/**
* @description: 方法作用
* @param {参数类型} 参数名称 //如果接收参数的话
* @param {参数类型} 参数名称
* @return {返回值类型} //如果有返回值的话
*/
Написание спецификации API интерфейса
/**
* @func 接口名称
* @param params //params是放在request header 中的请求参数 ~可选
* @param data // data是放在request body 内的参数 ~可选
* @description 接口的描述
*/
export const getAuthUserList = (params,data) => {
return request({
url: '/auth/role/list', //接口请求的url
method: 'get', // 接口请求方式
params, //request header参数
data // request boyd参数
})
}
Советы: Для запросов интерфейса, принадлежащих одному и тому же функциональному модулю, мы должны поместить их в один и тот же файл js и инкапсулировать их, как указано выше.
Спецификации для использования интерфейса API
import { getAuthUserList } from '@/api/auth'
//.......省略的部分.....
async getuserList(){
try{
const res = await getAuthUserList()
//........
}catch{
// do something
}
}
Спецификация использования Vuex
Для состояния, которое часто вызывается на странице, оно должно быть представлено в геттере.
спецификация кода
О ключе v-for
Всегда не рекомендуется использовать непосредственно индекс в качестве ключа текущего списка, в качестве ключа следует выбирать как можно больше других уникальных значений.
Что касается v-if и v-show, то необходимо уточнить разницу между ними
v-if Если false, он не будет отображаться изначально, если значение v-if переключается, он всегда будет перерисовываться
v-show будет отображаться независимо от начального значения, а значение переключения предназначено только для переключения css отображения: нет
Для сценариев, в которых отображение переключается слишком часто и не требуется принудительное обновление представления содержимого, рекомендуется использовать v-show.
О v-once
Для некоторого контента, который нужно отобразить только один раз, более рекомендуется v-once.
**Советы:** Если v-once используется в v-for, то мы должны добавить к этому элементу ключ
О рендеринге принудительного просмотра
Всегда рекомендуется использовать следующие два метода
forceUpdate
//component.vue
export default {
methods:{
componentUpdate(){
this.$forceUpdate()
}
}
}
key
//component.vue
<template>
<component-child :key='componentChildKey'></component-child>
</template>
<script>
export default {
data(){
return {
componentChildKey:1
}
},
methods:{
upDateComponentChild(){
this.componentChildKey += 1
}
}
}
</script>
Об обработке данных
Отфильтровать поля, которые нам не нужны
Для некоторых бизнес-сценариев, если некоторые данные, возвращаемые серверной частью, непригодны для использования, мы должны использовать сопоставление карт, чтобы просто обрабатывать данные при получении данных.
//.....
try{
const res = await getDates()
this.tableData = res.map(el => {
let {a,b,c} = el
return{a,b,c}
}}
}catrh{return}
//.....
Обработка данных, не требующих реактивных изменений
Для такого рода данных мы должны использовать **Object.freeze()**, чтобы заморозить эти данные, потому что vue не будет внедрять зависимости для данных, чье настраиваемое свойство равно false.
Или мы также можем использовать другие методы, подобные этому методу Object.preventExtensions.
Значение в массиве или объекте, чтобы определить, существует ли условие
для массивов
Чтобы найти значение напрямую, мы можем использовать Array.includes, Array.indexOf и т. д.
Для условных значений, которые требуют от нас зацикливания, мы можем использовать Array.some
для объекта
Если у нас есть аналогичные требования, как указано выше, выясните, существует ли поле, удовлетворяющее определенному условию~
Затем мы можем использовать Object.entries, чтобы сначала перейти к его собственным перечисляемым свойствам, а затем потянуть его вниз, чтобы оживить массив~
Об обещаниях
Для асинхронных запросов я всегда рекомендую писать их в try catch, который использовался в приведенном выше примере.
Для сложного, если условное суждение
Если в if() есть два или более условий оценки, или это условие оценки будет использоваться несколько раз в этом блоке кода, мы должны использовать переменную с разумным именем для сохранения результата оценки.
О методах вычисления часов
Во-первых, давайте уточним их сценарии использования:
- watch
Слушайте определенные данные, это повлияет на несколько данных или когда они изменятся, нам нужно выполнить много других операций.
- computed
Это зависит от других данных, которые нужно изменить, или расчет этих данных требует огромного потребления производительности.
- methods
он обновляется в режиме реального времени
Бизнес-сценарий: одновременный мониторинг нескольких данных
<script>
export default(){
computed:{
handleChange(){
const {fileName,FolderName} = this.$props
}
},
watch:{
handleChange:{
handler:function(val,oldval){
//do somting
},
immediate:true
}
}
}
</script>
Спецификация написания css
семантика именования
Не используйте внешний вид и непонятные имена, ниже приведены примеры ошибок.
<div class='red'></div>
Советы: если в этом нет необходимости, пожалуйста, не используйте id
проблема последовательности
Когда мы пишем свойства css, мы должны максимально следовать следующему порядку.
1. Свойства позиции (позиция, отображение, плавающая точка, z-индекс и т. д.) 2. Размер (ширина, высота, отступы, поля) 3. Связанный с текстом 4. Связанный с фоном (фон, граница и т. д.) 5. Прочее (анимация, переход и т.д.)
Проблемы с перекомпоновкой и перерисовкой
Если фрагмент CSS может часто меняться, то нам нужно учитывать затраты производительности, связанные с его перекомпоновкой и перерисовкой.
О переходе и преобразовании вы можете увидеть следующее:
transform
| стоимость | описывать |
|---|---|
| none | Определения не конвертируются. |
| matrix(n,n,n,n,n,n) | Определяет 2D-преобразование, используя матрицу из шести значений. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Определяет 3D-преобразование, используя матрицу 4x4 из 16 значений. |
| translate(x,y) | Определите 2D-преобразования. |
| translate3d(x,y,z) | Определение 3D-преобразований. |
| translateX(x) | Чтобы определить преобразование, просто используйте значение оси X. |
| translateY(y) | Чтобы определить преобразование, просто используйте значение оси Y. |
| translateZ(z) | Чтобы определить 3D-преобразование, просто используйте значение оси Z. |
| scale(x,y) | Определяет преобразование 2D-масштабирования. |
| scale3d(x,y,z) | Определяет трансформацию масштабирования 3D. |
| scaleX(x) | Преобразование масштабирования определяется установкой значения оси X. |
| scaleY(y) | Преобразование масштабирования определяется установкой значения оси Y. |
| scaleZ(z) | Определите преобразование 3D-масштабирования, установив значение оси Z. |
| rotate(angle) | Задайте 2D поворот, указав угол в параметрах. |
| rotate3d(x,y,z,angle) | Определение трехмерного вращения. |
| rotateX(angle) | Определяет трехмерное вращение по оси X. |
| rotateY(angle) | Определяет трехмерное вращение по оси Y. |
| rotateZ(angle) | Определяет трехмерное вращение по оси Z. |
| skew(x-angle,y-angle) | 2D X определяется вдоль оси Y и трансформацией перекоса. |
| skewX(angle) | Определяет двумерное преобразование наклона по оси X. |
| skewY(angle) | Определяет двумерное преобразование наклона по оси Y. |
| perspective(n) | Определяет вид в перспективе для элементов 3D-преобразования. |
| По умолчанию: | none |
|---|---|
| Наследование: | no |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transform="rotate(7deg)" |
transtion
| стоимость | описывать |
|---|---|
| transtion-property | Задает имя свойства CSS, задающего эффект перехода. |
| transtion-duration | Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода. |
| transtion-timing-function | Определяет кривую скорости для эффекта скорости. |
| transtion-delay | Определяет, когда начинается эффект перехода. |
| По умолчанию: | all 0 ease 0 |
|---|---|
| Наследование: | no |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transition="width 2s" |
Старайтесь избегать использования имен тегов
Старайтесь избегать следующего написания:
.app-header span{
}
Рекомендуется следующая запись
.app-header>.name-title{
}
Спецификация комментариев CSS
/*
* 块状注释
*/
/* 单行注释文字 */
Об обычном использовании кадров
маршрутизация
ленивая загрузка
Во-первых, для маршрутизации нам нужно использовать ленивую загрузку
{
path: '/home',
name: 'home',
component: import(/* webpackChunkName: '你要设置的chunk的name' */ '../page/home')
}
разрешение
Маршрутизация внутри нашей системы состоит из двух частей: статическая маршрутизация и динамическая маршрутизация.
В случае, когда вам нужно получить доступ к динамической маршрутизации после импорта разрешений, вы можете открытьsrc/store/modules/permission.jsтянуть внизgenerateRoutesЭто действие, переключение области комментариев
компоненты
отдельная страница
Я установил класс для нашего самого внешнего слоя. Если в этом нет необходимости, пожалуйста, не устанавливайте отдельный класс для управления им, особенно в APP.vue~
ленивая загрузка
Подчеркивается, что для таких компонентов, как Modal, мы всегда должны использовать ленивую загрузку для его загрузки ~
здесь/* webpackChunkName: "[request]" */серединаrequestУказывает фактическое имя проанализированного файла.
const PageFooter = () => import(/* webpackChunkName: "[request]" */'_c/PageFooter')
export default {
components: {
'page-footer':pageFooter
}
}
разрешение
Некоторые разрешения кнопок внутри нашего компонента будут помещены в мета
Когда вам нужно управлять только одной кнопкой:
<template>
<div>
<el-Button v-permission:delete="roles">按钮</el-Button>
</div>
</template>
<script>
computed: {
hasSelected() {
return this.delUserList.length > 0
},
roles() {
return this.$route.meta.roles ? this.$route.meta.roles : []
}
},
</script>
Управляет условным рендерингом
<template>
<div>
<div v-if='hasRole'>条件渲染区域</div>
</div>
</template>
<script>
computed: {
hasRole() {
const arr = ['add', 'edit', 'delete']
const hasRole = arr.some(el => {
return this.roles.some(e => e === el)
})
return hasRole
}
roles() {
return this.$route.meta.roles ? this.$route.meta.roles : []
}
},
</script>
SearchForm
Это компонент поиска формы. В настоящее время он предоставляет только несколько простых функций. В настоящее время можно использовать только следующие предлагаемые типы:el-input el-select el-date-picker
Следует отметить, что пока я не закончу писать этот неполный документ, в одной и той же форме поиска может быть только один селектор времени~
Как использовать я сделаю демонстрационный пример ниже:
<template>
<div class="card-block">
<search-form :list="formList" :search-width="200" @change="initChange" />
</div>
</template>
<script>
const SearchForm = () => import('_c/SearchForm')
export default {
components: {
'search-form': SearchForm
},
data() {
return {
formList: [
{
name: 'name',
type: 'el-input',
value: '',
placeholder: '请输入姓名'
},
{
name: 'age',
type: 'el-select',
value: '',
placeholder: '请输入岁数',
children: {
type: 'el-option',
list: [{
value: '选项1',
label: '黄金糕',
title: '黄金糕'
},
{
value: '选项2',
label: '黄金糕2',
title: '黄金糕2'
}]
}
},
{
name: 'time',
type: 'el-date-picker',
//指定单个表单的宽度，如果不写，则会取上面的search-width,如果search-width也没有给，则是会取默认宽度180
width: 450
}
],
pageApi: {
Index: 1,
PageSize: 10
}
}
},
methods: {
initChange(date) {
// 全并查询条件
this.pageApi = Object.assign(this.pageApi, date)
console.log(this.pageApi)
}
}
}
</script>