[譯] 關於 SPA，你需要掌握的 4 層

zwwill木羽發表於2018-04-08

關於 SPA，你需要掌握的 4 層

我們從頭來構建一個 React 的應用程式，探究領域、儲存、應用服務和檢視這四層

[譯] 關於 SPA，你需要掌握的 4 層

每個成功的專案都需要一個清晰的架構，這對於所有團隊成員都是心照不宣的。

試想一下，作為團隊的新人。技術負責人給你介紹了在專案程式中提出的新應用程式的架構。

[譯] 關於 SPA，你需要掌握的 4 層

然後告訴你需求：

我們的應用程式將顯示一系列文章。使用者能夠建立、刪除和收藏文章。

然後他說，去做吧！

Ok，沒問題，我們來搭框架吧

我選擇 FaceBook 開源的構建工具 Create React App，使用 Flow 來進行型別檢查。簡單起見，先忽略樣式。

作為先決條件，讓我們討論一下現代框架的宣告性本質，以及涉及到的 state 概念。

現在的框架多為宣告式的

React， Angular， Vue 都是宣告式的，並鼓勵我們使用函數語言程式設計的思想。

你有見過手翻書嗎？

一本手翻書或電影書，裡面有一系列逐頁變化的圖片，當頁面快速翻頁的時候，就形成了動態的畫面。 [1]

[譯] 關於 SPA，你需要掌握的 4 層

現在讓我們來看一下 React 中的定義：

在應用程式中為每個狀態設計簡單的檢視， React 會在資料發生變化時高效地更新和渲染正確的元件。 [2]

Angular 中的定義：

使用簡單、宣告式的模板快速構建特性。使用您自己的元件擴充套件模板語言。 [3]

大同小異？

框架幫助我們構建包含檢視的應用程式。檢視是狀態的表象。那狀態又是什麼？

狀態

狀態表示應用程式中會更改的所有資料。

你訪問一個URL，這是狀態，發出一個 Ajax 請求來獲取電影列表，這是也狀態，將資訊持久化到本地儲存，同上，也是狀態。

狀態由一系列不變物件組成

不可變結構有很多好處，其中一個就是在檢視層。

下面是 React 指南對效能優化介紹的引言。

不變性使得跟蹤更改變得更容易。更改總是會產生一個新物件，所以我們只需要檢查物件的引用是否發生了更改。

領域層

域可以描述狀態並儲存業務邏輯。它是應用程式的核心，應該與檢視層解耦。Angular， React 或者是 Vue，這些都不重要，重要的是不管選擇什麼框架，我們都能夠使用自己的領。

[譯] 關於 SPA，你需要掌握的 4 層

因為我們處理的是不可變的結構，所以我們的領域層將包含實體和域服務。

在 OOP 中存在爭議，特別是在大規模應用程式中，在使用不可變資料時，貧血模型是完全可以接受的。

對我來說，弗拉基米爾·克里科夫（Vladimir Khorikov）的這門課讓我大開眼界。

要顯示文章列表，我們首先要建模的是Article實體。

所有 Article 型別實體的未來物件都是不可變的。Flow 可以通過使所有屬性只讀（屬性前面帶 + 號）來強制將物件不可變。

// @flow
export type Article = {
  +id: string;
  +likes: number;
  +title: string;
  +author: string;
}
複製程式碼

現在，讓我們使用工廠函式模式建立 articleService。

檢視 @mpjme 的這個視訊，瞭解更多關於JS中的工廠函式知識。

由於在我們的應用程式中只需要一個articleService，我們將把它匯出為一個單例。

createArticle 允許我們建立 Article 的凍結物件。每一篇新文章都會有一個唯一的自動生成的id和零收藏，我們僅需要提供作者和標題。

**Object.freeze()** 方法可凍結一個物件：即無法給它新增屬性。 [5]

createArticle 方法返回的是一個 Article 的「Maybe」型別

