riskers

DefinePlugin 定义全局变量

可以根据测试和线上注入全局变量来动态控制逻辑

// webpak.config.js
new webpack.DefinePlugin({
    'ENV': JSON.stringify(process.env.ENV)
})

riskers

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

Promise

基本结构

// 创造 Promise 实例

//Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
var promise = new Promise(function(resolve,reject){	
	//... some code

riskers

simple

• 开发: devServer || CORS
• 部署: nginx

---

web -> nginx -> Java

---

riskers

yarn.lock 与 node_modules 保持一致

• yarn add xxx 添加新的 package，同时更新 package.json、yarn.lock
• yarn upgrade xxx 更新 package，同时更新 package.json、yarn.lock

这样操作过后，我们把 yarn.lock push 到代码仓库中

node_modules 与 yarn.lock 保持一致

团队使用 Yarn 来管理模块依赖，这样只能保证大家的 yarn.lock 是一致的，但不能保证大家的 node_modules 是一致的（因为 node_modules 并不在版本库里）。要是有人升级了模块，别人拿到了新的 yarn.lock ，但是本地的 node_modules 里的模块仍然是旧的。

riskers

// es6
export var foo = 'foo';
setTimeout(() => foo = 'baz', 500);

// main
import {foo} from './t.js';
console.log(foo); // foo
setTimeout(() => console.log(foo), 500); // baz

riskers

// 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

Source : Learn to combine RxJs sequences with super intuitive interactive diagrams

Legend

Merge

Concat

riskers

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

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

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

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

最基本的一个 HOC

// define