Web components vs. React - LogRocket Blog

Web Components + Compose 是一条更好的路线。

当然,像 molecule 一样用 HTML 表达继承也是不错的做法,但就像之前构思的一样,需要丰富 HTML 使之图灵完备并支持函数。像下面这样

<template>
<button m-def="SuperButton">
<var a="1/number">
<while "a<100">
<let a="a+1">
</while>
${a}
<if "a % 2 == 0">
<let this.style.foreColor="red">
</if>
<else>
<let this.style.foreColor="green">
</else>
<button>
</template>

上面这段HTML将生成像这样的代码:

class SuperButton extends HMTLButton{
render(){
var a = 1;
while(a<100){
a = a + 1;
}
this.appendText(a);
if(a % 2 == 0){
this.style.forColor="red";
} else {
this.style.forColor="green";
}
}
}
document.registerElement('SuperButton', SuperButton);

Web components vs. React的更多相关文章

  1. 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  2. React文档(二十三)Web Components

    React和web components是为了解决不同问题而创立的.web components为可重用组件提供了健壮的封装,而React提供了声明式的库来保持DOM和数据同步.这两点是互相补充的.作 ...

  3. Facebook React 和 Web Components(Polymer)对比优势和劣势

    目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...

  4. 可选的Web Components类库

    首先需要说明的是这不是一篇 Web Components 的科普文章,如果对此了解不多推荐先读<A Guide to Web Components>. 有句古话-“授人以鱼,不如授人以渔” ...

  5. 一个使用 Web Components 的音乐播放器: MelodyPlayer

    先上效果预览: Web Components 首先,什么是 Web Components ? MDN 给出的定义是: Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的 ...

  6. 腾讯发布新版前端组件框架 Omi,全面拥抱 Web Components

    Omi - 合一 下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 AP ...

  7. 从HTML Components的衰落看Web Components的危机 HTML Components的一些特性 JavaScript什么叫端到端组件 自己对Polymer的意见

    http://blog.jobbole.com/77837/ 原文出处: 徐飞(@民工精髓V) 搞前端时间比较长的同学都会知道一个东西,那就是HTC(HTML Components),这个东西名字很现 ...

  8. Fiori Fundamentals和SAP UI5 Web Components

    这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...

  9. [React] Render Basic SVG Components in React

    React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG ...

  10. Web Components 入门实例教程

    转自阮一峰http://www.ruanyifeng.com/blog/2019/08/web_components.html 组件是前端的发展方向,现在流行的 React 和 Vue 都是组件框架. ...

随机推荐

  1. Spark集群的安装及高可用配置

    spark官网学习文档 Spark集群的安装及高可用配置 前期需求:Hadoop和Scala必须已经安装完成 步骤: ①进入spark下载网站中https://spark.apache.org/dow ...

  2. .NEET跨平台绘图基础库--SkiaSharp

    SkiaSharp 是一个跨平台的 2D 图形 API,用于 .NET 平台,基于 Google 的 Skia 图形库.它提供了全面的 2D API,可以在移动.服务器和桌面模型上渲染图像.SkiaS ...

  3. XYD1006CSPS

    T1 密钥 [关键结论,模拟,枚举] Description 给定两个长度为 \(n\) 的 \(01\) 序列 \(a\),\(b\),每个位置都有一个权值 \(c\), 每次操作可以将 \(a\) ...

  4. 多款国产操作系统安装数据库干货文档汇总(含Oracle/MySQL/国产数据库等)

    随着国产化的逐步推进,越来越多的企业选择将数据库安装在国产操作系统上.为帮助大家了解国产操作系统上的数据库成功搭建案例与搭建方式,本文整理了墨天轮数据技术社区上用户分享的实操文档,涵盖银河麒麟.中标麒 ...

  5. 2022年2月国产数据库排行榜: OceanBase“三连增”重夺探花,GaussDB实现本月最大涨幅引期待

    寒辞去冬雪,暖带入春风.2022年2月,虎年开年的国产数据库流行度排行榜已在墨天轮社区发布,本月共有195个数据库参与排名.排名前十位的数据库分数增减幅度较大,整体排名略有波动. 首先,我们来看看排行 ...

  6. js有效括号匹配

    // 定义一个括号映射 const bracketMap = [ { left: '[', right: ']' }, { left: '<', right: '>' }, { left: ...

  7. kotlin更多语言结构——>相等性

    Kotlin 中有两种类型的相等性: - 结构相等(用 equals() 检测); - 引用相等(两个引用指向同一对象).   结构相等 结构相等由 ==(以及其否定形式 !=)操作判断.按照惯例,像 ...

  8. NTPShell

    NTPShell 获取地址:https://github.com/aplyc1a/NTPShell 通过NTP协议来负载C2数据. 编译 gcc ntp.c -lpthread -o ntp 使用 c ...

  9. 使用 Fluent Bit 实现云边统一可观测性

    本文基于 KubeSphere 可观测性与边缘计算负责人霍秉杰在北美 KubeCon 的 Co-located event Open Observability Day 闪电演讲的内容进行整理. 整理 ...

  10. Shadcn UI:现代前端的灵活组件库

    简要介绍 Shadcn UI 与其他 UI 和组件库如 Material UI.Ant Design.Element UI 的设计理念截然不同.这些库一般通过 npm 包提供对组件的访问,而 Shad ...