(1) Предисловие и введение

Здесь нет правил и радиуса действия.Для команд наличие полного набора спецификаций разработки может снизить затраты на совместную работу команды и затраты на обслуживание, а также облегчить чтение кода.

(2) Окружающая среда Строительство

2.1 Установить зависимости

Зависимости, необходимые в проекте, будут вpackage.jsonотображается в файле.

Необходимо использовать зависимости установкиnpmкоманда, перейти кофициальная документация нпмиспользовать и учиться.

2.1.1 Зависимости от производственной среды

Зависимости, необходимые для производственной среды, устанавливаются в свойствахdependenciesпод.

Вы можете использовать команду:

npm install xxxx --save

Невозможно установить зависимости, которые не требуются для производственной среды.

2.1.2 Зависимости среды разработки

Требуемые средой разработки зависимости устанавливаются в свойствахdevDependenciesпод.

Вы можете использовать команду:

npm install xxxx --save-dev

2.2 конфигурация веб-пакета

2.2.1 Работающий порт

Работающие порты в среде разработки проекта:

port: 8082

2.2.2 Прокси

Если вам нужно использовать другие системные запросы в проекте и включать междоменные проблемы, вы можете изменить конфигурацию прокси следующим образом.

proxy: {
      '/api': {
        target: 'http://xxxx',
        pathRewrite: {'^/api' : ''},// 是否重写
        changeOrigin: true,     // target是域名的话，需要这个参数，
        secure: false,          // 设置支持https协议的代理
      },
},

(3) Спецификации проекта

3.1 Технический состав проекта

Этот проект построен технической рамкой Vue.js и упакована с помощью WebPack.

// 技术版本
vue:4.1.2
webpack:4.0.0

официальная документация vue.jsучись и пользуйся.

официальная документация по веб-пакетуучись и пользуйся.

3.2 Спецификация структуры проекта

3.2.1 Основная идея структуры проекта

Соответствующие коды модулей бизнес-функций сосредоточены в одном куске, что легко перемещать и удалять
Для достижения разделения задач удобно разрабатывать, отлаживать, поддерживать, писать, просматривать и понимать код.

3.2.2 Каталог проектов

.
├── vue.config.js/                      # webpack 配置文件；
├── config/                     # 与项目构建相关的常用的配置选项；
│   ├── index.js                # 主配置文件
│   ├── dev.env.js              # 开发环境变量
│   ├── prod.env.js             # 生产环境变量
│   └── test.env.js             # 测试环境变量
│
├── src/
│   ├── main.js                 # webpack 的入口文件；
│   ├── assets/                 # 共用的代码以外的资源，如：图片、图标、视频 等；
│   ├── api/                    # 网络模块，如：接口；
│   ├── router/                 # 路由模块
│   ├── I18n/                   # 国际化模块
│   ├── pages/                  # 单页页面
│   ├── vuex/                   # 组件共享状态
│   ├── components/             # 共用的组件；； 这里的存放的组件应该都是展示组件
│   │   ├── base/               # 基本组件，如：共用的弹窗组件，loading加载组件，提示组件。
│   │   ├── common/             # 共用的全局组件，封装的导航条，底部组件等等
│   │   ├── temp/               # 模板组件，如：相同的页面封装成一个组件。
│   │   ├── UItemp/             # UI组件，如：项目中特定的按钮，消息数字，等等一些样式可以封装成组件的。
│   ├── common/                 # 共用的资源，如：常用的图片、图标，共用的组件、模块、样式，常量文件等等；
│   │   ├── compatible/         # 兼容模块，如：适合App和微信各种接口的模块；
│   │   ├── extension/          # 已有类的扩展模块，如：对 Array 类型进行扩展的模块；
│   │   ├── libraries/          # 存放自己封装的或者引用的库；
│   │   ├── tools/              # 自己封装的一些工具
│   │   ├── constant.js         # 存放js的常量；
│   │   ├── constant.scss       # 存放scss的常量；
│   │   └── ...
│   └── app/                    # 存放项目业务代码；
│       ├── App.vue             # app 的根组件；
├── public/                     # 纯静态资源，该目录下的文件不会被webpack处理，该目录会被拷贝到输出目录下；
├── .babelrc                    # babel 的配置文件
├── .editorconfig               # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数；
├── .eslintrc.js                # eslint 的配置文件
├── .eslintignore               # eslint 的忽略规则
├── .gitignore                  # git的忽略配置文件
├── .postcssrc.js               # postcss 的配置文件
├── CHAGNELOG.md                # 版本更新变更release
├── index.html                  # HTML模板
├── package.json                # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
└── README.md                   # 项目信息文档

