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 SQL?

    一.Spark SQL简介 Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用. 为什么要学习Spark SQL? ...

  2. flops, params = profile(model, inputs=(x,))计算

    计算量:FLOPs,FLOP时指浮点运算次数,s是指秒,即每秒浮点运算次数的意思,考量一个网络模型的计算量的标准.参数量:Params,是指网络模型中需要训练的参数总数. flops(G) = flo ...

  3. netCore 封装一个检验邮箱的类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. js中判断数据类型的方法有哪些

    判断数据类型可以使用 typeof 但是typeof 判断数组和函数时返回的都是Object 不能具体判断,这时使用 instanceof 可以判断对象是否是另一个函数创造的 : 用法: typeof ...

  5. day15-三大基本结构

    顺序结构 Java的基本结构就是顺序结构,除非特别指明,否则就按照顺序一句一句执行. 顺序结构是最简单的算法结构. 语句和语句之间,框与框之间是按从上到下的顺序进行的,它是由若干个依次执行的处理步骤组 ...

  6. 云原生周刊:Terraform 1.8 发布 | 2024.5.6

    开源项目推荐 xlskubectl 用于控制 Kubernetes 集群的电子表格.xlskubectl 将 Google Spreadsheet 与 Kubernetes 集成.你可以通过用于跟踪费 ...

  7. 基于 KubeSphere 的分级管理实践

    作者:许伟,航天网信研发工程师 K8s 是容器编排和分布式应用部署领域的领导者,在 K8s 环境中,我们只需要关心应用的业务逻辑,减轻了我们服务器网络以及存储等方面的管理负担.对于一个用户而言,K8s ...

  8. SpringBoot 2.3 升级到 SpringBoot 2.7 爬坑-- SpringDoc & Swagger

    目录 POM yml 配置自定义的 OpenAPI 规范 拦截器去除 swagger 的接口验证 模型 Controller 配置 常用注解 注意:Swagger支持SpringBoot2.0但不支持 ...

  9. AI五子棋_07 落子点四周棋形获取

    AI五子棋 第七步 恭喜你到达第七步! 到这一步,你对战场环境就有了充分的了解.下面我们准备打造机器大脑了.你可能已经有你自己的想法了,不过别着急,先跟着我的思路做.我会提示你解决一些基本的问题. 棋 ...

  10. 学习JavaScript第二天

    文章目录 1.运算符(操作符) 1.1运算符的分类 1.2算数运算符 1.3递增和递减运算符 1.4比较运算符 1.5逻辑运算符 2.选择结构 2.1if语句 2.1.1语法 2.1.2案例1:判断闰 ...