Maybe 型別強制你在操作 Article 物件前先檢查它是否存在。

如果建立文章所需要的任一欄位校驗失敗，那麼 createArticle 方法將返回null。這裡可能有人會說，最好丟擲一個使用者定義的異常。如果我們這麼做，但上層不實現catch塊，那麼程式將在執行時終止。 updateLikes 方法會幫我們更新現存文章的收藏數，將返回一個擁有新計數的副本。

最後，isTitleValid 和 isAuthorValid 方法能幫助 createArticle 隔離非法資料。

// @flow
import v1 from 'uuid';
import * as R from 'ramda';

import type {Article} from "./Article";
import * as validators from "./Validators";

export type ArticleFields = {
  +title: string;
  +author: string;
}

export type ArticleService = {
  createArticle(articleFields: ArticleFields): ?Article;
  updateLikes(article: Article, likes: number): Article;
  isTitleValid(title: string): boolean;
  isAuthorValid(author: string): boolean;
}

export const createArticle = (articleFields: ArticleFields): ?Article => {
  const {title, author} = articleFields;
  return isTitleValid(title) && isAuthorValid(author) ?
    Object.freeze({
      id: v1(),
      likes: 0,
      title,
      author
    }) :
    null;
};

export const updateLikes = (article: Article, likes: number) =>
  validators.isObject(article) ?
    Object.freeze({
      ...article,
      likes
    }) :
    article;

export const isTitleValid = (title: string) =>
  R.allPass([
    validators.isString,
    validators.isLengthGreaterThen(0)
  ])(title);

export const isAuthorValid = (author: string) =>
  R.allPass([
    validators.isString,
    validators.isLengthGreaterThen(0)
  ])(author);

export const ArticleServiceFactory = () => ({
  createArticle,
  updateLikes,
  isTitleValid,
  isAuthorValid
});

export const articleService = ArticleServiceFactory();
複製程式碼

驗證對於保持資料一致性非常重要，特別是在領域級別。我們可以用純函式來編寫 Validators 服務。

// @flow
export const isObject = (toValidate: any) => !!(toValidate && typeof toValidate === 'object');

export const isString = (toValidate: any) => typeof toValidate === 'string';

export const isLengthGreaterThen = (length: number) => (toValidate: string) => toValidate.length > length;
複製程式碼

請使用最小的工程來檢驗這些驗證方法，僅用於演示。

事實上，在 JavaScript 中檢驗一個物件是否為物件並不容易。 :)

現在我們有了領域層的結構!

好在現在就可以使用我們的程式碼來，而無需考慮框架。

讓我們來看一下如何使用 articleService 建立一篇關於我最喜歡的書的文章，並更新它的收藏數。

// @flow
import {articleService} from "../domain/ArticleService";

const article = articleService.createArticle({
  title: '12 rules for life',
  author: 'Jordan Peterson'
});
const incrementedArticle = article ? articleService.updateLikes(article, 4) : null;

console.log('article', article);
/*
   const itWillPrint = {
     id: "92832a9a-ec55-46d7-a34d-870d50f191df",
     likes: 0,
     title: "12 rules for life",
     author: "Jordan Peterson"
   };
 */

console.log('incrementedArticle', incrementedArticle);
/*
   const itWillPrintUpdated = {
     id: "92832a9a-ec55-46d7-a34d-870d50f191df",
     likes: 4,
     title: "12 rules for life",
     author: "Jordan Peterson"
   };
 */
複製程式碼

儲存層

建立和更新文章所產生的資料代表了我們的應用程式的狀態。

我們需要一個地方來儲存這些資料，而 store 就是最佳人選

[譯] 關於 SPA，你需要掌握的 4 層

狀態可以很容易地由一系列文章來建模。

// @flow
import type {Article} from "./Article";

export type ArticleState = Article[];
複製程式碼

ArticleState.js

ArticleStoreFactory 實現了釋出-訂閱模式，並匯出 articleStore 作為單例。

