2019-03-15 | 每周分享 | UNLOCK

每周分享第 3 期

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

👇 内容速览 👇

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

技术

1、Scss中@media的推荐写法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.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;
}
}

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

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

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

3、stopImmediatePropagationstopPropagation的区别

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

下面是一个简单的demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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)

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源码分析:

3、ElementUI非官方源码分析

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

请针对 Disqus 开启代理