stenciljs 学习六 组件开发样式指南

Posted 2021-01-08 rongfengliang-荣锋亮

组件不是动作，最好使用名词而不是动词，

文件结构

• 每个文件一个组件。
• 每个目录一个组件。虽然将类似的组件分组到同一目录中可能是有意义的，但我们发现当每个组件都有自己的目录时，更容易记录组件。
• 实现（.tsx）和组件的样式应该位于同一目录中。

参考格式

├── card
│ ├── card.ios.scss
│ ├── card.md.scss
│ ├── card.scss
│ ├── card.tsx
│ └── test
│ └── basic
│ ├── e2e.js
│ └── index.html
├── card-content
│ ├── card-content.ios.scss
│ ├── card-content.md.scss
│ ├── card-content.scss
│ └── card-content.tsx
├── card-title
│ ├── card-title.ios.scss
│ ├── card-title.md.scss
│ ├── card-title.scss

命名

• html 标签
  当创建要在不同项目中使用的组件集合（如@ ionic / core）时，前缀具有重要作用。Web组件没有作用域
  ，因为它们是在网页中全局声明的，这意味着需要“唯一”前缀来防止冲突。前缀还有助于快速识别组件的集合。
  此外，Web组件需要在标记名称中包含“ - ”短划线，因此使用第一部分命名组件是很自然的。
  不建议使用“stencil”作为前缀
• 命名
  组件不是动作，它们在概念上是“事物”。最好使用名词而不是动词，例如“动画”而不是“动画”。
  “输入”，“制表符”，“导航”，“菜单”是一些例子。
• 修饰符
  当几个组件相关和/或耦合时，最好共享名称，然后添加不同的修饰符，例如：

<ion-card>
<ion-card-header>
<ion-card-content>

组件（ts 类）

由于类是作用域的，因此组件的ES6类的名称应该没有前缀。没有碰撞的风险。

@Component({
  tag: ‘ion-button‘
})
export class Button { ... }

@Component({
  tag: ‘ion-menu‘
})
export class Menu { ... }

typescript

• 遵循 tslint-ionic-rules
• 应该内联变量装饰器。

@Prop() name: string;
@Element() el: HTMLElement;

• 方法装饰器应该是多行的

@Listen(‘click‘)
onClick() {
  ...
}

• 尽可能使用私有变量和方法。
• 带有Method / Prop / Event / Component装饰器的代码应该有jsdocs

参考实例

@Component({
  tag: ‘ion-something‘,
  styleUrl: ‘something.scss‘,
  styleUrls: {
    ios: ‘something.ios.scss‘,
    md: ‘something.md.scss‘,
    wp: ‘something.wp.scss‘
  },
  host: {
    theme: ‘something‘
  }
})
export class Something {

  /**
   * 1. Own Properties
   * Always set the type if a default value has not
   * been set. If a default value is being set, then type
   * is already inferred. List the own properties in
   * alphabetical order. Note that because these properties
   * do not have the @Prop() decorator, they will not be exposed
   * publicly on the host element, but only used internally.
   */
  num: number;
  someText = ‘default‘;

  /**
   * 2. Reference to host HTML element.
   * Inlined decorator
   */
  @Element() el: HTMLElement;

  /**
   * 3. State() variables
   * Inlined decorator, alphabetical order.
   */
  @State() isValidated: boolean;
  @State() status = 0;

  /**
   * 4. Internal props (context and connect)
   * Inlined decorator, alphabetical order.
   */
  @Prop({ context: ‘config‘ }) config: Config;
  @Prop({ connect: ‘ion-menu-controller‘ }) lazyMenuCtrl: Lazy<MenuController>;

  /**
   * 5. Public Property API
   * Inlined decorator, alphabetical order. These are
   * different than "own properties" in that public props
   * are exposed as properties and attributes on the host element.
   * Requires JSDocs for public API documentation.
   */
  @Prop() content: string;
  @Prop() enabled: boolean;
  @Prop() menuId: string;
  @Prop() type = ‘overlay‘;

  /**
   * Prop lifecycle events SHOULD go just behind the Prop they listen to.
   * This makes sense since both statements are strongly connected.
   * - If renaming the instance variable name you must also update the name in @Watch()
   * - Code is easier to follow and maintain.
   */
  @Prop() swipeEnabled = true;

  @Watch(‘swipeEnabled‘)
  swipeEnabledChanged(newSwipeEnabled: boolean, oldSwipeEnabled: boolean) {
    this.updateState();
  }

  /**
   * 6. Events section
   * Inlined decorator, alphabetical order.
   * Requires JSDocs for public API documentation.
   */
  @Event() ionClose: EventEmitter;
  @Event() ionDrag: EventEmitter;
  @Event() ionOpen: EventEmitter;

  /**
   * 7. Component lifecycle events
   * Ordered by their natural call order, for example
   * WillLoad should go before DidLoad.
   */
  componentWillLoad() {}
  componentDidLoad() {}
  componentWillEnter() {}
  componentDidEnter() {}
  componentWillLeave() {}
  componentDidLeave() {}
  componentDidUnload() {}

  /**
   * 8. Listeners
   * It is ok to place them in a different location
   * if makes more sense in the context. Recommend
   * starting a listener method with "on".
   * Always use two lines.
   */
  @Listen(‘click‘, { enabled: false })
  onClick(ev: UIEvent) {
    console.log(‘hi!‘)
  }

  /**
   * 9. Public methods API
   * These methods are exposed on the host element.
   * Always use two lines.
   * Requires JSDocs for public API documentation.
   */
  @Method()
  open() {
    ...
  }

  @Method()
  close() {
    ...
  }

  /**
   * 10. Local methods
   * Internal business logic. These methods cannot be
   * called from the host element.
   */
  prepareAnimation(): Promise<void> {
    ...
  }

  updateState() {
    ...
  }

  /**
   * 11. hostData() function
   * Used to dynamically set host element attributes.
   * Should be placed directly above render()
   */
  hostData() {
    return {
      attribute: ‘navigation‘,
      side: this.isRightSide ? ‘right‘ : ‘left‘,
      type: this.type,
      class: {
        ‘something-is-animating‘: this.isAnimating
      }
    };
  }

  /**
   * 12. render() function
   * Always the last one in the class.
   */
  render() {
    return (
      <div class=‘menu-inner page-inner‘>
        <slot></slot>
      </div>
    );
  }
}

参考资料

https://stenciljs.com/docs/style-guide