3.3 Именование ресурсов

3.3.1 именование каталогов

Может интуитивно чувствовать роль файла текущего каталога
назван в честь небольшого горба
Специальные сокращенные имена могут начинаться с прописной буквы.

│   ├── pages/                 
│   ├── components/
│   │   ├── UItemp/

3.3.2 имя страницы

Может интуитивно чувствовать роль текущего файла
назван в честь небольшого горба

│   │   │   ├── login.vue       # 登录页面
│   │   │   ├── changePhone.vue # 用户中心-修改电话号码页面

3.3.3 именование компонентов

Может интуитивно чувствовать назначение текущего компонента
Имена компонентов всегда состоят из нескольких слов, чтобы избежать конфликтов с HTML-элементами или тегами.
Либо начинайте с заглавных, либо всегда связывайте с тире (здесь элементы начинаются с заглавных)

// 反例
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// 好例子
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

3.3.4 наименование изображения

Папка изображения обычно следует за именем страницы или модуля, например:login/)
Картинки нельзя называть произвольно, и категорически запрещается прямо называть картинки такими цифрами, как 0, 1 и так далее.
Именование изображений может следовать: цель + описание, а несколько слов разделяются символами подчеркивания, например:login_icon.png,pwd_icon.png
Картинки до 10к рекомендуется размещатьassets/imgДалее (прямое преобразование во встраивание base64 при упаковке веб-пакета)
Большое и редко меняющееся размещение картинокpublic/imgВниз
Категорически запрещается использовать картинки в стилях написанных на css
Интернационализированные изображения, используйте упрощенный суффикс-cn,Английский-en, Традиционный-tw

│   ├── assets/               
│   │   ├── img/                          # 图片
│   │   │    ├── common/                  # 公共图片
│   │   │    │    ├── default_avatar.png  # 默认头像
│   │   │    ├── login/                   # 登录模块
│   │   │    │    ├── login1.png          # 登录模块图片
│   │   │    │    ├── login_icon-en.png      
│   │   │    │    ├── login_icon-cn.png     
│   │   │    │    ├── login_icon-tw.png      
│   │   │    ├── userInfo/                   # 用户中心模块的图片

3.4 Использование ресурсов

3.4.1 Спецификация использования компонентов

когда используешьv-начало
Именование соответствует соглашениям об именовании компонентов.
Рекомендуется закрытие одной вкладки

<v-BaseButton :data="data"/>
<script>
 export default{
     components:{
         "v-BaseButton":BaseButton
     }
 }
</srcipt

3.4.2 Рекомендации по использованию изображений

В проекте есть две папки для размещения адреса изображения.src/assets/img,public/img

Когда webpack упакован, он будет копировать напрямуюpublic/imgпод изображением, поэтому, когда ваше изображение будет размещеноpublic/imgПри загрузке, во избежание дублирования упаковки изображений, необходимо соблюдать следующие обозначения:

public/imgИспользование require запрещено, когда изображение ниже вызывается

Поскольку изображение, вызываемое require, будет упаковано webpack, и будет сгенерирован суффикс хеша, который совпадает с изображением в `public/img`

let img1 = require('../public/img/xxxx')//错误写法
let img2 ='../public/img/xxxx'//正确写法

public/imgКартинка ниже не может быть напрямую встроена в src img

Поскольку изображения в теге img src также будут упакованы webpack

<!--错误写法-->
<img src="../public/img/xxx">
<!--正确写法-->
<img :src="`../public/img/xxx`">

src/assets/imgКартинка ниже должна быть написана в require, иначе будет сообщение об ошибке и картинка не может быть найдена

<!--正确写法-->
<img src="../asset/img/xxx">
<!--错误写法-->
<img :src="`../asset/img/xxx`">

let img1 = require('../asset/img/xxxx')//正确写法
let img2 ='../asset/img/xxxx'//错误写法

