微店技术周刊(总第 26 期)-本期主编-何会会

[hoperyy]

微店技术周刊(总第 26 期)-本期主编-何会会

macOS Mojave 的动态桌面，可不只是「定时换壁纸」这么简单

关于

微店技术周刊整理每周有趣有用有料的各类内容，为大家呈现多样的技术世界。

周刊编辑：@何会会 / @张尚金 / @杨力 / @赵兴 / @刘远洋

周刊招募内容作者，主题不限，发出你的声音吧！

分享

• 前后端参数统一处理方案(推荐者: @何会会)

  前端校验防小白，后端校验防黑客，双重保障，系统更安全

• 一种实现简单且舒服的前端接口异常处理方案(推荐者: @刘远洋)

• 提升开发幸福感的 10 条 JS 技巧(推荐者: @刘远洋)

• JS 最新基本数据类型：BigInt(推荐者: @何会会)

• Vue 代码风格指南(推荐者: @刘远洋)

• 详解 React 16 的 Diff 策略(推荐者: @刘远洋)

• 不到 0.3s 完成渲染！360 信息流正文“闪开”优化实践(推荐者: @赵兴)

• 深入浅出 Vue 响应式原理 (推荐者: @何会会)

• Vue 3.0 即将到来，你准备好了么？(推荐者: @张明)

• [视频]Vue.js作者在VueConf现场发布RFC(推荐者: @张明)

• 前端离线化探索(推荐者: @刘远洋)

• 面试再问 ThreadLocal，别说你不会(推荐者: @何会会)

• ArrayList 源码分析（扩容机制 jdk8）(推荐者: @何会会)

  ArrayList是不是你感觉用的很熟悉了，方便又简单，但你知道他的实现原理吗？如何扩容的，还是可以无限的往集合里放入元素，性能瓶颈等。

• 从单体应用到微服务的开发旅程(推荐者: @何会会)

  这是一个由 simviso 团队进行的关于架构演进的云原生分享的翻译文档，这个主要是关于Service Mesh 的分享，分享者是Kong这家公司的CTO。

• the-art-of-command-line(推荐者: @刘远洋)

  熟练使用命令行是一种常常被忽视，或被认为难以掌握的技能，但实际上，它会提高你作为工程师的灵活性以及生产力。本文是一份作者在 Linux 上工作时，发现的一些命令行使用技巧的摘要。有些技巧非常基础，而另一些则相当复杂，甚至晦涩难懂。这篇文章并不长，但当你能够熟练掌握这里列出的所有技巧时，你就学会了很多关于命令行的东西了。

• 这次要是讲不明白 Spring Cloud 核心组件，那我就白编这故事了(推荐者: @何会会)

• 灵魂拷问：Java 对象的内存分配过程是如何保证线程安全的？(推荐者: @何会会)

• learn-regex/README-cn.md at master · ziishaned/learn-regex！(推荐者: @刘远洋)

  一万八千多颗星的正则表达式教程

• 在工作中常用到的 SQL(推荐者: @何会会)

• HashSet、LinkedHashSet、TreeSet的使用方法及区别 (推荐者: @何会会)

• 基于 github webhook 的代码自动部署工具(推荐者: @何会会)

• 推荐一款阿里开源的 Java 诊断工具，好用到爆! (推荐者: @何会会)

• 杀手级 AI 补代码工具问世，支持 23 种语言及 5 种主流编辑器，程序员沸腾了(推荐者: @神秘客)

• 四部门印发 《关于加强数学科学研究工作方案》(推荐者: @刘远洋)

• 从沟通反馈到高效能研发(推荐者: @何会会)

投稿

谈谈「数据模型」是如何助力前端开发的

@张尚金 - 生产力平台

原文链接：https://juejin.im/post/5d410e85f265da03dd3d4ee8

正文部分

一、定义

数据模型是数据特征的抽象，用来抽象定义一个业务对象。假如现在有一个用户模型，如果要抽象的描述这个用户对象，可以按照如下来定义：

const UserModel = {
    name:{
        type:String,
        property:'name',
        value:'zhangshang'
    },
    age:{
        type:Number,
        property:'age',
        value:26
    }
}

其中，type声明数据的类型，property指明映射路径，value是默认值。这里先有个大概的概念就行，后面我会通过实例来详细展开。

二、动机

前面介绍了数据模型的定义，那和前端开发又有什么关系呢？前端又不需要和数据库打交道，前端开发主要就是拿到数据显示就完了，那为什么需要数据模型呢？它是怎么助力前端开发的呢？我们先来看一下以下几个场景。

场景一

我们在前端开发中，通过ajax请求拿到服务端数据，然后将数据显示在视图上，经常会写如下代码：

如示例，假如我们要显示用户头像，通过取到headUrl的值绑定在src属性上即可。因为是异步加载获取的数据，在最终获取到headUrl的值之前，我们需要先判断cardData.buyerExperienceInfo的存在性，然后才能取值，否则在视图初次渲染之前会报如下错误：

在这种场景下，我们在开发中就不得不写一些防御性的代码，久而久之，项目中类似代码会越来越多，碰到层级深的，防御性代码就会写的越来越恶心。另外还有的就是，如果服务端在这中间某个字段删掉了，那就又得特殊处理了，否则会有一些未知的非空错误报错，这种编码方式会导致前端严重依赖服务端定义的数据结构，非常不利于后期维护。

场景二

平时开发中，我们拿到了服务端返回的数据，有些不是标准格式的，是无法直接在视图上直接使用的，是需要而外格式化处理的，比如我司服务端返回的的价格字段单位统一是分，跟时间相关的字段统一是毫秒值，这个时候我们在组件的生命周期内，就不得不而外增加一些对数据处理的逻辑，还有就是这部分处理在很多组件都是公用的，我们就不得不频繁编写类似的代码，数据处理逻辑没有得到复用。

场景三

在用户做了一些交互后，需要将一些数据存储到服务端，这个时候我们拿到的数据往往也是非标准的，就比如你要提交个表单，其中有个价格字段，你拿到价格单位可能是百位的，而服务端需要的单位必须是分位的，这个时候在提交数据之前，你又得对这部分数据进行处理，还有就是有些接口的参数是json字符串形式的，可能是多级嵌套的，你还要需要特意构造这样的参数数据格式，导致开发中编写了太多与业务无关的逻辑，随着项目逐渐扩大或者维护人员更迭，项目会越来越不好维护。

三、数据模型

在碰到这么多痛点之后，我就在想如何解决，回顾以上场景，总结下来存在以下几个问题：

1. 前后端数据结构没有解耦，前端在应对不定的服务端数据结构前提下，需要编写过多的保护性代码，不利于维护的同时，代码健壮性也不高。
2. 基础数据逻辑处理没有和UI视图解耦，容易阻塞视图渲染，同时，在视图组件上存在太多的基础数据逻辑处理，没有有效复用。

所以，这里我引入了数据模型的概念，那通过数据模型如何解决这类问题呢？下面我将通过两个实际案例来进一步呈现上述场景，以及引入了数据模型之后是如何解决的。

四、案列功能

......

查看全部文章内容