store 可儲存文章並賦予他們新增、刪除和更新的不可變操作。

記住，store 只對文章進行操作。只有 articleService 才能建立或更新它們。

感興趣的人可以訂閱和退訂 articleStore。

articleStore 儲存所有訂閱者的列表，並將每個更改通知到他們。

// @flow
import {update} from "ramda";

import type {Article} from "../domain/Article";
import type {ArticleState} from "./ArticleState";

export type ArticleStore = {
  addArticle(article: Article): void;
  removeArticle(article: Article): void;
  updateArticle(article: Article): void;
  subscribe(subscriber: Function): Function;
  unsubscribe(subscriber: Function): void;
}

export const addArticle = (articleState: ArticleState, article: Article) => articleState.concat(article);

export const removeArticle = (articleState: ArticleState, article: Article) =>
  articleState.filter((a: Article) => a.id !== article.id);

export const updateArticle = (articleState: ArticleState, article: Article) => {
  const index = articleState.findIndex((a: Article) => a.id === article.id);
  return update(index, article, articleState);
};

export const subscribe = (subscribers: Function[], subscriber: Function) =>
  subscribers.concat(subscriber);

export const unsubscribe = (subscribers: Function[], subscriber: Function) =>
  subscribers.filter((s: Function) => s !== subscriber);

export const notify = (articleState: ArticleState, subscribers: Function[]) =>
  subscribers.forEach((s: Function) => s(articleState));

export const ArticleStoreFactory = (() => {
  let articleState: ArticleState = Object.freeze([]);
  let subscribers: Function[] = Object.freeze([]);

  return {
    addArticle: (article: Article) => {
      articleState = addArticle(articleState, article);
      notify(articleState, subscribers);
    },
    removeArticle: (article: Article) => {
      articleState = removeArticle(articleState, article);
      notify(articleState, subscribers);
    },
    updateArticle: (article: Article) => {
      articleState = updateArticle(articleState, article);
      notify(articleState, subscribers);
    },
    subscribe: (subscriber: Function) => {
      subscribers = subscribe(subscribers, subscriber);
      return subscriber;
    },
    unsubscribe: (subscriber: Function) => {
      subscribers = unsubscribe(subscribers, subscriber);
    }
  }
});

export const articleStore = ArticleStoreFactory();
複製程式碼

ArticleStore.js

我們的 store 實現對於演示的目的是有意義的，它讓我們理解背後的概念。在實際運作中，我推薦使用狀態管理系統，像 Redux， ngrx， MobX， 或者是可監控的資料管理系統

好的，現在我們有了領域層和儲存層的結構。

讓我們為 store 建立兩篇文章和兩個訂閱者，並觀察訂閱者如何獲得更改通知。

// @flow
import type {ArticleState} from "../store/ArticleState";
import {articleService} from "../domain/ArticleService";
import {articleStore} from "../store/ArticleStore";

const article1 = articleService.createArticle({
  title: '12 rules for life',
  author: 'Jordan Peterson'
});

const article2 = articleService.createArticle({
  title: 'The Subtle Art of Not Giving a F.',
  author: 'Mark Manson'
});

if (article1 && article2) {
  const subscriber1 = (articleState: ArticleState) => {
    console.log('subscriber1, articleState changed: ', articleState);
  };

  const subscriber2 = (articleState: ArticleState) => {
    console.log('subscriber2, articleState changed: ', articleState);
  };

  articleStore.subscribe(subscriber1);
  articleStore.subscribe(subscriber2);

  articleStore.addArticle(article1);
  articleStore.addArticle(article2);

  articleStore.unsubscribe(subscriber2);

  const likedArticle2 = articleService.updateLikes(article2, 1);
  articleStore.updateArticle(likedArticle2);

  articleStore.removeArticle(article1);
}
複製程式碼

應用服務層

這一層用於執行與狀態流相關的各種操作，如Ajax從伺服器或狀態映象中獲取資料。

