8 種現(xiàn)代 JavaScript 響應(yīng)式模式

應(yīng)性本質(zhì)上是關(guān)于系統(tǒng)如何對(duì)數(shù)據(jù)變化作出反應(yīng)，有不同類型的響應(yīng)性。然而，在這篇文章中，我們關(guān)注的是響應(yīng)性，即響應(yīng)數(shù)據(jù)變化而采取行動(dòng)。

作為一名前端開發(fā)者，Pavel Pogosov 每天都要面對(duì)這個(gè)問題。因?yàn)闉g覽器本身是一個(gè)完全異步的環(huán)境?，F(xiàn)代 Web 界面必須快速響應(yīng)用戶的操作，這包括更新 UI、發(fā)送網(wǎng)絡(luò)請(qǐng)求、管理導(dǎo)航和執(zhí)行各種其他任務(wù)。

盡管人們常常將響應(yīng)性與框架聯(lián)系在一起，Pavel Pogosov 認(rèn)為通過純 JavaScript 實(shí)現(xiàn)響應(yīng)性可以學(xué)到很多。所以，我們將自己編寫一些模式代碼，并研究一些基于響應(yīng)性的原生瀏覽器 API。

PubSub（發(fā)布-訂閱模式）
自定義事件作為瀏覽器版本的 PubSub
自定義事件目標(biāo)
觀察者模式
使用 Proxy 的響應(yīng)式屬性
單個(gè)對(duì)象屬性和響應(yīng)性
使用 MutationObserver 的響應(yīng)式 HTML 屬性
使用 IntersectionObserver 的響應(yīng)式滾動(dòng)

1. PubSub（發(fā)布-訂閱模式）

class PubSub {
  constructor() {
    this.subscribers = {};
  }

  subscribe(event, callback) {
    if (!this.subscribers[event]) {
      this.subscribers[event] = [];
    }

    this.subscribers[event].push(callback);
  }

  // 向特定事件的所有訂閱者發(fā)布消息
  publish(event, data) {
    if (this.subscribers[event]) {
      this.subscribers[event].forEach((callback) => {
        callback(data);
      });
    }
  }
}

const pubsub = new PubSub();

pubsub.subscribe('news', (message) => {
  console.log(`訂閱者1收到了新聞：${message}`);
});

pubsub.subscribe('news', (message) => {
  console.log(`訂閱者2收到了新聞：${message}`);
});

// 向 'news' 事件發(fā)布消息
pubsub.publish('news', '最新頭條新聞：...');

// 控制臺(tái)日志輸出：
// 訂閱者1收到了新聞：最新頭條新聞：...
// 訂閱者2收到了新聞：最新頭條新聞：...

一個(gè)常見的使用示例是 Redux。這款流行的狀態(tài)管理庫基于這種模式（或更具體地說，是 Flux 架構(gòu)）。在 Redux 的上下文中，工作機(jī)制相當(dāng)簡(jiǎn)單：

發(fā)布者：store 充當(dāng)發(fā)布者。當(dāng)一個(gè) action 被派發(fā)時(shí)，store 會(huì)通知所有訂閱的組件狀態(tài)的變化。訂閱者：應(yīng)用程序中的 UI 組件是訂閱者。它們訂閱 Redux store 并在狀態(tài)變化時(shí)接收更新。

自定義事件作為瀏覽器版本的 PubSub

瀏覽器通過 CustomEvent 類和 dispatchEvent 方法提供了一個(gè)用于觸發(fā)和訂閱自定義事件的 API。后者不僅能讓我們觸發(fā)事件，還能附加任何想要的數(shù)據(jù)。

const customEvent = new CustomEvent('customEvent', {
  detail: '自定義事件數(shù)據(jù)', // 將所需數(shù)據(jù)附加到事件
});

const element = document.getElementById('.element-to-trigger-events');

element.addEventListener('customEvent', (event) => {
  console.log(`訂閱者1收到了自定義事件：${event.detail}`);
});

