sfb -- -- 主题组成部分

存储前置构建器用于构建主题的组件.

安装

• 安装依赖关系 npm install
  • 升级到16号节点后,您必须完成 npm install --legacy-peer-deps 换成

利用市场进行地方发展

• 启动服务器 npm start。 。 。 .
• 你用得着 资源覆盖 用于js和cs:
  • 发讯人: https://engage19billing.test.devappdirect.me/sfb-theme-components@0/* 改为 http://localhost:3444/*
  • 替换您选择的 MP URL

使用工具包进行地方发展

• 安装 sfb-toolkit (英语)。 。 。 .
• 设置以 Plaza 为主题的主题项目: sfb-toolkit setup。 。 。 .
• 开始 sfb-toolkit 本地服务器 : sfb-toolkit start。 。 。 .
• 开始 sfb-theme-components 服务捆绑的本地服务器 : npm run start
• 你可以做到这一点 资源覆盖 用于js和cs:
  • 发讯人: https://engage19billing.test.devappdirect.me/sfb-theme-components@0/* 改为 http://localhost:3444/*

故事书

要查看组件,我们可以启动"故事本"服务器:

• 运行 npm run storybook。 。 。 .
• 导航到 http://localhost:8087/。 。 。 .
• 在左手导航栏上,选择一个组件/Atom将使组件成为主部分.
• 我们正在使用 童话小说 以更新故事本中组件设置道具.

为您的主题创建自定义组件

• 启动故事簿服务器 : npm run storybook
• 转到 自定义组件文档 需要更多信息.

CSS - 命名公约

我们将遵循修改后的版本: https://css-tricks.com/abem-useful-adaptation-bem/ (中文(中国大陆) )

• 无 a/o/m 前缀
• 名称应多用一个词 骆驼 Case 公约代替 -
• 修改器正在使用 -- (双破折号)并与名称相接

实例:

// just an element, nothing to see
<div class="blockName_elementName"></div>

// with a modifier
<div class="blockName_elementName blockName_elementName--modifier"></div>

关于更详细的例子,请参见一节 CSS - Naming Tool

构成部分的结构

组件有两个文件夹:

• atoms/ 其中应包括非常基本、易于重复使用的不同主题和样式组件,例如: 图像, (中文(简体) ), 按钮, (中文(简体) ), 页眉等 (中文(简体) ).
• components/ 包含一个主题更具体的组件,大多数时间包括一个或多个 原子 组件

进行响应

• 弹性 https://markus.oberlehner.net/blog/创建-a-应变-二相栏-放出-用flexbox/

• 隐藏元素 https://markus.oberlehner.net/blog/poor-mans-container-queries-hide-content-on-the-width-of-its-container/ 互联网档案馆的存檔,存档日期2014-12-21

• 不要使用媒体查询

推进型和功能组件不强制

• 功能组件示例 https://reactjs.org/docs/hooks-state.html 页面存档备份,存于互联网档案馆
• 跟随清除 守则最佳做法 https://github.com/ryancdermott/ clean-code-javascript 互联网档案馆的存檔,存档日期2013-12-21

CSS - 命名工具

已实施命名工具,以帮助跟踪CSS命名结构:

每一组成部分应包含:

import { createNamespace } from './tools/namingTools';

const n = createNamespace('MyComponentName');

简单用途 :

<div {...n(element[, [modifiers]]).props}></div>

• modifier 是可选的,也可以是其中之一 string 或者说 array of strings

实例

带有修改符的元素 :

<div {...n('elementName', 'myModifier').props}></div> 
// translates to
<div 
    class="myComponentName_elementName 
           myComponentName_elementName--myModifier">
</div> 

带有修改词列表的元素 :

<div {...n('elementName', ['myModifier1', 'myModifier2']).props}></div> 
// translates to
<div 
    class="myComponentName_elementName 
           myComponentName_elementName--myModifier1 
           myComponentName_elementName--myModifier2">
</div> 

有 testId 的元素 : .withTestId()

<div {...n('elementName').withTestId().props}></div> 
// translates to
<div class="myComponentName_elementName" data-testid="myComponentName:elementName"></div> 

有自定义 testId 的元素 : .withTestId(*)

<div {...n('elementName').withTestId('myTestId').props}></div> 
// translates to
<div class="myComponentName_elementName" data-testid="myComponentName:myTestId"></div> 

有 testId 的元素 仅限数字 : .withTestId()

<div {...n().withTestId('myTestId').props}></div> 
// translates to
<div data-testid="myComponentName:myTestId"></div> 

有额外类的元素 .withClass(*)

<div {...n('elementName').withClass('myExtraClass').props}></div> 
// translates to
<div class="myComponentName_elementName myExtraClass"></div> 

有额外类的元素 .withClass(*)

<div {...n('elementName').withClass(['myExtraClass1', 'myExtraClass2']).props}></div> 
// or
<div {...n('elementName').withClass('myExtraClass1').withClass('myExtraClass2').props}></div> 
// translates to
<div class="myComponentName_elementName myExtraClass1 myExtraClass2"></div> 

namingTool 和它的职能 .withClass(), (中文(简体) ), .withTestId() 为: 可连锁 这意味着您可以研究每个函数的结果,直到 .props 将召入.

复杂实例

<div 
     {...n('elementName', ['modifier1', modifier2'])
         .withClass(['myExtraClass1', 'myExtraClass2'])
         .withClass('testClass')
         .withTestId()
         .props
     }></div> 
// translates to
<div 
    class="myComponentName_elementName 
           myComponentName_elementName--modifier1
           myComponentName_elementName--modifier2
           myExtraClass1 
           myExtraClass2
           testClass"
    data-testid="myComponentName:elementName "
></div> 

Jest - 测试和调试

已有5个定义的发射配置可用于测试和调试:

• Jest run all test suites - 这个配置将贯穿所有测试套件和项目中定义的所有测试案例.
• Jest run selected test suite - 此配置将运行目前在您工作空间中选择的文件( 测试套件) 中找到的所有测试大小写 .
• Jest run all tests matching selected text - 此配置将运行所有匹配您工作空间中选中/ 突出显示的文本的测试大小写( 多个测试可根据所选文本匹配)
• Jest run all test suites matching prompted input - 此配置将运行所有包含/匹配输入框中提供的文本的测试套件, 当配置运行时将会显示( 多个测试套件可以匹配)
• Jest run all tests matching prompted input - 此配置将运行所有包含/匹配输入框中提供的文本的测试大小写, 当配置运行时会显示( 多个测试大小写可以匹配)

NOTE: 在使用上述配置时,断点应在VS代码中正确工作.