Основные Характеристики
Соглашения об именах
именная классификация
-
camelCase(Тип горба, также называемый малым горбом,e.g. userInfo) -
PascalCase(Номенклатура Паскаля, также известная как номенклатура большого горба,e.g. UserInfo) -
kebab-case(Тип соединения тире,e.g. user-info) -
snake_case(подчеркивание типа соединения,e.g. user_info)
именование переменных
- Метод именования: метод именования маленького верблюжьего регистра
- Соглашение об именах: тип + описание или атрибуты объекта.
// bad
var getTitle = "LoginTable"
// good
let tableTitle = "LoginTable"
именование функций
- Способ именования: маленький верблюжий кейс (конструктор использует большой верблюжий кейс)
- Правила именования: префикс с глаголом
动词 含义 返回值
can 判断是否可执行某个动作 (权 ) 函数返回一个布尔值。true：可执行；false：不可执行
has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值
is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false：不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
рекомендовать:
//是否可阅读
function canRead(){
return true;
}
//获取姓名
function getName{
return this.name
}
постоянное именование
- Способ именования: все заглавные буквы
- Соглашения об именах: используйте заглавные буквы и знаки подчеркивания для объединения имен и символы подчеркивания для разделения слов.
рекомендовать:
const MAX_COUNT = 10;
const URL = 'http://test.host.com';
именование членов класса
- Общедоступные свойства и методы: такие же, как и имена переменных.
- Частные свойства и методы: с префиксом подчеркивания (_), за которым следует то же имя, что и у общедоступных свойств и методов.
рекомендовать:
function Student(name) {
var _name = name; // 私有成员
// 公共方法
this.getName = function () {
return _name;
}
// 公共方式
this.setName = function (value) {
_name = value;
}
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：输出_name私有变量的值
Спецификация аннотации
Однострочная комментарий
- Одна строка: // (двойная косая черта) и пробел между текстом комментария
- Добавьте комментарий после кода: оставьте пробел между // (двойная косая черта) и кодом и оставьте пробел между // (двойная косая черта) и текстом комментария.
- Код комментария: // (двойная косая черта) и оставьте пробел между кодом.
рекомендовать :
// 调用了一个函数 <= 1)单独在一行
setTitle();
var maxCount = 10; // 设置最大量 <= 2)在代码后面注释
// setName(); // <= 3)注释代码
Многострочный комментарий ( / описание комментария / )
- Если начать(
/\*) и конец (\*/) находятся на одной строке, рекомендуются однострочные комментарии - Если имеется не менее трех строк комментариев, первая строка
/\*, окончательное поведение\*/, другие строки начинаются с*начинается, и текст комментария соответствует*Оставьте место.
рекомендовать :
/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle();
аннотация функции (метода)
Комментарии к функциям (методам) также относятся к типу многострочных комментариев, но содержат особые требования к комментариям, см. спецификацию JavaDoc.
грамматика:
/**
* 函数说明
* @关键字
*/
Общие ключевые слова аннотаций:
| имя комментария | грамматика | имея в виду | Пример |
|---|---|---|---|
| @param | @param имя параметра {тип параметра} описание информация | информация, описывающая параметр | @param name {String} входящее имя |
| @return | @return {тип возврата} описание информации | информация, описывающая возвращаемое значение | @return {Boolean} true: исполняемый; false: неисполняемый |
| @author | @author Информация об авторе [Дополнительная информация: например, электронная почта, дата] | Информация, описывающая автора этой функции | @автор Чжан Сан 21/07/2015 |
| @version | @version XX.XX.XX | номер версии, описывающий эту функцию | @version 1.0.3 |
| @example | @example пример кода | @example setTitle('тест') |
Куда добавлять комментарии
Комментарии к коду особенно важны после обслуживания проекта, поэтому нам необходимо написать инструкции по использованию компонентов для каждого повторно используемого компонента и описания методов для каждого метода в компоненте.
Не забудьте добавить примечание, когда:
1. 公共组件使用说明
2. 各组件中重要函数或者类说明
3. 复杂的业务逻辑处理说明
4. 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
7. 多重 if 判断语句
Vue-спецификация
Спецификация проекта Vue
Структурная спецификация (веб-пакет)
├── index.html 入口页面
├── favicon.ico 页面图标
├── .babelrc babel规则
├── .editorconfig 编辑器配置
├── .eslintignore eslint忽略规律
├── .eslintrc.js eslint规则
├── .gitignore git忽略规则
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
│ └── webpack.cdn.conf.js wabpack cdn配置
│ └── webpack.dll.conf.js wabpack dll配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── readmd.md 项目描述文件
├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── App.vue 根组件
│ ├── components 公共组件目录
│ │ └── ComponentItem.vue
│ ├── assets 静态资源目录，这里的资源会被wabpack构建
│ │ ├── css 公共样式文件目录
│ │ ├── js 公共js文件目录（如帮助方法）
│ │ └── img 图片存放目录
| |── lib 外部引用的插件存放及修改文件
| |—— datas 模拟数据，临时存放
│ ├── routes 前端路由
│ │ └── index.js
│ ├── apis 接口，统一管理
│ │ └── index.js
│ ├── store vuex, 统一管理
│ │ └── index.js
│ └── views 视图模块名
│ ├── view-module 视图模块
| └── index.vue 视图模块的主页面
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js
Каталог, файл, соглашение об именах компонентов
1. Справочник
Единое использование каталогаkebab-caseстиль
2. Файлы под представлениями
- использование файла класса js
PascalCase,Такие какUserInfo.js - Унифицированное использование других файлов ресурсов
kebab-caseстиль, напримерuser-detail.js,user-detail.css,user-avatar.png
3. Файлы компонентов
- именование следует
PascalCaseсоглашение.
имя файла компонентаindex.vueкроме этого, всегда используйтеPascalCase(большой горб) обозначение. Причина в том, что при введении компонентов обычно используются переменные компонентовPascalCaseформат, чтобы отличить его от общих переменных. Имя файла компонента совпадает с именем переменной, что удобно для переписки.
import UserBook from './user/UserBook'
- Имена компонентов всегда должны состоять из нескольких слов, за исключением корневого компонента App.
HTML-элементы — это все отдельные слова (например,<article>,<header>), чтобы отличить компоненты от обычных HTML-элементов, компоненты состоят из нескольких слов, таких какBookItem.vue,в одиночествеBook.vueНе рекомендуется.
- Использование компонентов следует
kebab-caseсоглашение
Использование компонентов на странице должно быть закрыто до и после и отделено короткой строкой, например:
<user-book></user-book>
Спецификация разработки Vue
Vue-файловая структура
- Базовая структура
Порядок: шаблон -> сценарий -> стиль. Компонент не должен превышать 200 строк, насколько это возможно.Когда страница содержит независимые части, попробуйте разделить его на подкомпоненты.
<template>
<div>...</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
created(){},
methods: {},
};
</script>
<!-- 声明语言，并且添加scoped -->
<style lang="scss" scoped>...</style>
- Заказ опций для компонентов/экземпляров
- name (全局引用)
- components (模板依赖)
- directives ...
- filters ...
- mixins (组合)
- props (接口)
- data (本地状态属性)
- computed ...
- watch (响应回调)
- created (生命周期函数)
- mounted ...
- methods (实例属性)
Спецификация пути маршрутизатора Vue
Путь маршрутизатора имеет формат kebab-case.
Слова с символом подчеркивания (например, /user_info) или camelCase (например: /userInfo) рассматриваются как одно слово, и поисковые системы не могут различать семантику.
// bad
{
path: '/user_info', // user_info当成一个单词
name: 'UserInfo',
component: UserInfo,
meta: {
title: ' - 用户',
desc: ''
}
},
// good
{
path: '/user-info', // 能解析成user info
name: 'UserInfo',
component: UserInfo,
meta: {
title: ' - 用户',
desc: ''
}
},
Спецификация разработки компонентов
1. Зарегистрируйте компонент
При регистрации компонентов все используют формат PascalCase.
import UserBook from './user/UserBook'
2. Соглашение об именах реквизита
- в заявлении
prop, его имя всегда должно использоватьcamelCase, а в шаблонах всегда следует использоватьkebab-case
<!-- bad -->
<welcome-message greetingText="hi"></welcome-message>
<script>
props: {
'greeting-text': String
}
</script>
<!-- good -->
<welcome-message greeting-text="hi"></welcome-message>
<script>
props: {
greetingText: String;
}
</script>
- Определение реквизита должно быть максимально подробным.
- Распыление реквизита компонента
- указать значения по умолчанию
- Используйте атрибут type для проверки типа
// bad 这样做只有开发原型系统时可以接受
props: ['status']
// good
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
3. соглашение об именах методов
- Именование CamelCase, единообразное использование формы глагола или глагола + существительного
//bad
go、nextPage、show、login、get_code
// good
jumpPage、openCarInfoDialog
- Метод запроса данных, заканчивающийся данными
//bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
- Попробуйте начать с общеупотребительных слов (установить, получить, пойти, может, имеет, есть)
Прикрепил:Часто используемые глаголы для методов функции:
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 聚集
4. Спецификация элемента HTML с несколькими атрибутами
Элементы с несколькими функциями, занимающими длинную строку, должны быть записаны в несколько строк, по одной для каждой функции. (улучшено для удобства чтения)
<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="fooattribute" bar="barattribute" baz="bazattribute"></my-component>
<!-- good -->
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
<my-component
foo="fooattribute"
bar="barattribute"
baz="bazattribute"
>
</my-component>
5. Порядок атрибутов элемента
Собственные атрибуты располагаются впереди, а инструкции — сзади.
- class
- id,ref
- name
- data-*
- src, for, type, href,value,max-length,max,min,pattern
- title, alt，placeholder
- aria-*, role
- required,readonly,disabled
- is
- v-for
- key
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- v-pre
- v-once
- v-model
- v-bind,:
- v-on,@
- v-html
- v-text
6. Спецификации инструкции
- Инструкции с сокращениями всегда в сокращенной форме
// bad
v-bind:code="code"
v-on:click="getUserData"
// good
:code="code"
@click="getUserData"
- Атрибут key должен быть добавлен в цикл v-for, а ключ должен быть уникальным во всем цикле for.
<!-- bad -->
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
<!-- good -->
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
-
Избегайте использования v-if и v-for для одного и того же элемента (проблема с производительностью).
Когда возникает такая необходимость, есть два решения:
-
Замените данные вычисляемым свойством, которое возвращает отфильтрованный список.
<!-- bad --> <ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }} </li> </ul> <!-- good --> <ul> <li v-for="user in activeUsers" :key="user.id"> {{ user.name }} </li> </ul> <script> computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } } </script> -
Переместите v-if в элемент-контейнер (например, ul, ol)
<!-- bad --> <ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.id"> {{ user.name }} </li> </ul> <!-- good --> <ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id"> {{ user.name }} </li> </ul>
-
разное
- избегайте этого.$parent
- Информация об отладке console.log() удаляется, когда она израсходована
- За исключением троичных операций, if, else и т. д. не сокращаются
- Точку с запятой в конце строки можно ставить или нет, а стиль должен быть единым, но ставить ее не рекомендуется. Роль точки с запятой не пострадает в современных ES-скриптах, если вы не понимаете роль точки с запятой, то ямки, которые нужно вводить, все равно будут введены, а код без точек с запятой будет более освежающим. В большинстве проектов Vue точки с запятой удалены.
// bad if (true) alert(name); console.log(name); // bad if (true) alert(name); console.log(name); // good if (true) { alert(name) } console.log(name)
Спецификация HTML
загрузка скрипта
- При совместимости со старыми браузерами (IE9-):
Ссылка на скрипт пишется перед закрывающим тегом body с атрибутом async. Это не загружает скрипты асинхронно в старых браузерах, а только блокирует синтаксический анализ DOM перед закрывающим тегом body, что значительно снижает блокирующее воздействие.
- В то время как в современных браузерах:
Скрипт будет загружен на тег Script парсера DOM для обнаружения хвоста BODY.В это время загрузка является асинхронной загрузкой, которая не блокирует CSSOM (но его выполнение все равно происходит после CSSOM).
Поэтому для совместимости со всеми браузерами рекомендуется:
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- body goes here -->
<script src="main.js" async></script>
</body>
</html>
Совместим только с современными браузерами, рекомендуется:
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<!-- body goes here -->
</body>
</html>
Семантический
Семантические средства: использование элемента в соответствии с его первоначальным значением при его создании. Выражение правильного контента с помощью правильных тегов также полезно для SEO.
правильное и добросовестное использованиеnav, header, article, sectionи другие семантические теги, а не весь div.
тег alt не пуст
<img>Атрибут alt тега указывает замещающий текст, который будет отображаться в браузере вместо изображения, если изображение не может быть отображено или пользователь отключил отображение изображения.
Предполагая, что пользователь не может просмотреть изображение по следующим причинам, атрибут alt может предоставить альтернативную информацию для изображения:
- Скорость интернета слишком низкая
- Ошибка в атрибуте src
- Отключить изображения в браузере
- Пользователь использует программу чтения с экрана
С точки зрения SEO сканер браузера не может сканировать содержимое изображения, поэтому нам нужен текст, чтобы сообщить сканеру содержание изображения.
Структура, производительность, три
- Старайтесь включать в документы и шаблоны только структурный HTML;
- Переместите весь код презентации в таблицу стилей;
- Переместите все действия в сценарии.
HTML фокусируется только на содержании
- HTML отображает только отображаемую информацию о содержимом
- Не вводите какую-то определенную структуру HTML для решения некоторых проблем визуального дизайна, больше подумайте об использовании псевдоэлементов.
:before,:after - Не рассматривайте элементы img как элементы визуального дизайна.
- Проблемы со стилем должны быть решены с помощью css
<!-- bad -->
<!-- We should not introduce an additional element just to solve a design problem -->
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
css 代码:
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
<!-- good -->
<!-- That's clean markup! -->
<span class="text-box">
See the square next to me?
</span>
css 代码:
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
JS-спецификация
Основные Характеристики
использовать строгий и т. д. ===
Всегда используйте оператор точного сравнения ===, чтобы избежать путаницы, вызванной приведениями JavaScript в процессе оценки.
это ключевое слово
Используйте ключевое слово this только в конструкторах объектов, методах и замыканиях наборов.
Семантика этого часто вводит в заблуждение. Иногда он указывает на глобальный объект (в большинстве случаев), иногда на домен вызывающего объекта (в eval), иногда на узел в дереве DOM (при привязке к атрибуту HTML с обработкой событий), иногда на недавно созданный объект. объекта (в конструкторе), а иногда и другого объекта (если функция выполняется и вызывается вызовами call() и apply()).
Поскольку очень легко ошибиться, пожалуйста, ограничьте его варианты использования:
- в конструкторе
- в методах объектов (включая замыкания, созданные из этого)
Тернарный оператор
Операторы назначения или возврата с тернарным оператором. Используйте его в более простых ситуациях и избегайте его использования в сложных ситуациях.
// bad
if(x === 10) {
return 'valid';
} else {
return 'invalid';
}
// good
return x === 10 ? 'valid' : 'invalid'
Не используйте функцию eval()
Поскольку eval буквально означает «дьявол», использование функции eval() создаст угрозу безопасности. Роль функции eval() состоит в том, чтобы вернуть произвольную строку, которая обрабатывается как код js.
Используйте соглашение о кодировании ES6
- Определите переменные для использования
let, определите константы, используяconst - Статические строки всегда используют одинарные кавычки или обратные кавычки, динамические строки используют обратные кавычки.
// bad const a = 'foobar'; const b = 'foo' + a + 'bar'; // good const a = 'foobar'; const b = `foo${a}bar`; const c = 'foobar'; - присваивание деструктуризации
// 1. 数组解构赋值 const arr = [1, 2, 3, 4]; // bad const first = arr[0]; const second = arr[1]; // good const [first, second] = arr; // 2. 对象解构赋值 // bad function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; } // good function getFullName(obj) { const { firstName, lastName } = obj; } // best function getFullName({ firstName, lastName }) {} - Используйте оператор распространения (...), чтобы скопировать массив.
const items = [1, 2, 3, 4, 5]; // bad const itemsCopy = items; // good const itemsCopy = [...items]; - стрелочная функция
Когда вам нужно использовать функциональные выражения, попробуйте вместо этого использовать стрелочные функции. потому что это более лаконично и связывает это
// bad const self = this; const boundMethod = function(...params) { return method.apply(self, params); }; // good const boundMethod = (...params) => method.apply(this, params);
Спецификация CSS
Используйте идентификаторы с умом
В общем, ID не следует использовать для стиля, а вес ID очень велик, поэтому вместо использования ID для решения проблемы стиля используйте class
Избегайте использования имен тегов в селекторах css.
Исходя из принципа разделения структуры, представления и поведения, тегов HTML следует избегать в CSS, насколько это возможно, и могут возникнуть проблемы с именами тегов в селекторах CSS.
Используйте прямые дочерние селекторы
Использование селекторов потомков часто может привести к проблемам с дизайном и потерям производительности, это плохая практика, и всегда следует учитывать прямые дочерние селекторы.
/* bad */
.content .title {
font-size: 2rem;
}
/* good */
.content > .title {
font-size: 2rem;
}
По возможности используйте сокращенные свойства
Для эффективности кода и удобочитаемости полезно использовать сокращенные свойства, когда это возможно, например свойство шрифта.
/* bad */
.user-box {
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;
}
/* good */
.user-box {
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
}
0 без единицы
/* bad */
.user-box {
padding-bottom: 0px;
margin: 0em;
}
/* good */
.user-box {
padding-bottom: 0;
margin: 0;
}
формат атрибута
- Для согласованности и расширяемости каждое объявление должно заканчиваться точкой с запятой, а каждое объявление должно переноситься на новую строку.
- Имена атрибутов толстой кишки с использованием пространства после. По соображениям согласованности,
- Всегда используйте пробел между атрибутом и значением (но не пробел между атрибутом и двоеточием).
- Всегда используйте новую строку для каждого объявления селектора и свойства.
- Селекторы атрибутов или значения атрибутов заключаются в двойные кавычки (""), а не в одинарные кавычки ('').
порядок собственности
Рекомендуется сортировать по группировке и важности. В частности, снаружи внутрь, от отношения между элементом и внешним миром, повлияет ли это на внешний макет, до внешнего поля, внутреннего поля и т. д.
- Связано с макетом (отображение, положение, плавание, переполнение, очистка), потому что макет элементов будет влиять на соседние элементы и даже отрываться от исходного потока документа, поэтому он более важен.
- Связанная с блочной моделью (ширина, высота, поля, отступы)
- Внешний вид (цвет, фон, граница, тень блока)
- Набор текста (размер шрифта, семейство шрифтов, выравнивание текста, преобразование текста)
- другое (курсор, z-индекс)
/* bad */
.box {
font-family: 'Arial', sans-serif;
border: 3px solid #ddd;
left: 30%;
position: absolute;
text-transform: uppercase;
background-color: #eee;
right: 30%;
isplay: block;
font-size: 1.5rem;
overflow: hidden;
padding: 1em;
margin: 1em;
}
/* good */
.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ddd;
font-family: 'Arial', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}