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. 【赵渝强老师】使用Weblogic的WLST工具

    一.什么是Weblogic WLST? WebLogic 脚本工具 (WebLogic Scripting Tool , WLST) 是一种命令行脚本界面,系统管理员和操作员用它来监视和管理 WebL ...

  2. android IO Prefetch源码分析

    I/O Prefetcher是高通本身提供的一套优化方案,可以用在Android手机App冷启动的时候.本文基于android Q 主要分libqti-iopd.vendor.qti.hardware ...

  3. pip下载太慢,换源

    1.安装pqi pip install pqi 2.改变pip源 比如换成清华源: pqi use tuna 3.显示当前源

  4. vue2 + webpack 分析报告 report == webpack-bundle-analyzer

    packjson.js 配置 "build-report":"vue-cli-service build --report", 执行 : npm run bui ...

  5. 1. 说一下 vue 的父子传参 ?

    主要实现的方式: 1. 第一种方法 ,在子组件标签使用自定义属性="参数"和自定义事件,在子组件内使用 props 接受自定义属性 :如果子组件要修改参数,不能直接修改,因为 vu ...

  6. insufficient permission for adding an object to repository database .git/objects

    1.出错截图: 有时候使用软件项目管理系统github时候,会出现一些问题截图如下: 2.出错原因 从出错的地方就知道是因为权限不足导致,回想一下,在链接远程服务器时候,不小心切换为管理员权限进行了g ...

  7. OOP七大原则

    OOP七大原则 开闭原则 抽象约束.封装变化.对扩展开放,对修改关闭. 通过"抽象约束.封装变化"来实现开闭原则,即通过接口或者抽象类为软件实体定义一个相对稳定的抽象层,而将相同的 ...

  8. Linux利用crontab命令定时任务

    系统配置文件/etc 系统周期性所要执行的工作,比如写缓存数据到硬盘.日志清理等.在/etc目录下有一个crontab文件,这个就是系统任务调度的配置文件. /etc/crontab文件大概包括下面几 ...

  9. React h5架构

    目录 目录 初始化项目架构 React h5架构 工具 技术栈 搭建流程 一.Vite构建项目 二.添加 git 三.运行项目 四.配置 Eslint 校验代码 五.配置 Prettier 格式化代码 ...

  10. vue3 js 学习笔记

    Vue3-js 学习笔记 目录 Vue3-js 学习笔记 目录 前言 reactive 数据绑定 事件绑定 生命函数周期 计算属性-computed props emit-自定义事件 ref-获取元素 ...