Спецификация внешнего кода команды мясной федерации

спецификация кода
Спецификация внешнего кода команды мясной федерации

предисловие

Ссылка на спецификацию кода взята из спецификаций каждой команды и содержит спецификацию команды переднего плана мясного профсоюза.

Основные характеристики

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

именная классификация

  • camelCase(Тип горба, также называемый малым горбом,e.g. userInfo)
  • PascalCase(Номенклатура Паскаля, также известная как номенклатура большого горба,e.g. UserInfo)
  • kebab-case(Тип соединения тире,e.g. user-info)
  • snake_case(подчеркивание типа соединения,e.g. user_info)

Нейминг проекта

Все в нижнем регистре, разделенные символом подчеркивания. пример:snake_case

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

использование каталога компонентовPascalCase, другие каталоги используются одинаковоkebab-caseстиль

HTML-именование

Использование единственного и множественного числаkebab_case.jsстиль

CSS-именование

Унифицированное использованиеsnake_case.css

HTML-именование

Унифицированное использованиеsnake_case.html

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

Стандарт грамматики

  • Отступ с помощью табуляции (2 пробела);

  • Вложенные узлы должны иметь отступ;

  • В атрибутах используйте двойные, а не одинарные кавычки;

  • Все имена атрибутов пишутся строчными буквами и разделяются дефисом (-);

  • Использовать косую черту в конце автозакрывающегося тега;

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/image.png" alt="Image" />

    <!-- 属性名全小写，用中划线（-）做分隔符 -->
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

указать кодировку символов

Позвольте браузеру легко и быстро определить подходящий метод рендеринга для веб-контента, объявив явную кодировку символов, обычно определяемую как «UTF-8».

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  ...
</html>

Уменьшите количество ярлыков

<!-- bad -->
<span class="avatar">
  <img src="..." />
</span>

<!-- good -->
<img class="avatar" src="..." />

Семантические теги

HTML-теги могут использовать семантику, попробуйте использовать семантические теги, чтобы страница не содержала тегов div или p.

<!-- bad -->
<div>
  <p></p>
</div>

<!-- good -->
<header></header>
<footer></footer>

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

отступ

Использовать отступ табуляции (2 пробела)

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

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

Заканчивайте каждое утверждение точкой с запятой

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

Примечания

Комментарии используются единообразно /* */

/* 这里是注释 */
.element {
  width: 50px;
  height: 50px;
}

кавычки

  • Используйте кавычки для содержимого URL-адреса

  • Значения атрибутов в селекторах атрибутов требуют кавычек

.element:after {
  content: "";
  background-image: url("logo.png");
}

li[data-type="single"] {
  ...;
}

имя

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

  • id назван в верблюжьем регистре

/* class */
.element-content {
  ...;
}

/* id */
#myDialog {
  ...;
}

Спецификация JavaScript

отступ

Использовать отступ табуляции (2 пробела)

if (x < y) {
  x += 10;
} else {
  x += 1;
}

именование переменных

  • Переменные названы в верблюжьем регистреcamelCase
  • Используйте все прописные буквы для констант и соединяйте их символами подчеркивания.
  • Конструктор и класс принимаютPascalCase 
var thisIsMyName;

var MAX_COUNT = 10;

function Person(name) {
  this.name = name;
}

Class Person {
    
}

объявление переменной

Все объявления переменных в области действия функции в максимально возможной степени относятся к заголовку функции. Предпочитайте переменные блочного уровняletа такжеconst, такие как константы, которые не нужно изменять для использованияconst

длина одной строки

Длина одной строки не может превышать 100, а лишнюю часть нужно завернуть

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

Унифицировано, чтобы добавить точку с запятой.

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

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

пример:

// not good
var a = {
  b : 1
};

// good
var a = {
  b: 1
};

// not good
++x;
y++;
z = x ? 1:2;

// good
++x;
y++;
z = x ? 1 : 2;

// not good
var a = [ 1, 2 ];

// good
var a = [1, 2];

// good
var doSomething = function(a, b, c) {
  // do something
};

// good
doSomething(item);

// not good
for (let i = 0;i < 6;i++) {
  x++;
}

// good
for (let i = 0; i < 6; i++) {
  x++;
}

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

  • После объявления переменной (пустая строка не требуется, если объявление переменной находится в последней строке блока кода)
  • Перед комментарием (пустая строка не требуется, если комментарий находится в первой строке блока кода)
  • Перед определением функции
  • файл с пустой строкой в ​​конце
var x = 1;

// 注释前要有空行
if (x >= 1) {
  var y = x + 1;
}

function test () {
  ...
}

новая линия

  • Блок кода после '{' и до '}'

  • после присвоения переменной

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;

// good
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}



// good
function test() {
    ...
}


