Skip to content

Instantly share code, notes, and snippets.

😀
Coding!

一波不是一波 riskers

😀
Coding!
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 Aug 1, 2019
从 prettier 看前端工程化
View README.md

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


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

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

@riskers
riskers / README.md
Last active Jul 25, 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 / HOC.md
Last active May 27, 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 / cookie-session vs JWT.md
Last active May 24, 2019
cookie-session vs JWT vs oauth
View cookie-session vs JWT.md
@riskers
riskers / readme.md
Last active Apr 24, 2019
check node_modules and yarn.lock is fit
View readme.md

yarn.lock 与 node_modules 保持一致

  • yarn add xxx 添加新的 package,同时更新 package.jsonyarn.lock
  • yarn upgrade xxx 更新 package,同时更新 package.jsonyarn.lock

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

node_modules 与 yarn.lock 保持一致

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

@riskers
riskers / immutablejs.md
Last active Apr 23, 2019
reselect 和 immutablejs 学习说明
View immutablejs.md

在 reducer 中,都是返回一个新对象,否则组件是不会更新 ui 的。而返回新对象,可以:

  • Object.assign:比较 hack,每次新生成一个对象
  • ...state
  • immutable.js
@riskers
riskers / DefinePlugin.md
Last active Apr 18, 2019
webpack 应用解析
View DefinePlugin.md

DefinePlugin 定义全局变量

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

// webpak.config.js
new webpack.DefinePlugin({
    'ENV': JSON.stringify(process.env.ENV)
})
@riskers
riskers / README.md
Last active Apr 9, 2019
前后端分离
View README.md

simple

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

web -> nginx -> Java


@riskers
riskers / .dockerignore
Last active Mar 11, 2019
eggjs Dockerfile + gitlab ci
View .dockerignore
app/**/*.js
test/**/*.js
config/**/*.js
app/**/*.map
test/**/*.map
config/**/*.map
@riskers
riskers / git-flow.md
Created Apr 12, 2017 — forked from yesmeck/git-flow.md
Git 开发流程
View git-flow.md

Git 协作流程

master 分支

master 永远处于稳定状态,这个分支代码可以随时用来部署。不允许在该分支直接提交代码。

develop 分支

开发分支,包含了项目最新的功能和代码,所有开发都在 develop 上进行。一般情况下小的修改直接在这个分支上提交代码。

You can’t perform that action at this time.