滚蛋吧!constant 君
作者:互联网
作者:Jogis
原文链接:https://github.com/yesvods/Blog/issues/4
转载请注明原文链接以及作者信息
前言
事情经过是这样的,某个阳光明媚的晚上,跟大多数人一样,在MacBook前静静地写着redux/flux“优美”的诗句。剧情急转直下:
└── constants
├── comA.js
├── comB.js
├── comC.js
├── comD.js
├── comE.js
└── index.js
index.js看起来是这样的:
import * from './a';
import * from './b';
...
好像没什么不对劲,然后看了一下a.js和b.js..
//a.js
export const OPEN_SIDEBAR = "OPEN_SIDEBAR";
export const CLOSE_SIDEBAR = "CLOSE_SIDEBAR";
export const HIDE_ITEM = "HIDE_ITEM";
//b.js
export const TOGGLE_LIST = "TOGGLE_LIST";
export const CHANGE_WIDTH = "CHANGE_WIDTH";
export const HIDE_ITEM = "HIDE_ITEM";
。。
。。。
。。。。
喵的,不同组件的constant又写重复了。于是开始漫长的改constant之旅:
名字改成
COMB_HIDE_ITEM
reducers/comB.js改几个store/reducer
actions/comB.js改几个action
慢着....
好像comC,comD,comE都有这个constant
问题由来
咳咳,膝盖中箭的有木有,站出来!其实constant这个常量在react界最先被flux框架采用,再后来著名的redux(star数已经超过flux),也采用同样方式定义action与reducer之间的事件分发机制。引入constant,有效解决事件分发时,事件类型的一致性以及清晰逻辑性。
constant的悲惨经历
其实一直以来,业界津津乐道的是react的vm
,flux/redux的状态管理机制
,webpack开发技巧以及插件使用
,react-router入门
etc.
constant如此重要的事件结构机制因为可将性太低,往往被大家忽略。其实,细心思考,不难发现,随着项目增大。constants目录将会随着数据处理事件迅速膨胀。大家一直维护着这个事件命名机制,身心疲惫有木有。
constant发展
constant由一开始的flux风格,配合facebook插件库
export KeyMirror({
ADD_TODO: null,
COMPLETE_TODO: null,
SET_VISIBILITY_FILTER: null
})
再到小项目维护的constant,非常容易导致重复
export const ADD_TODO = 'ADD_TODO'
export const COMPLETE_TODO = 'COMPLETE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'
引用redux文档的原话:
Types should typically be defined as string constants.
Once your app is large enough,
you may want to move them into a separate module.
看到刚刚LZ的经历,大家可以发现。其实,constant随着项目增大,独立出来的constants也会导致非常麻烦的维护问题。
constant的进化
类似constant-mirror、flux-constants的库都耐不住寂寞了,站出来声张正义。
但是,这些库其中一个致命共同点:
我们都依旧需要维护一套constants
不同组件使用的constants依旧有可能会因为重复导致不可预知的问题
react-constant
简介
就一句话:
Fuck Off constants.js
我们再也不需要去维护任何的与constant有关的文件,也不需要到处去找constants/comA.js
、reducer/comA.js
、action/comA.js
一个个去改命名。
把所有constant相关文件去掉,react-constant为您打理得井井有条
自定义命名空间的constant,comA的
HIDE_ITEM
和comB的HIDE_ITEM
可不一样,自家用自家的,互不侵犯。自动生成伪uuid格式的constant,不用再为生成格式打个null
2kb大小(minified),任何地方的贴心小助手
单元测试,100% coverage
使用过程相当简单,没有任何多余的代码
Usage
Install
npm install react-constant --save
Import & Instance
Webpack/Browserify
//ES5 version
var Constant = require('react-constant').Constant;
var constants = Constant('mynamespace');
//ES6 version
import { Constant } from 'react-constant';
let constants = Constant('mynamespace');
browser
<script src="dist/constant.min.js"></script>
Just do it
reducer.js
function reducer(state, action){
switch(action.type){
case constants.of('ON'):
//TODO
break;
case constants.of('OFF'):
//TODO
break;
default:
return state;
}
}
action.js
function toggleLight(flag){
return {
type: constants.ON,
flag: flag
}
}
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hib12jcbkkj
标签:const,滚蛋,js,export,constant,TODO,constants 来源: https://www.cnblogs.com/jlfw/p/12664465.html