滚蛋吧！constant 君

huangjinnan 发布于2019-08-19 17:05 / 2017人阅读

摘要：引入，有效解决事件分发时，事件类型的一致性以及清晰逻辑性。其实，细心思考，不难发现，随着项目增大。目录将会随着数据处理事件迅速膨胀。大家一直维护着这个事件命名机制，身心疲惫有木有。其实，随着项目增大，独立出来的也会导致非常麻烦的维护问题。

作者：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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78188.html

滚蛋吧！constant 君

摘要：引入，有效解决事件分发时，事件类型的一致性以及清晰逻辑性。其实，细心思考，不难发现，随着项目增大。目录将会随着数据处理事件迅速膨胀。大家一直维护着这个事件命名机制，身心疲惫有木有。其实，随着项目增大，独立出来的也会导致非常麻烦的维护问题。作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/4转载请注明原文链接以及作者信息前言事情...

ideaa 2019-08-01 14:57 评论0 收藏0
图表君碎碎念-- 填坑

摘要：，之前在介绍的时候图表君还是留了问题。下边说几句非技术的话题，技术的道路做久了，都会考虑到技术路线的问题，作为一个年轻人图表君并没有太多的经验，但是上周看到了池建强老师的一篇文章，说的挺好，在这里分享给大家。大家周末好，天气这是越来越冷了，冬季到来了。西安冬日的传统雾霾又上演了，不过最近又限行了，希望能有点用处吧。好了今天不说什么新的东西，把之前的坑给填一填吧。上篇文章的最后给大家...

goji 2019-08-21 14:43 评论0 收藏0
图表君聊Docker-开篇

摘要：图表君聊开篇今天是图表君聊的第一篇，为什么会有这个系列呢容器技术出现已经有一段时间了，之前零零星星的也看过一些文章，图表君的项目上也在使用。至于，图表君没试过，官网有的教程，大家可以参考。上的官网，安装，然后跟着图表君一起学习吧。图表君聊Docker-开篇今天是图表君聊Docker的第一篇，为什么会有这个系列呢？容器技术Docker出现已经有一段时间了，之前零零星星的也看过一些文章...

z2xy 2019-06-28 15:23 评论0 收藏0
「前端早读君006」移动开发必备：那些玩转H5的小技巧

摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光今日励志语录有志者自有千计万计，无志者只感千难万难。文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

LittleLiByte 2019-08-30 15:55 评论0 收藏0