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. php 生成唯一订单号

    php 生成唯一订单号4种方法   第一种 private function doCreateOrderNumber($time){ $i=1; $dd = date('Ymd',$time); $a ...

  2. 【01】DataFrame的创建和属性

    DataFrame是一个表格型的数据结构,可以看成就是excel中的表格. 官方文档:https://pandas.pydata.org/docs/reference/frame.html DataF ...

  3. iOSwkwebView 打开 TXT/PDF 文件乱码的问题

    最近做资料文件下载下来并查看的时候,用 WKWebView 打开office 类型的文件的时候是没问题的,但是打开测试人员上传的一个 TXT/PDF 文件就出现了乱码问题,经过查看,应该是文件的编码问 ...

  4. 解决 WebSocketClient.js?5586:16 WebSocket connection to 'ws://192.168.13.25:8080/ws' failed:

    控制台报错: vue.config.js Vue的配置文件 const { defineConfig } = require('@vue/cli-service') module.exports = ...

  5. prometheus+grafana配置流程

    prometheus+grafana配置流程 首先,安装对应的exporter 查看prometheus支持的所有exporters https://prometheus.io/docs/instru ...

  6. 云原生周刊:目前的 Kubernetes 开源监控方案有没有缺陷?

    视频推荐 目前的 Kubernetes 开源监控方案有没有缺陷? YouTube 频道 OpenObservability Talks 最新一期视频邀请了 VictoriaMetrics 项目的创始人 ...

  7. python之图片与视频互转

    图片转视频 def image_to_video(image_dir, video_dir, fps): im_list = [i for i in os.listdir(image_dir) if ...

  8. 掀起云端革命!ToDesk云电脑与传统PC电脑的差异分析

    在科技日新月异的今天,传统PC电脑的市场地位正悄然发生变化.随着云计算技术的不断成熟与普及,云电脑逐渐走进大众视野,不同于传统PC电脑的高昂的成本和易退化的硬件性能,云电脑正以其轻成本高性能的优势吸引 ...

  9. win10子系统docker搭建gitlab Server

    心血来潮想搞一套cicd玩玩,结果开始就掉坑里了. 遇到问题 不会写文,所以语言组织比较差,将就看着吧!就当记录一下这个坑以后没准还能用的上. 参照https://blog.csdn.net/Mono ...

  10. 使用NTP,该如何同步时间?一文详解!

    ​ 一.NTP通信概述 很多场景中,由于业务需要,模块需要保持正确的系统时钟,才能正常工作.但是模块上电后的初试时间戳是946713600(即2000/01/01,16:00:00),所以同步时钟成为 ...