10 行代码即可实现响应式 UI

更新日期: 2024-02-21阅读: 293标签: 响应式

在过去几年中,响应式已成为事实上的标准。所有主要框架都实现了一些响应式模型。其中最大的一个甚至被称为React。在本文中,我们将了解如何仅使用几行JavaScript编写简单的响应式UI 。


代理

当谈论响应式 UI 时,我们通常指的是当数据发生变化时自动更新的界面。这种方法变得流行,因为它使开发更容易理解和维护。真相只有一个来源,我们只关心更新它,而不考虑实际的 UI 更新。

我们可以使用一个本机浏览器 API 来实现该响应式。这是代理对象。

Proxy 对象使您能够为另一个对象创建代理,该代理可以拦截并重新定义该对象的基本操作。

这意味着我们可以在设置或获取代理对象的属性时注入代码。这是一个简单的例子:

const target = {
  name: "Foo"
};
const handler = {
  get(target, prop, receiver) {
    return "Proxied: " + target[prop];
  },
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Proxied: Foo

该proxy常数几乎与我们原来的常数相同target。它也包含该name属性,但Foo它的值不是 ,而是Proxied: Foo。

连同get,我们还有一个set方法。因此,我们可以执行以下操作:

const target = {
  name: "Foo"
};
const handler = {
  get(target, prop, receiver) {
    return "Proxied: " + target[prop];
  },
  set(obj, prop, value) {
    obj[prop] = 'Bar';
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Proxied: Foo
proxy.name = 'A new name value';
console.log(proxy.name); // Proxied: Bar

请注意,即使我们在最后获得Proxied:Bar时将name的值设置为“新名称值”。这是因为setter获取控制权,并将Bar指定为一个值。稍后,我们返回前缀为Proxied:Bar,因为我们有一个自定义getter。

现在,让我们使用 setter 来制作响应式 UI。


10行代码的响应式

我们大多数人现在使用的反应式模型也可以定义为单向数据流。


这是一个简单的想法,我们有状态,而我们的 UI 是它的函数。然后,每次用户交互都会导致状态更改,并且渲染会自动发生。如果我们要改变界面,我们不会去DOM而是改变状态。这就是我们想要在这里实现的响应式。使用Proxy API,我们只需十行代码即可完成:

function createReactivity(initialState, onUpdate) {
  const proxy = new Proxy(initialState, {
    set(obj, prop, value) {
      obj[prop] = value
      onUpdate.call(proxy);
    }
  });
  onUpdate.call(proxy);
  return proxy;
}

它createReactivity接受我们的初始状态对象和一个回调函数,每当数据更新时就会触发该回调函数。

实际的例子是这样的:

<div id="container"></div>
<input autofocus />
<script>
  function createReactivity(initialState, onUpdate) {
    const proxy = new Proxy(initialState, {
      set(obj, prop, value) {
        obj[prop] = value
        onUpdate.call(proxy);
      }
    });
    onUpdate.call(proxy);
    return proxy;
  }
  const state = createReactivity({ name: 'Krasimir' }, function () {
    document.querySelector('#container').innerHTML = `
      <h1>Hello, ${this.name}</h1>
    `;
  });
  const input = document.querySelector('input');
  input.addEventListener('input', e => state.name = e.target.value);
  input.value = state.name;
</script>

每当我们更改输入字段的值时,我们都会更新name代理对象的属性。这会导致调用 setter 并触发回调onUpdate,从而将新的 HTML 应用于元素#container。

链接: https://www.fly63.com/article/detial/12655

移动端web app要使用rem实现自适应布局:font-size的响应式

rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。

使用现代CSS的响应式版面

通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小.为字体大小使用百分比.给文本内容和媒体查询使用em,针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小,使用媒体查询或者media()函数基于视口来改变比例和基础字号

web响应式图片的5种实现

在目前的前端开发中,我们经常需要进行响应式的网站开发。本文着重介绍一下弹性图片,也就是响应式图片的解决方案:js或服务端、srcset 、sizes 、picture标签、svg图片

HTML5+CSS3响应式垂直时间轴,高端,大气

HTML5+CSS3响应式垂直时间轴,使用了HTML5标签<section>,时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中,多个DIV形成一个序列,并把这些DIV放在<section>中。

实现响应式_CSS变量

CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable)。CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示变量名称

vue响应式原理及依赖收集

Vue通过设定对象属性的setter/getter方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

vue响应式系统--observe、watcher、dep

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身

Responsive Web Design 响应式网页设计

常见的布局方案:固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸

响应式布局的实现

响应式布局,即 Responsive design,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式布局的关键不仅仅在于布局

深入响应式原理

说到响应式原理其实就是双向绑定的实现,说到 双向绑定 其实有两个操作,数据变化修改dom,input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom;2. 通过表单修改value -> 修改数据

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!