// good
var a,foo = 7,
    b, c, bar = 8;

Примечания

однострочный комментарий

  • В случае комментария на одной строке после комментария // должен следовать пробел

  • Если комментарий находится на той же строке, что и код, за ним должен следовать пробел после точки с запятой в коде, а после пробела должен следовать // в комментарии

// 调用函数
foo();

var maxCount = 10; // 这是一个变量

Многострочный комментарий

Многострочные комментарии имеют следующую форму:

/**
 * 代码注释1
 * 代码注释2
 */

Многострочные комментарии рекомендуются в следующих ситуациях:

  • Трудно понять фрагмент кода

  • Потенциально ошибочный фрагмент кода

  • Код с сильной бизнес-логикой

аннотация функции

Для сложных функций и всех классов необходимо выполнять аннотации функций.Аннотации функций используют унифицированные отраслевые спецификации, что удобно для последующего использования jsdoc для формирования документов. Лучше всего настроить VSCode для автоматической генерации шаблонов

пример:

/**
 * @description 函数描述的 必填
 * @param id {Number} 传入需要获取名称的人物id 参数必填
 * @return {String} 返回的姓名 返回值必填，空为void
 * @author shi 2015/07/21 作者可选
 * @version 1.1.0 可以不写 版本可选
 * @example 示例代码，可选
 */
function getTaskName(id) {
  let name = "test";
  return name;
}

кавычки

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

var y = 'foo',
  z = '<div id="test"></div>';

объект, массив

  • Имя свойства объекта не нужно заключать в кавычки. Например, если имя свойства объекта названо символом подчеркивания, оно должно быть заключено в кавычки (eslintизrules)

  • Объекты записываются с отступом, а не на одной строке (одно свойство может быть записано на одной строке,es6Вы можете использовать одну строку при импорте метода);

  • Массивы и объекты не имеют запятой в конце.

// good
var a = {
  b: 1,
  c: 2
};

кронштейны

Следующие ключевые слова должны сопровождаться фигурными скобками (даже если содержимое блока кода состоит только из одной строки):if, else, for, while, do, switch, try, catch, finally, with.

// not good
if (condition) doSomething();

// good
if (condition) {
  doSomething();
}

undefined

Никогда не используйте undefined напрямую для оценки переменных;

Используйте typeof и строку undefined для оценки переменных.

// not good
if (person === undefined) {
    ...
}

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

Условные суждения и циклы с несколькими уровнями вложенности не допускаются (до трех уровней) (выделение добавлено ⭐)

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

