# 前言

您是不是有如下疑惑。

开发数据大屏不能完全自适应？

使用 rem 自适应还需要注意单位很麻烦？

有没有那种随便我怎么写都能够完全自适应的？

有没有那种用最少的代码最简单的方法实现完全自适应？最好是不需要我用脑子去思考的那种方法。

# 前言

当接到可视化大屏需求时，你是否会有以下疑问👇

• 如何做一款定制化的数据大屏？
• 开发可视化数据大屏如何做自适应？
• vw vh、rem、scale 到底哪种比较好？
• 时间不够，有没有偷懒的方法？

最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：

• 大屏之关键-前期的自适应适配
• 根据 ui 稿绘制图表，调细节

而解决了适配问题后，后面就只是一个慢工出细活，耗时间的事情了。

# 关于项目源码

项目地址：https://github.com/Hbuilderx/screen-adapter-demo

一般来说，做 PC 端的页面并不像移动端那样对分辨率及屏幕大小有的特别强的要求，但是针对数据大屏这种展示型的页面来说，就需要考虑适配的方案了，毕竟要尽可能的保证大部分的主流显示器都能正常展示。

市面上大部分的显示器几乎都是 16：9 的尺寸，也就是 1920 * 1080 的分辨率。

• $attrs 属性解释：包含了父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件 —— 这在创建高阶的组件时会非常有用。
• inheritAttrs 属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false

可能不是很好理解，我们可以举个例子来验证一下。

# 高级数据结构和算法

# 摘要

当你在编写 css 代码的时候，是否遇到这样的困扰：不知道取什么 class 名？修改某个组件的样式，担心影响了其他组件？编写的组件样式如何复用？为了解决这些问题，聪明的程序猿发明了 BEM 命名法。

BEM 命名法，是对 css 命名的一种规范，将页面模块化，隔离样式，提高代码的复用性，减少后期的维护成本。BEM 的意思就是 Block (块)、Element (元素)、modifier (修饰符)，通过双下划线 __ 或者双中划 – 链接。

BEM 通常用于框架开发中，比如微信 WEUI、饿了么 element-ui、有赞 vant 等。笔者也是通过阅读这些优秀框架的源码，学习到了这一套 css 命名大法，从此走上人生巅峰，赢取白富美。

# vuex 的基本使用

//index.js

import { createStore } from './gvuex.js'

const store = createStore({

  // 定义 store 的状态

  state() {

    return {

      count: 1 

    }

  },

  // 定义获取 state 状态数据的计算属性 getters，以下的值都被认为是 state 的派生值

  getters: {

    double(state) { 

      return state.count * 2

    }

  },

  // 定义修改 state 状态数据的方法 mutations

  mutations: {

    add(state) { 

      state.count++

    }

  },

  // 定义异步操作的方法 actions

  actions: {

    asyncAdd({ commit }) { 

      setTimeout(() => {

        commit('add')

      }, 1000)

    }

  }

})

App.vue

<script setup>

import { useStore } from '../store/gvuex'

import { computed } from 'vue'

let store = useStore();

let count = computed(()=>{ store.state.count })

let double = computed(()=>{ store.getters.double })

function add() {

  store.commit('add')

}

function asyncAdd() {

  store.dispatch('asyncAdd')

}

</script>

<template>

    <div class="">

       * 2 = 

      <button @click="add">add</button>

      <button @click="asyncAdd">async add</button>

    </div>

</template>

<style scoped>

</style>

知道了 vuex 的用法，你会不会发出以下疑问：

1. 为什么要 store.commit('add') 才能触发事件执行呢？可不可以进行直接调用 mutation 函数进行操作呢？
2. 为什么不可以直接对 state 存储的状态进行修改，只能通过调用 mutation 函数的方式修改呢？
3. 为什么存在异步调用的函数需要 store.dispatch('asyncAdd') 函数才能完成呢？可以直接调用 store.commit('asyncAdd') 嘛？如果不可以，为什么呢？
4. createStore() 和 useStore() 到底发生了什么？

那么下面就来一一解密吧。

JavaScript 中有些 API 可能使用率比较低，下面我们逐一介绍它们的用法和使用场景。

# Blob API

Blob API 用于处理二进制数据，可以方便地将数据转换为 Blob 对象或从 Blob 对象读取数据。

// 创建一个 Blob 对象

const myBlob = new Blob(["Hello, world!"], { type: "text/plain" });

// 读取 Blob 对象的数据

const reader = new FileReader();

reader.addEventListener("loadend", () => {

  console.log(reader.result);

});

reader.readAsText(myBlob);

使用场景：在 Web 应用中，可能需要上传或下载二进制文件，使用 Blob API 可以方便地处理这些数据。

提到设计模式，相信知道的同学都会脱口而出，五大基本原则（SOLID）和 23 种设计模式。SOLID 所指的五大基本原则分别是：单一功能原则、开放封闭原则、里式替换原则、接口隔离原则和依赖反转原则。逐字逐句诠释这五大基本原则违背了写这篇文章的初衷，引用社区大佬的理解，SOLID 可以简单概括为六个字，即 “高内聚，低耦合”：

• 高层模块不依赖底层模块，即为依赖反转原则。
• 内部修改关闭，外部扩展开放，即为开放封闭原则。
• 聚合单一功能，即为单一功能原则。
• 低知识要求，对外接口简单，即为迪米特法则。
• 耦合多个接口，不如独立拆分，即为接口隔离原则。
• 合成复用，子类继承可替换父类，即为里式替换原则。