Web Components最佳实践

Web Components是一组新的web平台功能,可以使开发者通过声明式、组合式的途径来构建应用。下面是一些给开发者的一些最佳实践建议:

  • 命名空间:自定义元素应该用破折号隔开(例如:<x-tabs>,<my-tabs>),破折号前面的字符才是有效的命名空间。你应该使其简短、唯一,尽可能不要覆盖其他人的前缀。如果你的组件已经有许多开发感兴趣,应该使组件的前缀小于三个字符。

  • 尽可能模仿内建元素:你的组件对其他开发者来说就应该像内嵌组件一样。如果以后正式公开组件的API时,若组件的API感觉很另类,你是否会感觉到尴尬?

  • 静默处理:组件应该想本地DOM元素,所以应该避免在普通元素交互时,出现js 错误,例如:你可以在ul中嵌套div,但它并不会按照你的想法渲染,可是它并不会抛出错误。

  • 属性定义数据输入:使用属性来传递配置信息,用boolean属性来表示boolean值,例如:<my-element selected>来代替<my-element seleted="true">.

  • 事件定义数据输出:除了传输的数据信息巨大或者改变极其频繁之外,我们应该使用事件来传递组件里的信息。

  • 引入依赖的文件:引入你组件的所依赖,不要担心冗余,只要设置合理的缓存头,它们只会在首次会被加载,使用http2.0可以减少多文件的消耗,或者在你发布app时,还可以合并和压缩它们到一个文件里面。

  • 为组件写文档:方便其他人使用你的组件,组件有许多方法可作为它们的API,下面列出了一些容易忽略的地方:

    1. 通过实例标记可以简明的描述属性。
    2. 若一个组件是设计嵌套在另一个中的,需要表明在其中如何使用。
    3. 列出js方法和属性
    4. 列出包含的事件
    5. 当使用shadow dom,元素和select属性允许你把节点放到正确的地方,若其中有任何特殊元素,必须指明。
    6. 若你的组件和微数据有关,需要写出微数据如何应用到你的组件上。
  • 在shadow dom中不要包含太多的东西:虽然允许你在其中添加一些视觉外的很多标签,可是这并不是你想添加多少,就添加多少的理由。因为过多的元素会导致性能问题,另外,尽可能的在DOM中保持语义化。

  • 不要创建过多的自定义组件:如果你有两个仅仅是表现形式不同的组件,这是你就应该考虑合二为一,或者自定义元素可以扩展,而不要重复创建相似功能的组件。

  • 统一声明方式和重要的API:尽可能保持相似功能的紧密性,方便使用者改变其中任何一个地方都可以达到效果。

  • 永远不要假设你运行的环境:如果你的组件很受欢迎,它将会运行在任何你想不到的环境,或者和你没有听过的组件混合使用,力争组件的独立性和灵活性:不要依赖外部的框架、结构。

不要忘记

一个成功的组件会被许多人应用在许多不同的环境中,这意味着遵循web的最佳实践开发变得更重要。

  • 可访问性:确保你的组件可通过ARIA 访问,特别是我们在创建新类型元素的时候这显得更重要。确保添加上 role=””属性。

  • 性能:若你用一个回调来等待处理长时间的操作,记住不要过渡阻止主线程资源。误操作和逻辑性的循环会影响渲染性能,此时使用requestAnimationFrame来管理动画队列。应该清除像动画这种被暂停后占用的资源并且直到你把组件添加到DOM中才开启对应的操作。

  • 脚本不是万能的:许多结构和样式需要js的支持,但是现在纯css就可以实现对应的效果。

  • 响应式:把组件做成响应式的,因为你的用户会在你想不到的环境下使用组件。

  • 测试:自定义标签,理想情况下需要单元测试来检测你的API.

原文:Web Components Best Practices

分享到: