Skip to content

Instantly share code, notes, and snippets.

一波不是一波 riskers

Block or report user

Report or block riskers

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@riskers
riskers / README.md
Last active Oct 24, 2019
在 VSCode 中飞快使用 Typescript
View README.md

VSCode 中写 TS 使用的快捷键

我已经习惯使用 IDEA 写 Java,所以在 VSCode 里写 Typescript 也想要 rename 、go to defined 这些功能。这些功能在最开始写 JavaScript 的时候还真的没用过,每次都是全局搜索,很 low ~

基本参考这篇文章 https://johnpapa.net/refactoring-with-visual-studio-code/ 然后按照自己的习惯改改快捷键就行了。

常用功能有(快捷键是我自己设置的):

  • format: cmd + shift + l
@riskers
riskers / .tmux.conf
Last active Oct 21, 2019
tmux 配置、快捷键
View .tmux.conf
# unbind some default keybindings
unbind C-b
# set prefix key to ctrl-a
set -g prefix C-a
# lower command delay
set -sg escape-time 1
# start first window and pane at 1, not zero
@riskers
riskers / HOC.md
Last active Oct 15, 2019
react HOC / render props / hook
View HOC.md

高阶组件:接收函数作为输入,或者输出另一个函数的一类函数,被称作高阶函数。对于高阶组件,它描述的便是接受React组件作为输入,输出一个新的React组件的组件。即高阶组件通过包裹(wrapped)被传入的React组件,经过一系列处理,最终返回一个相对增强(enhanced)的React组件,供其他组件调用。

什么时候使用高阶组件:在React开发过程中,发现有很多情况下,组件需要被"增强",比如说给组件添加或者修改一些特定的props,一些权限的管理,或者一些其他的优化之类的。而如果这个功能是针对多个组件的,同时每一个组件都写一套相同的代码,明显显得不是很明智,所以就可以考虑使用HOC。

react-redux 的 connect 方法就是一个 HOC ,他获取 wrappedComponent ,在 connect 中给 wrappedComponent 添加需要的 props。

最基本的一个 HOC

// define
@riskers
riskers / main.md
Last active Oct 14, 2019
关于 websocket 心跳的一些记录
View main.md

长连接为什么要保持心跳?

websocket心跳是为了让 client 告诉 server 『我还活着,没有掉线』而存在的,否则 server 可能会断掉连接。

国内移动无线网络运营商在链路上一段时间内没有数据通讯后, 会淘汰NAT表中的对应项, 造成链路中断。而国内的运营商一般NAT超时的时间为5分钟,所以通常我们心跳设置的时间间隔为3-5分钟。

一般是 client send ping ,server 返回 pong 保持心跳。

var heartCheck = {
@riskers
riskers / redux-combine.dart
Last active Oct 14, 2019
flutter redux demo
View redux-combine.dart
// https://github-riskers-blog.oss-cn-qingdao.aliyuncs.com/20190117210031.gif
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:redux_thunk/redux_thunk.dart';
import 'package:flutter_redux/flutter_redux.dart';
class AppState {
final int count;
final int clickCount;
@riskers
riskers / Column.dart
Last active Sep 21, 2019
Flutter Widget Code
View Column.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'Fultter',
@riskers
riskers / application in react.md
Last active Sep 20, 2019
throttle and debounce
View application in react.md

重点是把同步的和要 debounce/throttle 的异步函数分开,并且在 constructor 阶段就把 debounce/throttle 部分做好。

import debounce from 'lodash/debounce'

class T extends React.Component {
  constructor(props) {
    super(props)
    this.deOnChange = debounce(this.deOnChange, 300)
  }
View buffer channel and unbuffer channel.md

无缓冲 channel

在接收前没有能力保存任何值的通道

这种类型的 channel 要求发送 goroutine 和接收 goroutine 同时准备好,才能发送和接收。如果两个 goroutine 没有同时准备好,channel 会导致先执行发送或接收操作的 goroutine 阻塞。 这种对 channel 进行发送和接收的行为本身是同步的,其中任意一个操作都无法离开另一个存在。

对于无缓冲的信道来说,我们默认信道的发消息(send)和收消息(receive)都是阻塞(block)的。换句话来说,无缓冲的信道在收消息和发消息的时候,goroutine都处于挂起状态。除非另一端准备好,否则goroutine无法继续往下执行。

缓冲 channel

@riskers
riskers / CAS vs oAuth.md
Last active Sep 9, 2019
cookie-session vs JWT vs oauth vs CAS
View CAS vs oAuth.md

都可以做 SSO

  • CAS: 多个系统只需登录一次,无需重复登录
  • oAuth: 第三方系统访问主系统资源,用户无需将在主系统的账号告知第三方,只需通过主系统的授权,第三方就可使用主系统的资源(如:APP1需使用微信支付,微信支付会提示用户是否授权,用户授权后,APP1就可使用微信支付功能了)
@riskers
riskers / README.md
Last active Aug 1, 2019
从 prettier 看前端工程化
View README.md

prettier 是更强大的 editorconfig ,读取根目录的 .editorconfig.prettierrc 去执行格式化代码的命令。


从之前的 editorconfig + ESLint + husky 来组成的前端代码风格的实践因为 TypeScript 的到来,前端的工程体系又加入了 TSLint 。

而 TSLint 远远不如 ESLint,很多 ESLint 上有的比如 = 两边的空格数量在 TSLint 上是不检查的。这时候 prettier 又出来了,它仅仅做 Lint 里代码风格检查的那一部分,至于代码质量检查它是不管的:

You can’t perform that action at this time.