Изображения различаются таким образом, чтобы предотвратить повторную упаковку изображений и увеличить размер проекта.

3.5 Маршрутизация предметов

3.5.1 Наименование маршрута

Общая маршрутизация (нединамическая многоуровневая) именование, вы можете напрямую использовать именование компонентов страницы.

{
    path: '/login',
    name: 'login',
    component(resolve) {
        require.ensure(['../pages/login/login.vue'], () => {
            resolve(require('../pages/login/login.vue'));
        });
    }
},

Динамическая многоуровневая маршрутизация, следующая: цель или роль или функция.

/user/personal/infomaition  用户中心 -> 个人中心 -> 个人信息
/user/company/infomaition  用户中心 -> 企业中心 -> 企业信息

3.5.3 Многоуровневая маршрутизация

Вложенность не может превышать трех уровней.

3.5.4 Разрешения маршрутизации

3.5.4.1 Разрешения на вход

Общие страницы можно просматривать без входа в систему, а для важных страниц требуется разрешение на вход.

Поле разрешения на вход определяется в метатеге маршрута.

meta: {
    requireAuth: true // 为true则是需要登录权限
}

3.5.4.2 Права администратора

Права администратора:

Откройте портал управления и войдите в фоновое управление.
Структура навигации отображается иначе.
Тот же путь, что и у обычных пользователей, будет отображать другой контент.

Рендеринг разных компонентов или страниц в соответствии с разными разрешениями.

(4) Спецификации кодирования

4.1 Спецификация HTML

4.1.1 кодировка файла

объявить тип документа в начале
Использовать атрибут языка
- Китайский: «чж-ханс».
- Упрощенный китайский: «zh-cmn-Hans».
- Традиционный китайский: «zh-cmn-Hant».
- Английский: "en"
Использовать кодировку UTF-8 без спецификации
Указать кодировку в HTML<meta charset="utf-8">
SEO-оптимизация
Является ли область просмотра масштабируемой (оптимизировано для мобильных устройств)
favicon: если не указано, большинство браузеров будут запрашивать значок в корневом каталоге.Чтобы избежать ошибки 404, есть два решения: одно — поместить файл favicon.ico в корневой каталог, а другое — использовать ссылка для указания файла фавикона

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="path/to/favicon.ico">
  </head>
</html>

4.1.2 Протокол URL ресурса внешней ссылки

Не указывайте протокол http/https в URL-адресах ресурсов внешних ссылок (изображений и других медиа-ресурсов), сделайте URL-адрес относительным, избегайте проблемы смешанного содержимого и уменьшите количество байтов в файле.

Смешанный контент: проблемы, вызванные смешанным использованием http и https.

URL-адреса для других протоколов (ftp и т. д.) не опускаются.

<!-- 推荐 -->
<script src="//www.xxx.cn/statics/js/autotrack.js"></script>

<!-- 不推荐 -->
<script src="http://www.xxx.cn/statics/js/autotrack.js"></script>

