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. Hadoop完全分布式搭建,基于乌班图系统

    因为现在集成的工具很多,建议在接触这一块的过程中还是自己找几个主机,亲手搭一遍集群,更好的熟悉底层!本文只是搭建的过程没有理论!手搭集群时先将各节点网络.ssh配置好!然后在一台机子上操作配置文件,直 ...

  2. PasteForm最佳CRUD实践,实际案例PasteTemplate详解之3000问(四)

    无论100个表还是30个表,在使用PasteForm模式的时候,管理端的页面是一样的,大概4个页面, 利用不同操作模式下的不同dto数据模型,通过后端修改对应的dto可以做到控制前端的UI,在没有特别 ...

  3. VM Ware 安装mac OS xxx 系统

    1. unlock 文件破解Vm Ware 默认不能安装苹果系统 :https://drive.google.com/file/d/1_AUeYh5JYltqjnuztQh-5UTomAIVBcLZ/ ...

  4. MIL-STD-1553B总线通信模块(1553B板卡)

    MIL-STD-1553B总线通信模块(1553B板卡)产品具有以下特点: 1.产品覆盖多种接口CPCI/PXI/PCI/PC104/PC104+/USB等,满足用户不同平台的使用要求: 2.自主知识 ...

  5. k8s-NFS系统配置

    k8s-NFS系统配置 NFS(network filesystem),nfs文件系统在k8s中主要用于持久化存储,可以被多个pod访问和共享数据. 特点 数据持久性 nfs为k8s的pod提供了一种 ...

  6. KubeSphere 3.2.0 发布:带来面向 AI 场景的 GPU 调度与更灵活的网关

    现如今最热门的服务器端技术是什么?答案大概就是云原生!KubeSphere 作为一个以 Kubernetes 为内核的云原生分布式操作系统,也是这如火如荼的云原生热潮中的一份子.KubeSphere ...

  7. 云原生爱好者周刊:在 PaaS 平台上托管 WebAssembly 应用

    云原生一周动态要闻: Knative v1.1 发布 Nocalhost v0.6.12 发布 CircleCI 的企业功能现在免费了 SolarWinds 修复了一个 Serv-U 漏洞 Nvidi ...

  8. flink jobmanager 终止任务失败问题

    flink jobmanager 终止任务失败问题 :root { --default-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, ...

  9. Windows 非服务器版本永久关闭命令行“快速编辑模式”

    使用管理员权限运行cmd.exe 运行如下命令: reg add HKEY_CURRENT_USER\Console /v QuickEdit /t REG_DWORD /d 00000000 /f

  10. 6、oracle网络(监听)

    oracle包含 1.软件 2.数据库 3.实例 4.监听(listener) 监听的特点 可以独立启动,就是说,数据库没有启动,监听可以启动:数据库启动,监听也可以不启动:数据库启动,监听也启动 监 ...