Magento2开发教程六-Magento2开发编码规范

代码划分标准
Magento的核心开发人员必须遵循的Magento代码划分标准.

本标准推荐给第三方扩展开发者。

Magento代码的某些部分可能不符合标准，但是我们正在逐步完善。

该标准是在我们的努力范围，以确保以下：

• 从功能层（JavaScript）去耦视觉层（CSS）层。
• 从标记（HTML）中分离功能层（JavaScript）。
• 恢复强调使用jQuery模板。
• 恢复重点从PHP类去耦HTML，CSS和JS。

使用RFC 2119 解读 “MUST,” “MUST NOT,” “REQUIRED,” “SHALL,” “SHALL NOT,” “SHOULD,” “SHOULD NOT,” “RECOMMENDED,” “MAY,” 和 “OPTIONAL” 关键字.

语义

属性的名称和值必须使用有意义的单词由拉丁字母缩写的字母和连字符连接(-)

• 帮助简化和统一用于将视觉样式应用到页元素的命名约定。

可接受的

<section id="information-dialog-tree">
   <p> ... </p>
   <p> ... </p>
</section>
<a href="#information-dialog-tree">Scroll to text</a></a>

不可接受的

<section id="заголовок">
   <p> ... </p>
   <p> ... </p>
</section>
<section id="some_id">
   <p> ... </p>
   <p> ... </p>
</section>
<a href="#some_id">Scroll to text</a>

语义表示依赖于id属性

<ul>
   <li class="first" type="button" aria-pressed="false" aria-controls="some-id">button 1</li>
   <li type="button" aria-pressed="false" aria-controls="some-id">button 2</li>
   <li type="button" aria-pressed="true" aria-controls="some-id">button 3</li>
</ul>
<div>
   <label for="some-id">Enter text</label>
   <textarea id="some-id"></textarea>
</div>
<a href="#some-id">Scroll to text</a>

不可接受的PHTML，JavaScript和CSS文件的组合，

<ul id="my-special-menu">
   <li id="buttonId1" class="first" type="button">button 1</li>
   <li id="buttonId2" type="button">button 2</li>
   <li id="buttonId3" type="button">button 3</li>
</ul>

JavaScript 文件

$('#my-special-menu').on('click','li[id^="button"]', function() { ... })

CSS 文件

#my-special-menu { ... }
#my-special-menu > li { ... }

您必须仅使用语义HTML标记，并且不能使用呈现标记。

可接受的:

<p>HTML has been created to <b>semantically</b> represent documents.</p>
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>

不可接受的:

<p>HTML has been created to <strong>semantically</strong> represent documents.</p>
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>

代码划分

可接受的CSS选择器

.notices-wrapper { ... }
.page-header:after { ... }
.payment-list:first-child { ... }
.caution { ... }
.caution.link { ... }
form input[type="password"] { ... }
.control-text:focus { ... }
a:hover { ... }
nav li._active { ... }

不可接受的CSS选择器

#header { ... }
[data-action="delete"] { ... }
form input[name="password"] { ... }
section[role="main"] { ... }
[role="menu] [role="menuitem"] { ... }
[role="menu] [role="menuitem"].active { ... }

你不能硬编码CSS样式在JavaScript文件

可接受的JavaScript文件

...
   options: {
      hOffset: 0,
      myCustomElement: '[data-container="my-custom-element"]',
 hiddenClass: '_hidden'
  }
...
   this.element.toggleClass(this.options.hiddenClass);
...
   this.options.hOffset = /* calculation based on dimensions of some DOM elements within a widget */
   this.element.find(this.options.myCustomElement).css({'margin-top', this.options.hOffset + 'px'})
...

不可接受的JavaScript部件文件

this.element.on('click', function() {
   if ($(this).is(':visible')) {
      $(this).css({ visibility: 'hidden' });
   } else {
      $(this).css({ visibility: 'visible' });
   }
});

您不能在HTML标签内使用内联CSS样式

可接受PHTML模板

<div class="no-display"> ... </div>

不可接受PHTML模板

<div style="display: none;"> ... </div>

PHP编码规范

magento 2核心开发团队使用PSR-1: 基本的编码标准 和 PSR-2: 编码风格指南标准开发。 Magento 2推荐开发者开发和定制扩展也使用这些标准。

类名解析标准

例子：

  $this->get(ClassName::class);

  $this->get(\Magento\Path\To\Class::class);

HTML样式指南

这种风格指南定义为团队开发Magento少和CSS代码的HTML代码风格的内在要求。我们建议开发者Magento的扩展和定制也使用这些标准。

缩进

只使用空格缩进:

• Tab: 4 空格
• 缩进大小: 4 空格
• 延续缩进: 4 空格

推荐

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

文件结束

在文件的结尾添加空白行。

自关闭的标签

总是关闭自关闭标签。

不恰当的

<br>
<img src="image.png" alt="image">
<input type="text" name="username">

推荐的

<br />
<img src="image.png" alt="image" />
<input type="text" name="username" />

行长

避免代码行长于120个字符。使用编辑器时，浏览HTML代码时，向左和向右滚动是不方便的。将标记属性按比例排列以增加代码可读性。

不恰当的

<input data-bind="attr: { id: 'cart-item-'+item_id+'-qty', 'data-cart-item': item_id, 'data-item-qty': qty }, value: qty" type="number" size="4" class="item-qty cart-item-qty" maxlength="12"/>

推荐的

<input data-bind="attr: {
       id: 'cart-item-'+item_id+'-qty',
       'data-cart-item': item_id,
       'data-item-qty': qty
       }, value: qty"
       type="number"
       size="4"
       class="item-qty cart-item-qty"
       maxlength="12"/>

等于号周围的空间

不推荐的

<link rel = "stylesheet" href = "styles.css">

推荐的

<link rel="stylesheet" href="styles.css">

属性后面的空格

不推荐的

<span data-bind="i18n : 'Update'"></span>
<span data-bind="i18n:'Update'"></span>

推荐的

<span data-bind="i18n: 'Update'"></span>

元素级别如下图：

css类名称

不恰当的

<button type="submit" class="button-green">Submit</button>

推荐的

<button type="submit" class="action-primary">Submit</button>