每周分享会系统梳理过去一周我看的的值得记录和分享的技术、工具、文章/段子,致力于为收藏夹“瘦身”!

👇 内容速览 👇

  • 如何在 Scss 中书写媒体查询
  • 响应mousedown而不是click
  • stopImmediatePropagationstopPropagation
  • VueJS 源码解析教程
  • ...

技术

1、Scss 中@media的推荐写法

theme-ad主题中,针对媒体查询采用了这种写法,下面是一个简单的 demo:

.demo {
  $moblie-width: 768px !default;

  // 移动端样式
  @media screen and (max-width: $moblie-width) {
    padding: 0 20px;
  }

  // PC端样式
  @media screen and (min-width: $moblie-width + 1) {
    padding: 0 30px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2、onMouseDown下的不丢失光标应用

这个需求是因为在开发富文本组件时候,上方有一个功能栏,用户在打字输入内容时候,如果想进行切换字号等操作需要点击功能栏按钮。

为了让光标不丢失,用户体验更流畅,需要响应mousedown事件,而不是click事件。做法也很简单,使用event.preventDefault()禁止默认行为即可。

3、stopImmediatePropagationstopPropagation的区别

  • stopPropagation:阻止传递
  • stopImmediatePropagation:阻止传递 + 当前元素剩下的同类事件的监听函数不执行

下面是一个简单的 demo:

const p = document.querySelector("p");

// 会执行
p.addEventListener(
  "click",
  event => {
    console.log("可以执行 1 ");
  },
  false
);

// 会执行
p.addEventListener(
  "click",
  event => {
    console.log("可以执行 2");
    event.stopImmediatePropagation();
  },
  false
);

// 不会执行
p.addEventListener(
  "click",
  event => {
    p.style.background = "#f00";
  },
  false
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4、react-router路由跳转的 3 种方法

在项目的组件中,我常用的方法是:

  • <Link>标签跳转
  • this.props.history编程式跳转:如果组件的props没有被挂载history,那么可以使用react-router提供的withRouter来包裹组件,然后再对外暴露。

5、前端异常监控解决方案研究

6、CSS module 的用法

工具

1、CSS 在线格式化

2、CSS 在线转 Scss

3、大前端时代你的 VSCode 插件

4、图形设计软件

用来绘制流程图、思维导图的在线网站

学习资源

1、大佬们在“语雀”上推荐的书单列表

2、Vuejs 源码分析:

  • https://github.com/answershuto/learnVue
  • https://github.com/Ma63d/vue-analysis

3、ElementUI 非官方源码分析

4、一个聚集了一些超级酷炫的 CSS 样式的代码库