4 月

4 月

• pubdate:2020-04-08 15:27:33
• tags:总结,日记

2020-4-1

1. 昨天那个配置项的实现过于复杂了，今天将她优化了一下

   1. definition.ts 定义了类型和一个查找元素的方法

export enum value_type {
  "string",
  "img",
  /** 嵌套 config_group 这个难度高一点，可以以后实现 */
  "config_group",
}

type Config_base = { title: string; description: string };

export type Config_item =
  | (Config_base & {
      type: value_type.string;
      value: string;
    })
  | (Config_base & {
      type: value_type.config_group;
      value: Config_item[];
    });

/** 根据路径查找元素 */
export function find_item(path: string, json: Config_item[] | Config_item): Config_item | undefined | Error {
  const path_list = path.split(" ");
  const cur_selector = path_list.shift();
  if (!cur_selector) {
    return undefined;
  }

  if (Array.isArray(json)) {
    if (cur_selector.startsWith("#")) {
      // 根据 title 查询
      const title = cur_selector.replace("#", "");

      const cur = json.find((el) => el.title === title);
      if (path_list.length === 0) {
        return cur;
      } else {
        return find_item(path_list.join(" "), cur!);
      }
    } else {
      return undefined;
    }
  } else {
    if (/** 嵌套类型 */ [value_type.config_group].includes(json.type)) {
      if ((json.type = value_type.config_group)) {
        return find_item([cur_selector, ...path_list].join(" "), json.value);
      } else {
        return new Error("新的嵌套类型要写新的处理方法");
      }
    } else if (json.type === value_type.string) {
      if (path_list.length === 0) {
        return json;
      } else {
        return new Error("路径错误");
      }
    } else {
      // 有新的类型和逻辑应当在这里实现
      return undefined;
    }
  }
}

2. config_item.vue 配置项的组件

<template>
  <div class="c-item">
    <div :class="{ 'c-title': config_item.type == value_type.config_group }">{{ config_item.title }}</div>
    <div class="c-des">{{ config_item.description }}</div>

    <div>
      <div v-if="config_item.type == value_type.config_group">
        <configItem v-model="item.value" :config_item="item" v-for="(item, index) in config_item.value" :key="index" />
      </div>
      <input v-model="config_item.value" v-else-if="config_item.type == value_type.string" type="text" />
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";

import { Config_item, value_type } from "../definition";
export default Vue.extend({
  name: "configItem",
  props: {
    config_item: {
      type: Object as () => Config_item,
    },
    value: [Object, String, Number, Array],
  },
  model: {
    prop: "value",
    event: "value",
  },
  data() {
    return {
      value_type,
    };
  },
});
</script>
<style scope>
.c-item {
  margin-top: 0.258rem;
  margin-left: 1rem;
}
.c-title {
  font-size: 1.3rem;
  font-weight: 600;
}
.c-des {
  color: gray;
}
</style>

3.发现 typescript Playground 出 v3 版了 Playground V3 Playground V3 前面那个测试版地址过期了 里面还有许多帮助理解的例子

2020-4-6

1. 使用负 margin 来实现列表间距相等 例如 item:not(:first-child){margin-top:-35px}
2. 发现了 you-dont-know-js 这本书，打算读完

2020-4-7

1. es2015 中规定了变量和方法可以从句法位置推断匿名函数的名称，所以以前认为的匿名函数现在可能推断出名字

2020-4-8

1. npm 从 git 安装包，npm i git+ssh://git@git.bool.link:bool_dev_team/component-type.git

2. vetur 自定义组件的类型声明 官方文档的只言片语 可参见 ElementUI 这里的例子 ,这个必须作为包被安装才能生效，在当前项目中写是享受不到这个提示的

3. 向前兼容和向后兼容「其实当初应该翻译成”回溯兼容“(backward compatibility)和”前瞻兼容“(forward compatibility)就不会出现理解问题了。」

2020-4-9

1. 发现了 moment.js

2020-4-10

1. 今天使用 moment.js 处理了很多逻辑，这个库处理时间很好用。
2. 想到一个点子：复制浏览器的 har 到网页，网页解析数据
   1. 生成比较好的展现格式可以复制给后端使用
   2. 可以对比 har 高亮差异数据

2020-4-11

1. 了解 rog2 游戏手机 和黑鲨游戏 手机
2. uni-app 的 url 传参貌似还是支持挺长的字符串的，但究竟适配性如何没有详细了解，使用的时候还是要节约一些空间

2020-4-15

const list = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

1. uni-app 微信小程序 v-for 如果嵌套的话变量名不能重复，里层的无法覆盖外层同名变量，两个 index 生效的只有第一层的 index ,这会导致奇怪的事情 例如 数据是如上 的 list 然后给每个生成的元素一个点击事件打印自身，无论如何打印的值也只有 1 5 9 这就是因为 index 一直采用的是第一层循环的

2020-4-17

/* 罪魁祸首 */
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/** 解决方案 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -moz-appearance: none;
  -webkit-appearance: none;
}

1. tailwind.css 对于小程序按钮样式的影响，前两天发现小程序按钮的默认样式一直去不掉，今天才发现是因为 tailwind.css 导致的。 他有一段上面那样的 css 采用了系统自定义的按钮样式导致你怎么覆盖 button::after 都没有用

2020-4-19

1. 写了一个让百度系的一些图标变灰的 脚本
2. word-break: break-all; 这个 css 属性可以正确截断长文本（单词）

2020-4-21

1. 最近 vscode 总是报错 Couldn't download IntelliCode model. Please check your network connectivity or firewall settings. 我去网上查了查一开始以为是因为网络问题，后来打开 vscode 的输出仔细看了看是因为 vscode 没有权限打开一个 model.json 的文件。所以使用管理员打开 vscode 就 ok 了
2. css 元素靠底 主要靠父元素设置 display:flex;flex-direction:column; 需要置底的元素再设置 margin-top:auto
3. 发现了一个 调色神器

2020-4-22

1. 昨天发现界面上的圆不够圆，当时猜测是渲染方式的问题，今天从小到大画了一些圆 发现偶数大小的圆最容易出现这种情况，奇数圆则好很多

2020-4-24

1. 以前从网上找过激活码用来激活 office 前一段时间买了个正版的，但生效的还是之前的 2016 专业版 当时想着能用也就没管，但今天用不了了，最后使用 office 疑难解答 成功的切换到了 2019 的正版。

2020-4-25

1. 今天发现了 黑客派 这个社区，并且尝试了推送文章到那里。

2020-4-26

1. 今天又被 npm 包的 .d.ts 报错搞得心态有点炸，解决方案是配置 tsconfig.json 的 "skipLibCheck": true 选项，之前也遇到过就是不长记性

测试 黑客派 的推送