[譯] 關於 SPA，你需要掌握的 4 層

出於某種原因，設計師要求所有作者的名字都是大寫的。

我們知道這種要求是比較無厘頭的，而且我們並不想因此汙化了我們的模組。

於是我們建立了 ArticleUiService 來處理這些特性。這個服務將取用一個狀態，就是作者的名字，將其構建到專案中，可返回大寫的版本給呼叫者。

// @flow
export const displayAuthor = (author: string) => author.toUpperCase();
複製程式碼

讓我們看一個如何使用這個服務的演示！

// @flow
import {articleService} from "../domain/ArticleService";
import * as articleUiService from "../services/ArticleUiService";

const article = articleService.createArticle({
  title: '12 rules for life',
  author: 'Jordan Peterson'
});

const authorName = article ?
  articleUiService.displayAuthor(article.author) :
  null;

console.log(authorName);
// 將輸出 JORDAN PETERSON

if (article) {
  console.log(article.author);
  // 將輸出 Jordan Peterson
}
複製程式碼

app-service-demo.js

檢視層

現在我們有了一個可執行且不依賴於框架的應用程式，React 已經準備投入使用。

檢視層由 presentational components 和 container components 組成。

presentational components 關注事物的外觀，而 container components 則關注事物的工作方式。更多細節解釋請關注 Dan Abramov 的文章。

[譯] 關於 SPA，你需要掌握的 4 層

讓我們使用 ArticleFormContainer 和 ArticleListContainer 開始構建 App 元件。

// @flow
import React, {Component} from 'react';

import './App.css';

import {ArticleFormContainer} from "./components/ArticleFormContainer";
import {ArticleListContainer} from "./components/ArticleListContainer";

type Props = {};

class App extends Component<Props> {
  render() {
    return (
      <div className="App">
        <ArticleFormContainer/>
        <ArticleListContainer/>
      </div>
    );
  }
}

export default App;
複製程式碼

接下來，我們來建立 ArticleFormContainer。React 或者 Angular 都不重要，表單有些複雜。

檢視 Ramda 庫以及如何增強我們程式碼的宣告性質的方法。

表單接受使用者輸入並將其傳遞給 articleService 處理。此服務根據該輸入建立一個 Article，並將其新增到 ArticleStore 中以供 interested 元件使用它。所有這些邏輯都儲存在 submitForm 方法中。

『ArticleFormContainer.js』

// @flow
import React, {Component} from 'react';
import * as R from 'ramda';

import type {ArticleService} from "../domain/ArticleService";
import type {ArticleStore} from "../store/ArticleStore";
import {articleService} from "../domain/ArticleService";
import {articleStore} from "../store/ArticleStore";
import {ArticleFormComponent} from "./ArticleFormComponent";

type Props = {};

type FormField = {
  value: string;
  valid: boolean;
}

export type FormData = {
  articleTitle: FormField;
  articleAuthor: FormField;
};

export class ArticleFormContainer extends Component<Props, FormData> {
  articleStore: ArticleStore;
  articleService: ArticleService;

  constructor(props: Props) {
    super(props);

    this.state = {
      articleTitle: {
        value: '',
        valid: true
      },
      articleAuthor: {
        value: '',
        valid: true
      }
    };

    this.articleStore = articleStore;
    this.articleService = articleService;
  }

  changeArticleTitle(event: Event) {
    this.setState(
      R.assocPath(
        ['articleTitle', 'value'],
        R.path(['target', 'value'], event)
      )
    );
  }

  changeArticleAuthor(event: Event) {
    this.setState(
      R.assocPath(
        ['articleAuthor', 'value'],
        R.path(['target', 'value'], event)
      )
    );
  }

