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. 剪枝的应用,bfs判重 蚱蜢跳——蓝桥p642

    **问题描述 总共有九个盘子,八只蚱蜢,且每个盘子中只能容下一只蚱蜢,蚱蜢的编号为1~8,如果蚱蜢所在的盘子紧邻着空盘子,那么该蚱蜢可以从自己的盘子跳到空盘子中,也可以隔一个盘子跳到空盘子中,问一开始 ...

  2. 微信小程序上拉加载

    下面是一个示例,在个人使用的过程中按自己需求进行更改 创建一个DataController控制器 php artisan make:controller DataController 创建一个Data ...

  3. 使用 Ant-Design-Vue 制作一个带图片上传功能的表单对话框

    功能需求 使用 Antdv 的 Modal 组件内嵌一个 a-form 表单,具有添加数据和图片的功能. 页面结构设计 <template> <!--Modal--> < ...

  4. DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (header, parser) { header = normalizeHeader(header);

    场景:token过期,然后更新了token 重新发起请求获取数据 : 代码:使用上一次的错误请求配置报错     return request(error.config) : 解决 :  return ...

  5. 013 Python 变量的内存管理(学点底层东西显得你异于常人)

    #!/usr/bin/env python # -*- coding:utf-8 -*- # Datatime:2022/7/18 21:13 # Filename:011 Python约定俗称的常量 ...

  6. Exchange2016中搜索和删除邮件

    Exchange2016中搜索和删除邮件 在以前版本的 Exchange 中,可以运行 Search-Mailbox -DeleteContent  命令搜索并删除电子邮件.你仍可以在 Exchang ...

  7. T3 出行云原生容器化平台实践

    公司简介 T3 出行是南京领行科技股份有限公司打造的智慧出行生态平台,由中国第一汽车集团有限公司.东风汽车集团有限公司.重庆长安汽车股份有限公司发起,联合腾讯.阿里巴巴等互联网企业共同投资打造.公司以 ...

  8. 快速部署单服务器oracle12c

    docker pull docker.io/truevoly/oracle-12c mkdir -p /usr/local/oracle/data_temp chmod 777 /usr/local/ ...

  9. 《这是全网最硬核redis总结,谁赞成,谁反对?》六万字大合集

    <这是全网最硬核redis总结,谁赞成,谁反对?>六万字大合集 我啥都不想说了,本文章来自 "本来可以靠脸吃饭的,非得靠技术的一位小姐姐" 名字叫:"兔兔Ra ...

  10. Windows电脑无法给airpods充电的解决办法

    耳机盒与电脑都有TYPEC接口,由于驱动问题,接在一起是充不了电的,需要更改设置解决: 打开设置 -> 蓝牙与其他设备 -> 显示更多设备 往下翻,找到"更多设备与打印机设置&q ...