Web Components

如何构建一个简单的摄像头组件

这篇文章主要跟着@David East的《HOW TO BUILD A SIMPLE CAMERA COMPONENT》 学习。学习如何使用MediaDevices API获取摄像头的访问权限,然后将相关的流通过video元素来播放。并且将视频流通过canvas元素转换为blobbase64格式的图片。并且依赖于自定义元素将这些功能封装成一个简单的摄像机组件。感兴趣的同学,请继续往下阅读。

如何创建自定义的HTML元素

HTML规范有一个令人感到兴奋的功能可以自己自定义HTML元素。这允许你可以根据自己的JavaScript API创建自己的HTML元素。这在整个应用程序中构建接口和组件重用可能是非常有用的。在这篇文章中你可以学习到如何自定义自己的HTML元素和定义他们需要的JavaScript API。我们开始吧。

【转载】自定义元素简介

HTML 是 Web 平台最重要的元素。它提供了各种构造站点和应用程序的底层特性。但是,一旦你开始用原生 HTML 标签实现一个复杂的组件,很容易就会变成 div 标签的堆砌。假如 Web 平台允许你创建自己的原始组件会怎样?假如你可以随意选择标签名会怎样?加入你可以扩展已有 HTML 标签的特性会怎样?自定义元素(Custom Elements)就允许你做这些事情。

【转载】HTML的新标签template

在 Web 开发领域中,模板这个概念并不新鲜。实际上,服务端的模板语言/引擎,比如 Django (Python),ERB/Haml (Ruby),和 Smarty (PHP) 早已应用多时。近些年来,众多 MVC 框架蓬勃涌现。这些框架各有特色,但绝大多数在展现层(即:视图层)都使用同样的渲染机制:模板。

使用Web Components API制作Favorite Star按钮

最近我们开始在Onsen UI上使用Web Components API。API为开发人员提供了创建新的或扩展HTML标签元素的能力。我们重新使用Web Components API写一些简单的Onsen UI组件,但我们不会停止脚步,我们会继续努力。在这篇教程中我们将看看如何使用Web Components API实现一个简单的组件。我们将要学习的Web组件称为"favorite button / favorite star"。

Web Components Demo: Templates 和 Shadow DOM

最近将大部分时间花在了Web Components上面,不过这些花费的时间是有价值的。我整理了一个小组件,能更好的帮助大家更好的理解一个整体的Web Components。Web Components是一种新兴技术,用来规范组件的定制,这些都要非常感谢W3C组织。Web Components的目的就是允许开发人员使用HTML、CSS和JavaScript来自定义元素。这些元素可以被认为是一些小部件(widgets)。

【转载】Web Components 初探

众所周知,Web 页面是由 HTML+CSS+JavaScript 三板斧配合而成的,这体现了一种结构、表现、交互分离的思想。但是随着 Web 应用不断丰富,过度分离的设计也会带来可重用性上的问题。于是各家显神通,各种 UI 组件工具库层出不穷,煞有八仙过海之势。于是 W3C 坐不住了,大手一挥,说道:不如让我们统一一个 Web Components 的标准吧怎么样。

【转载】Web Components 是什么?它为什么对我们这么重要?

这篇文章简单介绍 Web Component 标准,介绍哪些浏览器已经开始支持 Web Components,讨论 Web Components 能解决什么问题,以及它对 Web 开发的重要性。你可以了解到如何利用 Vanilla Javascript 编写一个简单的 Web Component,我还会针对它的潜在优势分享我自己的一些拙见。

返回顶部