  submitForm(event: Event) {
    const articleTitle = R.path(['target', 'articleTitle', 'value'], event);
    const articleAuthor = R.path(['target', 'articleAuthor', 'value'], event);

    const isTitleValid = this.articleService.isTitleValid(articleTitle);
    const isAuthorValid = this.articleService.isAuthorValid(articleAuthor);

    if (isTitleValid && isAuthorValid) {
      const newArticle = this.articleService.createArticle({
        title: articleTitle,
        author: articleAuthor
      });
      if (newArticle) {
        this.articleStore.addArticle(newArticle);
      }
      this.clearForm();
    } else {
      this.markInvalid(isTitleValid, isAuthorValid);
    }
  };

  clearForm() {
    this.setState((state) => {
      return R.pipe(
        R.assocPath(['articleTitle', 'valid'], true),
        R.assocPath(['articleTitle', 'value'], ''),
        R.assocPath(['articleAuthor', 'valid'], true),
        R.assocPath(['articleAuthor', 'value'], '')
      )(state);
    });
  }

  markInvalid(isTitleValid: boolean, isAuthorValid: boolean) {
    this.setState((state) => {
      return R.pipe(
        R.assocPath(['articleTitle', 'valid'], isTitleValid),
        R.assocPath(['articleAuthor', 'valid'], isAuthorValid)
      )(state);
    });
  }

  render() {
    return (
      <ArticleFormComponent
        formData={this.state}
        submitForm={this.submitForm.bind(this)}
        changeArticleTitle={(event) => this.changeArticleTitle(event)}
        changeArticleAuthor={(event) => this.changeArticleAuthor(event)}
      />
    )
  }
}
複製程式碼

這裡注意 ArticleFormContainer，presentational component，返回使用者看到的真實表單。該元件顯示容器傳遞的資料，並丟擲 changeArticleTitle、 changeArticleAuthor 和 submitForm 的方法。

『ArticleFormComponent.js』

// @flow
import React from 'react';

import type {FormData} from './ArticleFormContainer';

type Props = {
  formData: FormData;
  changeArticleTitle: Function;
  changeArticleAuthor: Function;
  submitForm: Function;
}

export const ArticleFormComponent = (props: Props) => {
  const {
    formData,
    changeArticleTitle,
    changeArticleAuthor,
    submitForm
  } = props;

  const onSubmit = (submitHandler) => (event) => {
    event.preventDefault();
    submitHandler(event);
  };

  return (
    <form
      noValidate
      onSubmit={onSubmit(submitForm)}
    >
      <div>
        <label htmlFor="article-title">Title</label>
        <input
          type="text"
          id="article-title"
          name="articleTitle"
          autoComplete="off"
          value={formData.articleTitle.value}
          onChange={changeArticleTitle}
        />
        {!formData.articleTitle.valid && (<p>Please fill in the title</p>)}
      </div>
      <div>
        <label htmlFor="article-author">Author</label>
        <input
          type="text"
          id="article-author"
          name="articleAuthor"
          autoComplete="off"
          value={formData.articleAuthor.value}
          onChange={changeArticleAuthor}
        />
        {!formData.articleAuthor.valid && (<p>Please fill in the author</p>)}
      </div>
      <button
        type="submit"
        value="Submit"
      >
        Create article
      </button>
    </form>
  )
};
複製程式碼

現在我們有了建立文章的表單，下面就陳列他們吧。ArticleListContainer 訂閱了 ArticleStore，獲取所有的文章並展示在 ArticleListComponent 中。

『ArticleListContainer.js』

// @flow
import * as React from 'react'

import type {Article} from "../domain/Article";
import type {ArticleStore} from "../store/ArticleStore";
import {articleStore} from "../store/ArticleStore";
import {ArticleListComponent} from "./ArticleListComponent";

type State = {
  articles: Article[]
}

type Props = {};

export class ArticleListContainer extends React.Component<Props, State> {
  subscriber: Function;
  articleStore: ArticleStore;

  constructor(props: Props) {
    super(props);
    this.articleStore = articleStore;
    this.state = {
      articles: []
    };
    this.subscriber = this.articleStore.subscribe((articles: Article[]) => {
      this.setState({articles});
    });
  }

