许小墨のBlog

003_TypeScript 第四章 通过前两章的学习, 我们基本上对于 TS 已经入门了 但是我们会发现, 我们好像对于类型限制还缺少了一些内容 这一章我们继续学习 接口 初学者刚一听到这个名字, 可能不太好理解 接触过前后端交互的可能会对这个名字比较迷茫, 容易混乱 但是, 都不要纠结, 忘记你之前所有的一切, 他就是一个名字而已 就像这个玩意, 老婆饼, 老婆在哪里, 就是个名字而已 那么接口到底是干什么的呢 ? 其实就是一个用来限制非基本数据的类型限制手段而已 我们回忆之前的类型限制, 我们发现 对于 对象, 函数, 类 等内容并没有很好的限制方式 难道真的没有, 并不是 接口就是其中一个 接口初体验 来看下面这个例子 1let user: { name: string } = {} 所以这一段代码就会提示错误 那么我们就需要修改代码, 赋值的时候需要有一个 name 属性存在 1let user: { name: string } = { name: '许小墨& ...

002_TypeScript 第二章 上一章, 我们讲了 TS 的编译和初步使用 现在我们就开始正式进入 TS 的学习之旅 基础类型 我们先来对我们最基础的数据类型进行一些限制 布尔类型1let boo: boolean = false 当前这个 boo 变量的数据类型被限制为了 布尔类型 一旦将来给这个变量赋值的时候, 只要不是布尔类型, 就会提示你类型错误 数值类型 ts 内的 number 类型都是按照浮点数存储的, 同时也支持十六进制, 八进制, 二进制等其他进制表示 1234let num: number = 6num = 0xf00dnum = 0b1010num = 0o744 给 num 变量限制为了 number 类型, 只要你给 num 赋值的是 number 类型数据就没问题, 其他不行 字符串类型1let str: string = '许小墨' 给 str 变量限制为了 string 数据类型 多个基础类型 我们也可以通过 ( | ) 来给一个变量设置多个数据类型 1let foo: string | bool ...

001_TypeScript 第一章 介绍 百度百科介绍 TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的基础上添加静态类型定义构建而成. TypeScript 通过 TypeScript 编译器 或 Babel 转译为 JavaScript 代码，可运行在任何浏览器，任何操作系统 看了上面的介绍, 还是不太明白 TypeScript 是什么, 来看下面的例子 例子 一段很简单的 js 代码 1234// 封装函数, 求两数之和function and(a, b) { return a + b} 接下来就调用一下试试 1const res = and(10, 20) 这么简单的内容, 谁不会, 这玩意会有什么问题 ? 我们来思考一下, 假设这个函数你在调用的时候 你少传递了一个数字 你传递了一个字符串 会不会出现问题呢 ? 你可能不禁要问 : 我为什么要少传递一个数字, 为什么要传递字符串呢 ? 可能这个函数略显简单了一些 那么我们在看一个稍微复杂一些的代码 123456789101112131415 ...

pnpm+monorepo 项目引言在我有限的开发经历中，并接触过 monorepo 管理项目，从未听说。然而，近期公司项目结构改造，monorepo 得到一致好评。如今许多开源项目都采纳了 Monorepo 方式，对于不熟悉它的开发者来说，阅读和理解这些项目的源码可能会相对困难。所以，我近期简单研究了一下使用 pnpm 搭建 Monorepo 项目的方法。 简介pnpmpnpm 是一个快速、节省磁盘空间的包管理工具。它通过硬链接在 node_modules 中共享依赖,避免了重复安装同一个包的多个版本,这大大节省了磁盘空间。 monorepoMonorepo 是将多个包(package)统一放置在一个仓库(repo)进行管理的方式。这种方式可以更好地管理包之间的依赖与兼容,统一的提交日志也更容易追踪问题。许多大公司如 Google、Facebook 都采用 Monorepo 方式管理的多个前端包。 仓库架构Monolithic单体应用架构 。初期业务系统不复杂时，通常只用一个仓库来管理项目，这时我们会以合理划分目录，提取公共组件的方式来解决问题。由文件的层级划分和引入，来进行页面、组 ...

v-model 的使用vue2.x 中 v-model123<ChildComponent v-model = "title /><!-- 实际上是这样的 --><ChildComponent :value="title" @input="title = $event" /> 也就是传递一个属性 value，然后接收一个 input 事件。 问题： 那就是传递下去的必须是 value 值，接收的也必须是 input 事件 解决： Vue2.2 中，引入了 model 组件选项，也即是说你可以通过 model 来指定 v-model 绑定的值和属性 1<ChildComponent v-model="title" /> 子组件这样设置的： 1234567891011121314export default { model: { prop: "title", // v-model绑定的属性名称 event: &quo ...

可视化图形类型 2数据和信息的呈现不只是选择任何数据可视化设计，而是要将数据与正确的信息可视化进行匹配，那么首先要回答 5 个关键问题： 我想了解我的数据集之间的什么关系？ 我是否想了解数据的分布并寻找异常值？ 我是要比较多个值还是要随时间分析单个值？ 我是否有兴趣分析数据集中的趋势？ 这种可视化是我总体数据故事的重要组成部分吗？ 考虑到这些问题（以及想好你的答案之后），我们将深入研究一些最常见的图形类型，了解他们的使用方式，就可以将它们灵活运用到数据可视化达到一个更好的效果。 1. 条形图什么时候使用条形图可视化？使用条形图的原因一般如下几种： 要比较同一类别中的两个或多个值； 想比较整个部分； 没有太多的小组（最好的小组少于 10 个）； 想了解多个相似数据集如何相互关联； 在以下情况下，请勿使用条形图： 要可视化的数据类型，只有一个是与之关联的； 想可视化展现连续性的数据； 条形图可视化的最佳做法：如果使用条形图，请参考以下方式以达到最佳可视化效果： 始终使用一致的颜色和标签，以便你更加轻松地去识别数据之间的关系； 简化 y 轴标签的长度，并且不要忘记从 0 开始， ...

可视化图形类型 1可视化不是单纯的数据展示，其真正价值是设计出可以被用户轻松理解的数据展示。数据与合适的图形结合，不仅能够让复杂的统计数字简单化、形象化，还能给用户一种视觉的享受。 1、 柱状图适用场景：以柱子的高度用来比较两个或以上数值之间的差异。优点： 人眼对高度较敏感，直观各组数据差异性， 强调 个体与个体之间的比较 。局限： 分类过多 则无法展示数据特点。相似图表：系列堆积图：系列堆积起来可以更直观看到总数和各系列分布情况。多系列柱状图：将一个维度多个指标进行比较。百分比堆积柱状图：适合展示同类别的每个变量占比和分布情况。 2、 饼图适用场景：展示数据分布情况，比如：某一时期各个行业的销售占比。优点： 直观显示各项占总体的占比，分布情况，强调 整体与个体之间的比较 。局限： 分类过多 ，则扇形越小，无法展现图表。相似图表：· 嵌套圈饼图：用于一个指标在不同维度的占比。· 跑道图：看到占比的同时，可以直观看到指标在当前维度下的排名情况。· 而圈饼图和南丁格尔图，只是普通饼图的不同表现形式。 3、 条形图适用场景：根据数量的多少绘成不同的直条，通过直条中清楚的看出 各指标的值差异 ...

基本概念什么是数据可视化？数据可视化是使用图表、图形或地图等可视元素来表示数据的过程。该过程将大量复杂的数值数据转化为更易于处理的可视化表示。数据可视化工具可自动提高视觉交流过程的准确性并提供详细信息。您可以使用可视化表示从原始数据中提取可行的见解。 数据可视化流程有哪些步骤？有效的数据可视化包含五个步骤。 定义目标您可以通过确定现有数据集可能回答的问题来定义数据可视化目标。明确的目标有助于确定以下内容的类型： 您使用的数据 您所做的分析 您用来有效传达发现的视觉内容 例如，零售商可能会设法了解哪种类型的产品包装销量最高。 收集数据数据收集涉及识别内部和外部数据来源。有大量数据集可供在线购买和使用。贵公司可能还拥有可用于分析的现有数据档案。例如，您可以收集历史销量、营销活动和产品包装数据，以找到最佳包装。 清理数据数据清理包括移除冗余数据、执行数学运算以进行进一步分析，或者筛选和转换数据以满足质询条件。例如，您可以从假日月份和营销活动之后删除销量数据，以确定不同包装类型的平均销售额。 选择数据视觉效果您可以从几种不同的图表类型中进行选择，以实现高效的视觉发现。数据点与要传达的见解之 ...

数据报表展现规范基本原则准确性数据报表所有展现数据要精准（比如合计和分项需要相加相同）。 可读性数据报表中的数字的可读性，能够快速识别数据的大小。 可交互性数据展现的信息有限，且页面尽量简洁，需要交互性去获取更多信息。可交互性也在于信息维度的切换，下钻，自定义等等。 设计流程开发前 要解决什么问题：考虑要展现什么数据和怎么展现数据之前要思考这个报表具体要解决什么问题。 定义数据指标：通过要解决的问题出发，看通过哪些指标的展现，统计，计算，对比等能够解决问题。 设计数据展现形式：可以报表，可以是图形，可以是看板等。 开发过程中 数据简洁明了：突出关键数据，页面整洁，避免信息过载。可读性要高，千分位，百分号，对比形式等如何展现。整体对齐一致，保证页面干净。 排序筛选：对关键指标可排序，检索方式是否快捷简单易操作。 差异化：支持不同用户的页面自定义，可配置具体指标展现。不同人群的展现形式也可不同。 响应式：考虑屏幕大小的兼容性，屏幕大小变化时候的展现保持不错乱等。 合理布局：将主要指标放在明显位置，尽量保证有效展现的最大化。数据过大时候的分页设置及滚动策略等。 可交互性：附加信息的交互展现 ...

前端代码规范代码规范 config 中的常量拼写，推荐全大写，用短下划线分隔。如 APP_LIST enums 中的常量拼写，推荐格式大驼峰。如 AppKeys enums.ts 文件中，提取业务公共枚举，各业务再引入枚举去定义其它 config，减少如上冗余，例： 123456789const AppTypeEnum = { IQIYI: 1, JISU: 85,};const DeliverTypeEnum = { DOWNLOAD: 1, PULL: 2,}; service 中不要引用 store, 需要读取相关数据，建议调用方(composition)使用参数传入。需要更新相关数据，也在各调用方(composition)进行单独更新。 domain 中不要引用 store。 数据处理的 formatter 对象不要写在 domain 文件里。 建议写在 service 文件里。 domain 中不要引用 service。如果需要相关的数据处理，可以考察数据处理函数是否与业务有关，从而决定放在 utils 或 service ...