Blog

Blog

PHODAL

DDM: 一个简洁的前端领域模型库

在上一篇文章《前后端分离之领域模型的思考》中,我们介绍了在前端开发中所遇到的一个问题。即:

一个模型多个上下文的问题

对于我们的几个不同业务情景下,我们只使用同一个后台API的情形。如下图所示:

Domain Double Model
Domain Double Model

在我们的Blog Model里,我们有AuthorTitleSlugContentData几个字段。

而在我们使用的时候,我们需要依据这个模型应用到不同的场景下:

  • 面向读者的Model,只有TagTitleAuthorDateContent五个字段。
  • 面向SEO时,只有TagTitleDate、基于ContentDescription四个字段。
  • 面向RSS时,则有TitleAuthorDateContentSlug五个字段。

如果我们使用的是同一个模型,那么我们就很难做到分离上下文。并且在三种不同的场景下,Blog Model的含义都是不一样的:

Share Data Schema
Share Data Schema

于是,我们就需要想办法去区分不同的模型——这在后台来说是一件很容易的事:

Bounded Content
Bounded Content

但是在前台谁想这样做?在这其中使用复杂的OO思想?

所以,我们有了DDM。

DDM

我也想不起来为什么是Domain Double Model,大概是Frontend算是一个Model,后台算是一个Model。反正这个库就是叫这个名字了。

对于前台来说,一种理想的方式就是直接Clone一个Blog对象,然后从中获取所需要的字段了。

ddm.get(['Date', 'Tag', 'Content', 'Title', 'Author'])
  .from(orignBlog)
  .to(ReaderBlog);

在一些博客里,如我的Django驱动的博客,Tag是属于另外一个API,就需要另外ADD

ddm.get(['Date', 'Content', 'Title', 'Author'])
  .from(orignBlog)
  .add('Tag', Tag)
  .to(ReaderBlog);

对于一些复杂的例子,我们就需要一个简单的Handle函数,如:

function handler(content) {
  return content[0];
}

ddm.get(['Date', 'Tag', 'Slug', 'Content'])
  .from(originObject)
  .handle("Content", handler)
  .to(newObject);

突然发现这里少了一个例子是:把Content变成Description,然后减少字符。。。

就这么简单和任性.

GitHub: https://github.com/phodal/ddm

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签