b 12
,
r 62
,
❤ 正在询问中

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;
    }
  }
}
  1. 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. 今天发现了 黑客派 这个社区,并且尝试了推送文章到那里。
  2. 发现了 Ajax-hook 这个库可以很方便的对请求做一些骚操作

2020-4-26

  1. 今天又被 npm 包的 .d.ts 报错搞得心态有点炸,解决方案是配置 tsconfig.json 的 "skipLibCheck": true 选项,之前也遇到过就是不长记性
  2. 成功的实现了和黑客派的文章推送

2020-4-28

  1. 必应每日一图 图片地址 实现方式如下(使用的 nest 框架)

    // controller.ts
    @Get('redirect_to_bing_daily_picture_address')
    @Redirect('https://cn.bing.com', 302)
    async 重定向到必应每日图片地址() {
      /** [nest 重定向文档](https://docs.nestjs.cn/6/controllers?id=重定向) */
      return { url: await this.utilService.获取必应每日图纸地址() };
    }
    // utilService.ts
    async 获取必应每日图纸地址() {
      const base = 'https://cn.bing.com';
      const res = await Axios({
        url: base + '/HPImageArchive.aspx?format=js&idx=0&n=1',
        method: 'GET',
        responseType: 'json',
      });
      return base + res.data.images[0].url;
    }
    

by 崮生 from 崮生 • 一些随笔 🎨,欢迎 赞助本文
本文欢迎分享与聚合,全文转载未经授权( 联系我)不许可。