element.addEventListener('customEvent', (event) => {
  console.log(`訂閱者2收到了自定義事件：${event.detail}`);
});

// 觸發(fā)自定義事件
element.dispatchEvent(customEvent);

// 控制臺(tái)日志輸出：
// 訂閱者1收到了自定義事件：自定義事件數(shù)據(jù)
// 訂閱者2收到了自定義事件：自定義事件數(shù)據(jù)

自定義事件目標(biāo)

如果你不想在全局 window 對(duì)象上分派事件，可以創(chuàng)建你自己的事件目標(biāo)。

通過擴(kuò)展原生 EventTarget 類，你可以向其新實(shí)例分派事件。這確保你的事件僅在新類本身上觸發(fā)，避免了全局傳播。此外，你可以直接將處理程序附加到這個(gè)特定實(shí)例上。

class CustomEventTarget extends EventTarget {
  constructor() {
    super();
  }

  // 觸發(fā)自定義事件的自定義方法
  triggerCustomEvent(eventName, eventData) {
    const event = new CustomEvent(eventName, { detail: eventData });
    this.dispatchEvent(event);
  }
}

const customTarget = new CustomEventTarget();

// 向自定義事件目標(biāo)添加事件監(jiān)聽器
customTarget.addEventListener('customEvent', (event) => {
  console.log(`自定義事件收到了數(shù)據(jù)：${event.detail}`);
});

// 觸發(fā)自定義事件
customTarget.triggerCustomEvent('customEvent', '你好，自定義事件！');

// 控制臺(tái)日志輸出：
// 自定義事件收到了數(shù)據(jù)：你好，自定義事件！

觀察者模式

觀察者模式與 PubSub 非常相似。你訂閱 Subject，然后它通知其訂閱者（觀察者）關(guān)于變化，使他們能夠做出相應(yīng)的反應(yīng)。這種模式在構(gòu)建解耦和靈活的架構(gòu)中發(fā)揮了重要作用。

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  // 從列表中移除觀察者
  removeObserver(observer) {
    const index = this.observers.indexOf(observer);

    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

  // 通知所有觀察者關(guān)于變化
  notify() {
    this.observers.forEach((observer) => {
      observer.update();
    });
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  // 通知時(shí)調(diào)用的更新方法
  update() {
    console.log(`${this.name} 收到了更新。`);
  }
}

const subject = new Subject();
const observer1 = new Observer('觀察者1');
const observer2 = new Observer('觀察者2');

// 將觀察者添加到主體
subject.addObserver(observer1);
subject.addObserver(observer2);

// 通知觀察者關(guān)于變化
subject.notify();

// 控制臺(tái)日志輸出：
// 觀察者1 收到了更新。
// 觀察者2 收到了更新。

使用 Proxy 的響應(yīng)式屬性

如果你想對(duì)對(duì)象的變化做出反應(yīng)，Proxy 是一個(gè)好方法。它讓我們?cè)谠O(shè)置或獲取對(duì)象字段的值時(shí)實(shí)現(xiàn)響應(yīng)性。

const person = {
  name: 'Pavel',
  age: 22,
};

const reactivePerson = new Proxy(person, {
  // 攔截設(shè)置操作
  set(target, key, value) {
    console.log(`將 ${key} 設(shè)置為 ${value}`);
    target[key] = value;

    // 表示設(shè)置值是否成功
    return true;
  },
  // 攔截獲取操作
  get(target, key) {
    console.log(`獲取 ${key}`);

    return target[key];
  },
});

reactivePerson.name = 'Sergei'; // 將 name 設(shè)置為 Sergei
console.log(reactivePerson.name); // 獲取 name: Sergei

reactivePerson.age = 23; // 將 age 設(shè)置為 23
console.log(reactivePerson.age); // 獲取 age: 23

單個(gè)對(duì)象屬性和響應(yīng)性

如果你不需要跟蹤對(duì)象中的所有字段，可以使用 Object.defineProperty 或一組 Object.defineProperties 來選擇特定的一個(gè)或幾個(gè)。