// bad
if (x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

// good
return x === 10 ? 'valid' : 'invalid';

// bad
if (!x) {
  if (!y) {
    x = 1;
  } else {
    x = y;
  }
}

// good
x = x || y || 1;

Vue-спецификация

Каталог, файл, соглашение об именах компонентов

1. Справочник

Использовать единый каталогkebab-caseстиль

2. Файлы под представлениями

  • использование файла класса jsPascalCase,Такие какUserInfo.js

  • Унифицированное использование других файлов ресурсовkebab-casстиль, например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>

<user-book />

спецификация разработки

файловая структура

  • Базовая структура

заказ:template -> script -> style. Компонент должен стараться не превышать200Когда страница содержит независимые части, попробуйте разделить ее на подкомпоненты.Страница должна состоять из отдельных виджетов

<template>
  <div>
    <component-a />
    <component-b />
    <component-c />
  </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

  • router pathиспользоватьkebab-caseФормат.

с подчеркиванием (например:/user_info)илиcamelCase(Такие как:/userInfo) рассматривается как одно слово, и поисковые системы не могут различать семантику.

  • router nameиспользоватьkebabCaseФормат.

// 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 
<welcome-message greeting-text="hi"></welcome-message>

<script>
  props: {
    greetingText: String;
  }
</script>

  • Определение реквизита должно быть максимально подробным.

    1. Объявите тип type (обязательно)

    2. Укажите значение по умолчанию (обязательно

    3. Тип чека (необязательно)

// bad 这样做只有开发原型系统时可以接受
props: ['status']

// good
props: {
 status: {
   type: String,
   required: true,
   default: ''
   }
 }
}

соглашение об именах методов

  • CamelCasecamelCase, операционные функции используют форму глагола или глагола + существительного единообразно
jumpPage() {

}

openCarInfoDialog () {
    
}
  • Метод запроса данных, заканчивающийся данными
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 聚集

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

<!-- bad -->
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/27/171bab9e9687bb00~tplv-t2oaga2asx-image.image" alt="Vue Logo">
<my-component foo="fooattribute" bar="barattribute" baz="bazattribute"></my-component>

<!-- good -->
<img
  src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/27/171bab9e9687bb00~tplv-t2oaga2asx-image.image"
  alt="Vue Logo"
>
<my-component
  foo="fooattribute"
  bar="barattribute"
  baz="bazattribute"
>
</my-component>

Свойства заказа

Собственные атрибуты располагаются впереди, а инструкции — сзади.

  - 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

Спецификация инструкции

  • Инструкции с сокращениями всегда в сокращенной форме
// 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 для одного и того же элемента (проблема с производительностью).

Когда возникает такая необходимость, есть два решения:

1. Замените данные вычисляемым свойством, которое возвращает отфильтрованный список.

 <!-- 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>

2. Переместите 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>

Спецификация SASS

Выбор грамматики

SASS имеет два формата синтаксиса: один — SCSS (Sassy CSS), а другой — синтаксис с отступом, иногда называемый Sass.

Взаимодействие с командой

Учитывая синтаксис SCSS синтаксиса синтаксиса CSS синтаксиса и масштабируемости и масштабируемости SCS, когда мы используем стиль записи SASS, последовательный используйте синтаксис SCSS

Примечания

SASS поддерживает стандартные многострочные комментарии CSS /* */, а также однострочные комментарии //.

  • Многострочные комментарии сохраняются в выходных файлах, скомпилированных в несжатом режиме, однострочные // боковые комментарии удаляются

  • Как многострочные, так и однострочные комментарии удаляются из выходных сжатых файлов CSS после компиляции SASS.

  • Когда первым символом многострочного комментария является восклицательный знак «!», т. е. /*! */, SASS сохранит комментарий независимо от используемого метода компиляции.

  • Комментарии могут быть добавлены к переменным SASS

Взаимодействие с командой

  • Все следуют комментариям CSS

  • Не используйте комментарии /*!*/

  • Не помещайте переменные SASS в комментарии

@charset "UTF-8";

/**
 * @desc File Info
 * @author liqinuo
 * @date 2015-10-10
 */

/* Module A
----------------------------------------------------------------*/
.mod_a {}

/* module A logo */
.mod_a_logo {}

/* module A nav */
.mod_a_nav {}


/* Module B
----------------------------------------------------------------*/
.mod_b {}

/* module B logo */
.mod_b_logo {}

/* module B nav */
.mod_b_nav {}

спецификация вложенности

вложенность селектора

/* CSS */
.jdc {}
body .jdc {}

/* SCSS */
.jdc {
    body & {}
}

вложение свойств

/* CSS */
.jdc {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(/img/icon.png);
    background-position: 0 0;
}

/* SCSS */
.jdc {
    background: {
        color: red;
        repeat: no-repeat;
        image: url(/img/icon.png);
        position: 0 0;
    }
}

Переменная

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

// CSS
.jdc {
    color: red;
    border-color: red;
}

// SCSS
$color: red;
.jdc {
    color: $color;
    border-color: $color;
}

миксин

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

// CSS
.jdc_1 {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.jdc_2 {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

// SCSS
@mixin radius($radius:5px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.jdc_1 {
    @include radius; //参数使用默认值
}
.jdc_2 {
    @include radius(10px);
}



// CSS
.jdc_1 {
    background: url(/img/icon.png) no-repeat -10px 0;
}
.jdc_2 {
    background: url(/img/icon.png) no-repeat -20px 0;
}

// SCSS
@mixin icon($x:0, $y:0) {
    background: url(/img/icon.png) no-repeat $x, $y;
}
.jdc_1 {
    @include icon(-10px, 0);
}
.jdc_2 {
    @include icon(-20px, 0);
}

Место выбора %

Если он не вызывается, лишних css-файлов не будет, селекторы-заполнители определяются с отметками % и вызываются через @extend

//scss
%borderbox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jdc {
    @extend %borderbox;
}

РАСШИРИТЬ наследование

Может наследовать и повторно использовать общедоступные свойства

// CSS
.jdc_1 {
    font-size: 12px;
    color: red;
}
.jdc_2 {
    font-size: 12px;
    color: red;
    font-weight: bold;
}

// SCSS
.jdc_1 {
    font-size: 12px;
    color: red;
}
.jdc_2 {
    @extend .jdc_1;
    font-weight: bold;
}

// 或者
%font_red {
    font-size: 12px;
    color: red;
}
.jdc_1 {
    @extend %font_red;
}
.jdc_2 {
    @extend %font_red;
    font-weight: bold;
}

для цикла

// CSS
.jdc_1 {background-position: 0 -20px;}
.jdc_2 {background-position: 0 -40px;}
.jdc_3 {background-position: 0 -60px;}

// SCSS
@for $i from 1 through 3 {
    .jdc_#{$i} {
        background-position: 0 (-20px) * $i;
    }
}

Уведомление:#{} — это коннектор, и вам нужно полагаться на использование переменного соединения

каждая петля

// CSS
.jdc_list {
    background-image: url(/img/jdc_list.png);
}
.jdc_detail {
    background-image: url(/img/jdc_detail.png);
}

// SCSS
@each $name in list, detail {
    .jdc_#{$name} {
        background-image: url(/img/jdc_#{$name}.png);
    }
}


// CSS
.jdc_list {
    background-image: url(/img/jdc_list.png);
    background-color: red;
}
.jdc_detail {
    background-image: url(/img/jdc_detail.png);
    background-color: blue;
}

// SCSS
@each $name, $color in (list, red), (detail, blue) {
    .jdc_#{$name} {
        background-image: url(/img/jdc_#{$name}.png);
        background-color: $color;
    }
}

функция функция

@function pxToRem($px) {
    @return $px / 10px * 1rem;
}
.jdc {
    font-size: pxToRem(12px);
}

Спецификация операции

оставить пробел между операторами

.jdc {
    width: 100px - 50px;
    height: 30px / 5;
}

Уведомление:Единица операции, единица одновременно участвует в операции, поэтому 10px не равно 10, особое внимание следует уделить при умножении и делении.

// 正确的运算格式
.jdc {
    width: 100px - 50px;
    width: 100px + 50px;
    width: 100px * 2;
    width: 100px / 2;
}

Спецификация мини-программы

Каталог, файл, соглашение об именах компонентов

1. Справочник

Единое использование каталогаkebab-caseстиль

2. Файлы под страницей

  • использование файла класса jsPascalCase,Такие какUserInfo.js

  • Унифицированное использование других файлов ресурсовkebab-caseстиль, напримерuser-detail.js, user-detail.css, user-avatar.png

3. Файлы компонентов

  • именование следуетPascalCaseсоглашение. имя файла компонентаindex.vueкроме этого, всегда используйтеPascalCase(большой горб) обозначение. Причина в том, что при введении компонентов обычно используются переменные компонентовPascalCaseформат, чтобы отличить его от общих переменных. Имя файла компонента совпадает с именем переменной, что удобно для переписки.
"usingComponents": {
  "select-store-dialog": "../login/components/SelectStoreDialog/index"
}

  • Имена компонентов всегда должны состоять из нескольких слов, а компоненты состоят из нескольких слов, напримерBookItem,в одиночествеBookНе рекомендуется.

  • Использование компонентов следуетkebab-caseсоглашение Использование компонентов на странице должно быть закрыто до и после и отделено короткой строкой, например:

<user-book></user-book>

<user-book />

Вариант заказа компонентов

компонент страницы

- data    (数据)
- 生命周期函数 （onLoad等）  
- 各类方法  （methods）

пользовательский компонент

- properties    (需要传得数据)
- data    (数据)
- 组件钩子函数 （attached等）  
- 页面钩子函数 （show等）  
- 各类方法  （methods）

Спецификация разработки компонентов

1. Зарегистрируйте компонент

При регистрации компонентов все используютPascalCaseФормат.

"usingComponents": {
    "select-store-dialog": "../login/components/SelectStoreDialog/index"
  }

2. Свойства именования Конвенция

  • в заявленииproperties, его имя всегда должно использоватьcamelCase, а в шаблонах всегда следует использоватьkebab-case 
<!--wxml-->
<welcome-message greeting-text="hi"></welcome-message>

  • определение свойств должно быть как можно более подробным

    1. Объявите тип type (обязательно)

    2. Укажите значение по умолчанию (обязательно)

/**
* 组件的属性列表
*/
properties: {
  content:{
    type: Object,
    value: {}
  }
}

соглашение об именах методов

  • CamelCasecamelCase, операционные функции используют форму глагола или глагола + существительного единообразно
jumpPage() {

}

openCarInfoDialog () {
    
}
  • Метод запроса данных, заканчивающийся данными
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 聚集

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

<!-- bad -->
<image src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/27/171bab9e9687bb00~tplv-t2oaga2asx-image.image" class="image-class" />
<my-component foo="fooattribute" bar="barattribute" baz="bazattribute"></my-component>

<!-- good -->
<image
  src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/27/171bab9e9687bb00~tplv-t2oaga2asx-image.image"
  class="image-class"
>
<my-component
  foo="fooattribute"
  bar="barattribute"
  baz="bazattribute"
>
</my-component>

порядок атрибутов элемента

Официальные атрибуты располагаются впереди, настраиваемые атрибуты — сзади, а инструкции — в конце.

  - class
  - id
  - src
  - data-*
  - wx:for
  - bind:tap
  ...

Связанные справочные группы

Нормы основной референтной группы

скачать pdf

Связь:disk.baidu.com/is/1Zn WY IDP Q…Код извлечения: swhh Скопировав этот контент, откройте мобильное приложение Baidu SkyDrive, с которым удобнее работать.

Категории