/* 推荐 */
.example {
  background: url(//www.google.com/images/example);
}

/* 不推荐 */
.example {
  background: url(http://www.google.com/images/example);
}

4.1.3 Порядок атрибутов в тегах

class(classЭто дизайн с наивысшим уровнем повторного использования и должен быть размещен первым)
id name(idследует использовать с осторожностью)
data-\\*Пользовательские свойства (имена свойств в нижнем регистре-наладить связи)
src(ресурс)
placeholder title alt(намекать)
required readonly disable(вспомогательный)

4.1.4 Семантический

Семантическая структура HTML облегчает машинный поиск и обеспечивает удобочитаемость кода.

Общая семантика тегов

Этикетка	семантика
`<p>`	пункт
`<h1,2,3>`	заглавие
`<ul>`	неупорядоченный список
`<ol>`	упорядоченный список
`<blockquote>`	Цитирование
`<cite>`	Общее цитирование
`<b>`	Смелый для стиля
`<strong>`	Жирный для акцента
`<i>`	склонен к стилю
`<em>`	наклон для акцента
`<code>`	идентификация кода
...	...

Например:

Заголовок h1, обычно используемый для фона баннера, страницы и только один
h2 название главы, их может быть несколько
Название статьи в главе h3
h4,h5,h6 подзаголовок/подзаголовок
р абзац

├── h1---文章大标题
│   ├── h2--- 这里是一个节点
│   │   ├──h3--- 节点内的文章标题
│   │   │   ├── h4,h5,h6--- 副标题/作者等信息
│   │   │   ├── p---段落
│   ├── h2--- 这里是一个节点
│   │   ├──h3--- 节点内的文章标题
│   │   │   ├── h4,h5,h6--- 副标题/作者等信息
│   │   │   ├── p---段落

4.1.5 Спецификация предложения

Значение атрибута с двойной кавычкой отметки посылки

<div :data="data" data-src="some"></div>

4.1.6 Спецификация аннотации

<!-- 头部 -->
<view class="header">
  <!-- LOGO -->
  <image class="logo"></image>
  <!-- /LOGO -->
  <!-- 详情 -->
  <view class="detail"> </view>
  <!-- /详情 -->
</view>
<!-- /头部 -->

4.2 Спецификации CSS

4.2.1 Инициализация CSS и общие стили

/* ==========================================================================
   css 初始化
 ============================================================================ */
 
 /* margin padding 初始化为0 */
 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
	margin: 0;
	padding: 0;
}

body, button, input, select, textarea {
	font: 12px/1.5tahoma, arial, \5b8b\4f53;
}

h1, h2, h3, h4, h5, h6 {	font-size: 100%;}
address, cite, dfn, em, var {	font-style: normal;}

code, kbd, pre, samp {font-family: couriernew, courier, monospace;}

small {font-size: 12px;}

ul, ol {list-style: none;}

a {text-decoration: none;}

a:hover {text-decoration: none;}

sup {vertical-align: text-top;}

sub {vertical-align: text-bottom;}

legend {color: #000;}

fieldset, img {border: 0;}

button, input, select, textarea {font-size: 100%;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {font-size: 10px !important;}

Flex-макет разделяет класс стиля, класс стиля размера шрифта, поле, класс заполнения:

/* flex布局共用样式类，字体大小样式类，margin,padding
(如有需求，可自行添加)
 ============================================================================ */
.yl-flex{
    dispaly:flex;
 }
 
.flex-center-center{
    justify-content: center;
    justify-items: center;
    align-items: center
 }
 
.flex-start-center{
    justify-content: start;
    justify-items: center;
    align-items: center
 }
 
.flex-end-center{
    justify-content: end;
    justify-items: center;
    align-items: center
 }

.flex-wrap{
  flex-wrap: wrap;
}

.flex-column{
  flex-direction:column;
}

.flex-space-around{
  justify-content: space-around;
}

/* 文本 */
.tl {text-align: left;}

.tr {	text-align: right;}

.tc {	text-align: center;}

/* 按钮 */
.btn {
    display: inline-block;
}

.btn-success {
    background: @success;
}

.btn-error {
    background: @error;
}
/* 按钮禁用 */
.disabled {
	outline: 0 none;
	cursor: default !important;
	opacity: .4;
	filter: alpha(opacity=40);
	-ms-pointer-events: none;
	pointer-events: none;
}

/* 浮动与清除浮动 */
.fl {
	float: left;
}

.fr {
	float: right;
}

.fix {
	*zoom: 1;
}

.fix:after {
	display: table;
	content: '';
	clear: both;
}

/* 显示 */ 
.dn {
	display: none;
}

.di {
	display: inline;
}

.db {
	display: block;
}

.dib {
	display: inline-block;
}

.dt {
	display: table;
}

/* 定位 */ 
.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.pf {
	position: fixed;
}

.ml20 {
	margin-left: 20px;
}

.ml10 {
	margin-left: 10px;
}

.mr20 {
	margin-right: 20px;
}

.mr10 {
	margin-right: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt10 {
	margin-top: 10px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb10 {
	margin-bottom:10px;
}
.ml5{
	margin-left:5px;
}
.m10{
	margin:10px;
}
.m20{
	margin:20px;
}
.p10{
	padding:10px;
}

.p20{
	padding:20px;
}
.pb20{
	padding-bottom:20px;
}
.pb10{
	padding-bottom:20px;
}
.pt20{
	padding-top:20px;
}
.pt10{
	padding-top:10px;
}
.pl20{
	padding-left:20px;
}
.pl10{
	padding-left:10px;
}
.pr20{
	padding-right:20px;
}
.pr10{
	padding-right:10px;
}
.rotate90{
	transform: rotate(90deg);
}
.rotate180{
	transform: rotate(180deg);
}
.rotate270{
	transform: rotate(270deg);
}
/* 图片居中 */
.img-middle{
	object-fit: contain;
}
/* 文本超出隐藏 */
.txt-ellipsis{
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.min-h100{
	min-height:100%;
}

.show {
	display: block;
}

.hide {
	display: none;
}

/* 字体 */

.f12 {
	font-size: 12px;
}

.f14 {
	font-size: 14px;
}

.f15 {
	font-size: 15px;
}
.f16 {
	font-size: 16px;
}

.f18 {
	font-size: 18px;
}

.f20 {
	font-size: 20px;
}

.f24 {
	font-size: 24px;
}

.f36 {
	font-size: 36px;
}
.f48 {
	font-size: 48px;
}
/* 滚动条优化 */
.scroll-style::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.scroll-style::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: #ccc;
}

.scroll-style::-webkit-scrollbar-track {
	width: 7px;
	background: #ebebeb;
}

4.2.2 `id class`соглашение об именовании

Сначала назовите его в соответствии с содержанием, например:nav,header
Дочерние элементы в использовании содержимого-Ссылки, имена всегда в нижнем регистре, например:card-item
Украшенные классы (изменчивые) используют--Ссылки, такие как:card-item--warning
Если контента нет, помогите поведением, например:box-shawder
Не затрагивая семантики, его можно сократить, например:img-box,btn
Избегайте блокирующих рекламу слов:ad,gg,banner,guagngao

4.2.3 Атрибуты

порядок собственности

атрибут местоположения (position,top,right,z-index,display,flaot)
размер(width,height,padding,margin)
Слово(font,line-height,letter-spacing, color)
задний план (background,border)
разное(animation,transition)

стенограмма свойства

Сокращение свойства требует, чтобы вы хорошо знали правильный порядок значений свойств, и в большинстве случаев нет необходимости устанавливать все значения, содержащиеся в сокращении свойства, поэтому рекомендуется объявлять его отдельно, насколько это возможно. чтобы было понятнее;


/* not good */
.element {
    transition: opacity 1s linear 2s;
}
 
/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}

Поля и отступы противоположны, необходимо использовать сокращенную запись, поля и отступы противоположны, необходимо использовать сокращенную запись;

4.2.4 запросы средств массовой информации

Старайтесь держать правила медиа-запросов рядом с правилами, относящимися к ним, не объединяйте их в отдельный файл стилей и не опускайте в самый низ документа, так людям будет легче их забыть. позже.

.element-selected { ... }

@media (max-width: 768px) {
  .element-selected { ... }
}

4.2.5 Спецификация аннотации

Комментарии между блоками компонентов и подкомпонентами

/* ==========================================================================
   组件块
 ============================================================================ */

/* 子组件块
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子组件块
 ============================================================================ */
.selector-secondary {
  display: block; /* 注释*/
}

однострочный комментарий/*за которым следует пробел

/* xxx */

4.2.6 меньше спецификации

Организационный порядок
- @import
- объявление переменной
- объявление стиля
Избегайте чрезмерной вложенности, ограничьте глубину вложенности до 3 уровней и переоцените, если она превышает

@import "mixins/size.less";

@default-text-color: #333;

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

4.2.7 Другие характеристики

Удалите 0 после запятой, например: rgba(0,0,0,0.5)=>rgba(0,0,0,.5)
Код цвета должен быть максимально сокращен, например: #fff
Используйте селекторы элементов как можно реже.Смешивание селекторов элементов с идентификатором и классом также нарушает принцип разделения задач. Если тег HTML изменен, необходимо изменить код CSS, что не способствует последующему обслуживанию.

/* 不推荐 */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}

/* 推荐 */
#nav {}
.box-video {}
#username input {}
#example {}

4.3 Спецификации кодирования JavaScript

4.3.1 отступ

Отступ html, css и js одинаковый, с использованием 4 пробелов.

4.3.2 пространство

До и после бинарных операторов
До и после тернарного оператора
кодовый блок{вперед
Перед ключевыми словами: else, while, catch, наконец
После ключевых слов: if, else, for, while, do, switch, case, catch, наконец, with, return
однострочный комментарий//После многострочного комментария/*назад
перед значением свойства объекта
для цикла
между параметрами функции
до и после оператора
объявление функции, выражение функции(без пробелов перед,)пробел после

4.3.3 пустая строка

после объявления переменной
перед аннотацией
после блока кода
файл с пустой строкой в конце

let string = 'my'

let obj = {
    'name': 'yang'
}

{
    // do something
}

/* zheli */
if {
    
} else {
    
}

4.3.4 кавычки

Используйте одинарные кавычки для самого внешнего слоя.

let str = 'my name is'

4.3.5 строка шаблона

Нужно сращивать, использовать как можно меньше+, больше используйте строки шаблона


let str1 = 'yang'

let string = `hello ${str1}`

4.3.6 Соглашения об именах

Именование переменной: именование с небольшим горбом
Имя параметра: именование небольшого горба
Название функции: маленький верблюжий чехол
Имя метода/свойства: маленький случай верблюда
Назовите имя класса заглавными буквами
Частные свойства, переменные и методы начинаются с символа подчеркивания _.
Постоянное имя: используйте все заглавные буквы + подчеркивание
Аббревиатуры, состоящие из нескольких слов, в наименовании все буквы прописные в соответствии с регистром первой буквы по действующей номенклатуре и положению вхождения.
семантика
- Переменные должны использовать существительные, постарайтесь соответствовать семантике времени
- логические типы должны начинаться с is , has и т. д.
- Метод именования события клика: tap + onClick()


let loadingModules = {};

const HTML_ENTITY = {};

function stringFormat(theBells) {}

function insertHTML(element, html) {}

function Engine(options) {}

4.3.7 Бинарный тернарный оператор

Может использоваться для простой замены
Операторы всегда пишутся в предыдущей строке, чтобы избежать непредвиденных проблем.

// 不推荐 
var x = a ? b : c;

// 推荐 
var y = a ?
    longButSimpleOperandB : longButSimpleOperandC;

var z = a ?
        moreComplicatedB :
        moreComplicatedC;

4.3.8 && и ||

Бинарные булевы операторы можно закоротить, и они оценивают только последний член, когда это необходимо.

// 不推荐
function foo(opt_win) {
  var win;
  if (opt_win) {
    win = opt_win;
  } else {
    win = window;
  }
  // ...
}

if (node) {
  if (node.kids) {
    if (node.kids[index]) {
      foo(node.kids[index]);
    }
  }
}

// 推荐
function foo(opt_win) {
  var win = opt_win || window;
  // ...
}

var kid = node && node.kids && node.kids[index];
if (kid) {
  foo(kid);
}

4.3.9 Спецификация декларации

Используйте let как можно больше для объявления переменных и используйте меньше var .

4.3.10 точка с запятой

Точка с запятой обязательна в следующих случаях

выражение
return
throw
break
continue
do-while

4.3.11 Спецификация аннотации

Однострочный комментарий на отдельной строке,//за которым следует пробел
многострочные комментарии,/*за которым следует пробел
аннотации функций/методов
- Примечание. Вы должны содержать объявление функции, вы должны аннотировать параметры и возвращаемые значения.
- Аргументы и возвращаемые типы должны содержать информацию о типе и описание
- Когда функция является внутренней и недоступна извне, вы можете использовать флаг @inner.


// 注释

/* xxxx
 xxxx
 xxxxx
/*

/** 
 * 函数描述
 * @param {string} p1 参数说明
 * @param {string} p2 参数2的说明，比较长
 *     那就换行了.
 * @param {number=} p3 参数3的说明（可选）
 * @return {Object} 返回值描述
/*
function foo(p1, p2, p3) {
    return {
        p1: p1,
        p2: p2
    }
}

4.4 Обнаружение синтаксиса ESlint

Обнаружение грамматики может помочь нам определить, является ли часть грамматики точной.

(5) Спецификации представления кода

Спецификация представления кода и управление версиями

(6) Управление версиями

Спецификация отправки кода и управление версиями