const person = {
  _originalName: 'Pavel', // 私有屬性
}

Object.defineProperty(person, 'name', {
  get() {
    console.log('獲取屬性 name')
    return this._originalName
  },
  set(value) {
    console.log(`將屬性 name 設(shè)置為值 ${value}`)
    this._originalName = value
  },
})

console.log(person.name) // '獲取屬性 name' 和 'Pavel'
person.name = 'Sergei' // 將屬性 name 設(shè)置為值 Sergei

使用 MutationObserver 的響應(yīng)式 HTML 屬性

在 DOM 中實(shí)現(xiàn)響應(yīng)性的一種方法是使用 MutationObserver。其 API 允許我們觀察目標(biāo)元素及其子元素的屬性變化和文本內(nèi)容變化。

function handleMutations(mutationsList, observer) {
  mutationsList.forEach((mutation) => {
    // 觀察到的元素的一個(gè)屬性發(fā)生了變化
    if (mutation.type === 'attributes') {
      console.log(`屬性 '${mutation.attributeName}' 更改為 '${mutation.target.getAttribute(mutation.attributeName)}'`);
    }
  });
}

const observer = new MutationObserver(handleMutations);
const targetElement = document.querySelector('.element-to-observe');

// 開始觀察目標(biāo)元素
observer.observe(targetElement, { attributes: true });

使用 IntersectionObserver 的響應(yīng)式滾動(dòng)

IntersectionObserver API 允許對(duì)目標(biāo)元素與另一個(gè)元素或視口區(qū)域的交集做出反應(yīng)。

function handleIntersection(entries, observer) {
  entries.forEach((entry) => {
    // 目標(biāo)元素在視口中
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    } else {
      entry.target.classList.remove('visible');
    }
  });
}

const observer = new IntersectionObserver(handleIntersection);
const targetElement = document.querySelector('.element-to-observe');

// 開始觀察目標(biāo)元素
observer.observe(targetElement);

感謝閱讀！

這個(gè)適合初學(xué)者的指南中，你將學(xué)習(xí)如何創(chuàng)建一個(gè)響應(yīng)式電子郵件模板。你將跟隨逐步說明以及代碼片段設(shè)計(jì)一個(gè)在任何設(shè)備上都看起來很棒的電子郵件模板。

這個(gè)項(xiàng)目非常適合渴望掌握電子郵件設(shè)計(jì)基礎(chǔ)的新手！

（本文視頻講解：java567.com）

何讓你的網(wǎng)站在其出現(xiàn)的任何設(shè)備和屏幕尺寸上能夠完美的呈現(xiàn)？響應(yīng)式設(shè)計(jì)完美的解決了這一難題，作為現(xiàn)在的網(wǎng)頁設(shè)計(jì)師都應(yīng)該了解響應(yīng)式網(wǎng)頁設(shè)計(jì)的原則。而對(duì)于剛步入網(wǎng)頁設(shè)計(jì)的新手設(shè)計(jì)師，如果你還不了解什么是響應(yīng)式設(shè)計(jì)？如何制作響應(yīng)式頁面？這篇文章為大家提供了12個(gè)基礎(chǔ)的響應(yīng)式網(wǎng)頁設(shè)計(jì)的教程，結(jié)尾還附上了個(gè)人最喜歡的3款響應(yīng)式網(wǎng)頁設(shè)計(jì)的工具，輕松帶你入門。

1. What is Responsive Web Design?

https://smallbiztrends.com/2013/05/what-is-responsive-web-design.html

隨著智能手機(jī)，平板電腦以及其他移動(dòng)設(shè)備的增長，越來越多人使用小屏幕來查看和閱讀網(wǎng)頁信息。響應(yīng)式網(wǎng)頁設(shè)計(jì)完美的滿足了這一點(diǎn)，它使得用戶能夠在各種設(shè)備下查看網(wǎng)頁，并且保持良好的網(wǎng)頁可讀性。并且，在2018年4月Google宣布了移動(dòng)優(yōu)先索引的原則，所以響應(yīng)式網(wǎng)頁設(shè)計(jì)已經(jīng)是一個(gè)必須。這篇文章是一篇新手文章，對(duì)于還不懂什么是響應(yīng)式設(shè)計(jì)的設(shè)計(jì)師一個(gè)很好的開篇解釋。

