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

2年 前
阅读本文预计花费：3 分钟
作者：晓风拂月
7天成为Magento系统架构师，现在开始学习Magento全栈开发！

《Magento2.X企业级开发实战》

代码划分标准

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” 关键字.

语义

属性的名称和值必须使用有意义的单词由拉丁字母缩写的字母和连字符连接(-)
  • 帮助简化和统一用于将视觉样式应用到页元素的命名约定。

可接受的

id="information-dialog-tree">
   

 ... 
   

 ... 


 href="#information-dialog-tree">Scroll to text

不可接受的

id="заголовок">
   

 ... 
   

 ... 



id="some_id">
   

 ... 
   

 ... 


 href="#some_id">Scroll to text
语义表示依赖于id属性


    
    
   
 	
  •  class="first" type="button" aria-pressed="false" aria-controls="some-id">button 1

    • 
    
   
 	
  •  type="button" aria-pressed="false" aria-controls="some-id">button 2

    • 
    
   
 	
  •  type="button" aria-pressed="true" aria-controls="some-id">button 3

    • 
    



    
   
   


    
    
 href="#some-id">Scroll to text

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

    

      
id="my-special-menu">
   
 	
    •  id="buttonId1" class="first" type="button">button 1

      • 
      
   
 	
    •  id="buttonId2" type="button">button 2

      • 
      
   
 	
    •  id="buttonId3" type="button">button 3

      •

    JavaScript 文件

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

    CSS 文件

    #my-special-menu { ... }
#my-special-menu > li { ... }
    您必须仅使用语义HTML标记，并且不能使用呈现标记。

    可接受的:

    

HTML has been created to semantically represent documents.


Warning: Following the procedure described below may irreparably damage your equipment.

    不可接受的:

    

HTML has been created to semantically represent documents.


Warning: Following the procedure described below may irreparably damage your equipment.

    代码划分

    可接受的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模板

    

     class="no-display"> ...

    不可接受PHTML模板

    

     style="display: none;"> ...

    PHP编码规范

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

    类名解析标准

    例子：

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

    HTML样式指南

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

    缩进

    只使用空格缩进:

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

    推荐

    

      
      
    
 	
    • One
    
      • 
      
 	
    • Two

      •

      文件结束

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

      自关闭的标签

      总是关闭自关闭标签。

      不恰当的

      

src="image.png" alt="image">
type="text" name="username">

      推荐的

      
/>
src="image.png" alt="image" />
type="text" name="username" />

      行长

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

      不恰当的

      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"/>

      推荐的

      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"/>

      等于号周围的空间

      不推荐的

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

      推荐的

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

      属性后面的空格

      不推荐的

       data-bind="i18n : 'Update'">
 data-bind="i18n:'Update'">

      推荐的

       data-bind="i18n: 'Update'">

      元素级别如下图：

      css类名称

      不恰当的

      推荐的

      文章来源于互联网:Magento2开发教程NO6-Magento2开发编码规范

      如无特殊说明或标注，任何个人或组织，复制、转载、采集本站内容请注明：
      本文来源于：【Magento中文网】，并添加本文地址链接。
      如未按上述操作复制或转载，本站有权追究法律责任。
      若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
      上一篇:
      下一篇: