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. foobar2000 v2.1.4 汉化版(更新日期:2024.04.24)

    foobar2000 v2.1.4 汉化版 -----------------------[软件截图]---------------------- -----------------------[软件 ...

  2. 进程切换分析(2):TLB处理

    一.前言 进程切换是一个复杂的过程,本文不准备详细描述整个进程切换的方方面面,而是关注进程切换中一个小小的知识点:TLB的处理.为了能够讲清楚这个问题,我们在第二章描述在单CPU场景下一些和TLB相关 ...

  3. mmap映射类型

    文件映射和匿名映射都是操作系统中对于内存映射的两种类型,主要应用于进程间的通信或者大量数据的处理. 文件映射,也就是内存映射文件,是把一个文件或者文件的一部分映射到进程的地址空间,它允许对文件进行随机 ...

  4. day18-方法

    何谓方法? System.out.println() System->类 out->对象 println()->方法 Java方法是语句的集合,它们在一起执行 一个功能. 方法是解决 ...

  5. K8s GPU 资源管理探索:在 KubeSphere 上部署 AI 大模型 Ollama

    作者:运维有术星主 随着人工智能.机器学习.AI 大模型技术的迅猛发展,我们对计算资源的需求也在不断攀升.特别是对于需要处理大规模数据和复杂算法的 AI 大模型,GPU 资源的使用变得至关重要.对于运 ...

  6. 微积分 Calculus

    前言 如果你的工作中没有用到微积分,毫无疑问,你的工作是简单而枯燥的. 0 limit Say there is a function \(f(x) = x\). \(x \rightarrow a\ ...

  7. AI年代,谁还用难用的Keil?快快换CLion!!! 破解+环境替换 [下]

    keil环境的替代 1.首先 我这里大体框架引入大佬稚晖君的博客: https://www.bilibili.com/read/cv6308000/ 如果有需要配置标准库的可以参考这里: https: ...

  8. SaaS平台的组织数据模型设计

    大家好,我是汤师爷~ 想要深入理解零售企业的组织架构并不容易.大多数人并没有实际经营过零售企业,更不曾参与设计其组织架构. 在调研商家的过程中,我们通常只能了解他们组织架构的现状,却难以直接与企业高层 ...

  9. CF1487-B Cat Cycle

    一个规律题目要多做多积累 , 脑子不太灵活 CF1487 Cat Cycle 题目大意: 两只猫A,B, A猫从n -> n-1 -> n-2 ... -> 1 -> 2 .. ...

  10. 【python】利用tqdm实现git下载时的进度条效果

    注意1:这里是在python3环境下使用的git,安装要使用 pip install Gitpython 来安装在python环境下的git 注意2:这个方法可适用于 windows 环境和 Linu ...