2. Responsive Web Design Tutorial and Explanation

https://www.youtube.com/watch?v=BIz02qY5BRA

如果你對(duì)響應(yīng)式網(wǎng)頁設(shè)計(jì)的概念完全陌生，又不想看冗長的文章，那么這個(gè)視頻絕對(duì)是你的不二之選。本視頻解釋了什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)，結(jié)合具體的例子介紹讓你更加了解，當(dāng)然最重要的是視頻中詳細(xì)的介紹如何通過寫代碼去設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)頁布局。

3. Responsive Web Design with HTML&CSS

https://learn.shayhowe.com/advanced-html-css/responsive-web-design/

本教程解釋了響應(yīng)式設(shè)計(jì)和自適應(yīng)設(shè)計(jì)的區(qū)別，并且詳細(xì)介紹如何使用HTML和CSS寫響應(yīng)式網(wǎng)頁，以及介紹媒體查詢和mobile-first的使用。

4. Responsive Data Table Roundup

https://css-tricks.com/responsive-data-table-roundup/

數(shù)據(jù)表是HTML的重要組成部分，雖然它們過去經(jīng)常被用于布局，但現(xiàn)在它們主要是用于標(biāo)記數(shù)據(jù)。本文具體介紹了如何制作響應(yīng)式數(shù)據(jù)表，文章包含多個(gè)demo可供參考。

5. Bootstrap Responsive Web Design Tutorial For Beginners

https://www.udemy.com/bootstrap-responsive-web-design-tutorial-for-beginners/

Bootstrap是最受歡迎的HTML，CSS和JS框架之一，用于在Web上開發(fā)響應(yīng)式，移動(dòng)友好的項(xiàng)目。本教程幫組你如何使用bootstrap框架來開發(fā)響應(yīng)式網(wǎng)頁，你可以從中學(xué)到：

使用Twitter bootstrap制作響應(yīng)式網(wǎng)頁

了解bootstrap組件的使用

學(xué)習(xí)要求：

對(duì)Html有基本理解

希望擴(kuò)展知識(shí)的Web Masters和Web開發(fā)人員

價(jià)格：.99

6. How to Make Responsive WordPress Websites (With Themes)

https://business.tutsplus.com/articles/how-to-make-responsive-websites--cms-29942

在構(gòu)建網(wǎng)站時(shí)，使用響應(yīng)式設(shè)計(jì)不再只是一種選擇，它是必須。無論你的用戶使用哪種設(shè)備進(jìn)行查看和瀏覽網(wǎng)頁內(nèi)容，響應(yīng)式網(wǎng)站設(shè)計(jì)都能讓你的網(wǎng)站看起來很棒。對(duì)于許多企業(yè)來說，WordPress是個(gè)很好的選擇，鑒于它的靈活性和易于使用。從本教程中，你可以學(xué)習(xí)到如何使用響應(yīng)式WordPress模板來創(chuàng)建你的網(wǎng)站以及如何選擇響應(yīng)式WordPress主題。

7. Responsive Web Design - Introduction

https://www.w3schools.com/css/css_rwd_intro.asp

W3schools是個(gè)代碼學(xué)習(xí)的網(wǎng)站，你可以在這里找到你想要學(xué)習(xí)的一切代碼知識(shí)。當(dāng)然這里提供的響應(yīng)式網(wǎng)頁設(shè)計(jì)的教程是非常全面且具體的。你可以學(xué)習(xí)到：

RWD視口

RWD網(wǎng)格視圖

RWD媒體查詢

RWD圖像

RWD視頻

RWD框架

RWD模板

8. 10 Best Free Responsive HTML5 Web Templates in 2018

https://www.mockplus.com/blog/post/free-responsive-html5-web-design-templates