  componentWillUnmount() {
    this.articleStore.unsubscribe(this.subscriber);
  }

  render() {
    return <ArticleListComponent {...this.state}/>;
  }
}
複製程式碼

ArticleListComponent 是一個 presentational component，他通過 props 接收文章，並展示元件 ArticleContainer。

『ArticleListComponent.js』

// @flow
import React from 'react';

import type {Article} from "../domain/Article";
import {ArticleContainer} from "./ArticleContainer";

type Props = {
  articles: Article[]
}

export const ArticleListComponent = (props: Props) => {
  const {articles} = props;
  return (
    <div>
      {
        articles.map((article: Article, index) => (
          <ArticleContainer
            article={article}
            key={index}
          />
        ))
      }
    </div>
  )
};
複製程式碼

ArticleContainer 傳遞文章資料到表現層的 ArticleComponent，同時實現 likeArticle 和 removeArticle 這兩個方法。

likeArticle 方法負責更新文章的收藏數，通過將現存的文章替換成更新後的副本。

removeArticle 方法負責從 store 中刪除制定文章。

『ArticleContainer.js』

// @flow
import React, {Component} from 'react';

import type {Article} from "../domain/Article";
import type {ArticleService} from "../domain/ArticleService";
import type {ArticleStore} from "../store/ArticleStore";
import {articleService} from "../domain/ArticleService";
import {articleStore} from "../store/ArticleStore";
import {ArticleComponent} from "./ArticleComponent";

type Props = {
  article: Article;
};

export class ArticleContainer extends Component<Props> {
  articleStore: ArticleStore;
  articleService: ArticleService;

  constructor(props: Props) {
    super(props);

    this.articleStore = articleStore;
    this.articleService = articleService;
  }

  likeArticle(article: Article) {
    const updatedArticle = this.articleService.updateLikes(article, article.likes + 1);
    this.articleStore.updateArticle(updatedArticle);
  }

  removeArticle(article: Article) {
    this.articleStore.removeArticle(article);
  }

  render() {
    return (
      <div>
        <ArticleComponent
          article={this.props.article}
          likeArticle={(article: Article) => this.likeArticle(article)}
          deleteArticle={(article: Article) => this.removeArticle(article)}
        />
      </div>
    )
  }
}
複製程式碼

ArticleContainer 負責將文章的資料傳遞給負責展示的 ArticleComponent，同時負責當 「收藏」或「刪除」按鈕被點選時在響應的回撥中通知 container component。

還記得那個作者名要大寫的無厘頭需求嗎？

ArticleComponent 在應用程式層呼叫 ArticleUiService，將一個狀態從其原始值（沒有大寫規律的字串）轉換成一個所需的大寫字串。

『ArticleComponent.js』

// @flow
import React from 'react';

import type {Article} from "../domain/Article";
import * as articleUiService from "../services/ArticleUiService";

type Props = {
  article: Article;
  likeArticle: Function;
  deleteArticle: Function;
}

export const ArticleComponent = (props: Props) => {
  const {
    article,
    likeArticle,
    deleteArticle
  } = props;

  return (
    <div>
      <h3>{article.title}</h3>
      <p>{articleUiService.displayAuthor(article.author)}</p>
      <p>{article.likes}</p>
      <button
        type="button"
        onClick={() => likeArticle(article)}
      >
        Like
      </button>
      <button
        type="button"
        onClick={() => deleteArticle(article)}
      >
        Delete
      </button>
    </div>
  );
};
複製程式碼

幹得漂亮！

我們現在有一個功能完備的 React 應用程式和一個魯棒的、定義清晰的架構。任何新晉成員都可以通過閱讀這篇文章學會如何順利的進展我們的工作。:)

你可以在這裡檢視我們最終實現的應用程式，同時奉上 GitHub 倉庫地址。

如果你喜歡這份指南，請為它點贊。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章