本文為制作HTML響應(yīng)式設(shè)計(jì)的設(shè)計(jì)師提供了最佳的10個(gè)模板，讓你能夠輕松應(yīng)用。

9. The Ultimate Responsive Web Design Tutorials for Beginners

https://www.youtube.com/watch?v=YBK_1WrM294

Chris Converse在本教程中分享自己的專業(yè)技術(shù)，幫助初學(xué)者如何建立一個(gè)響應(yīng)式網(wǎng)站。Chris還展示了如何使用CSS加載圖像，重新定位導(dǎo)航欄以便在移動(dòng)設(shè)備上更好地查看，以及如何通過提供多個(gè)版本的banner圖形和其他圖像來縮短小屏幕的下載時(shí)間。另外，你還能了解如何使用CSS 媒體查詢替換Retina顯示器的高分辨率版本的圖形。這篇教程可以說是最終極的響應(yīng)式網(wǎng)頁設(shè)計(jì)教程。

10. Build An HTML5 Website With A Responsive Layout

https://www.youtube.com/watch?v=Wm6CUkswsNw

這個(gè)視頻教程對(duì)于新手來說是一個(gè)很好的學(xué)習(xí)響應(yīng)式網(wǎng)頁設(shè)計(jì)的教程，教大家如何創(chuàng)建一個(gè)實(shí)例的HTML5的響應(yīng)式網(wǎng)頁。視頻還將談?wù)撊绾问褂肏TML語義化標(biāo)簽，諸如，頁面和頁腳。

11. Responsive Web Design Tutorial

https://www.youtube.com/watch?v=3tLb3i7GB38&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw

本系列教程涵蓋了12個(gè)學(xué)習(xí)視頻，可以說是一個(gè)很完整的響應(yīng)式網(wǎng)頁設(shè)計(jì)的教程。從介紹什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)到如何創(chuàng)建響應(yīng)式網(wǎng)頁，你可以學(xué)習(xí)到你想要了解響應(yīng)式網(wǎng)頁的一切知識(shí)點(diǎn)。

12. The pro's guide to responsive web design

https://www.creativebloq.com/rwd/pros-guide-responsive-web-design-71515692

我們都知道響應(yīng)式設(shè)計(jì)對(duì)于每一個(gè)網(wǎng)站都是必須的，但在實(shí)踐中，我們也知道了它并不是那么容易實(shí)現(xiàn)的技術(shù)。本文集合了許多優(yōu)秀的網(wǎng)頁設(shè)計(jì)師的建議，幫助大家如何從基礎(chǔ)知識(shí)上升到高層次的響應(yīng)式網(wǎng)頁設(shè)計(jì)。

響應(yīng)式網(wǎng)頁設(shè)計(jì)的工具

Bootstrap

Bootstrap是美國Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。它也是最受歡迎的HTML、CSS 和 JS 框架,用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的web項(xiàng)目。

Mockplus

Mockplus是一款在線協(xié)作設(shè)計(jì)工具，允許你創(chuàng)建交互式網(wǎng)頁和原型。這個(gè)工具很強(qiáng)大，可以快速的輸出交互網(wǎng)頁，為用戶提供包含通用設(shè)計(jì)的工具包和組件庫。

Responsinator

這是一個(gè)響應(yīng)式網(wǎng)頁測(cè)試的工具，只要輸入網(wǎng)站的URL就能輕松的知道你的網(wǎng)站是否友好。并且，你還可以直接與頁面進(jìn)行交互，點(diǎn)擊頁面鏈接。

總結(jié)

響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前各種移動(dòng)設(shè)備的普及，用“大勢(shì)所趨”來形容也不為過。新手網(wǎng)頁設(shè)計(jì)師必須掌握這一技術(shù)來實(shí)現(xiàn)更好的網(wǎng)站用戶體驗(yàn)，以上12個(gè)教程以及3個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)工具希望可以輕松帶你入門。

在線咨詢

上一篇：如何編寫HTML提交按鈕代碼？
下一篇：Android WebView開發(fā)（一）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商