滾蛋吧！constant 君

ideaa 發布于2019-08-01 14:57 / 3065人閱讀

摘要：引入，有效解決事件分發時，事件類型的一致性以及清晰邏輯性。其實，細心思考，不難發現，隨著項目增大。目錄將會隨著數據處理事件迅速膨脹。大家一直維護著這個事件命名機制，身心疲憊有木有。其實，隨著項目增大，獨立出來的也會導致非常麻煩的維護問題。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49675.html

滾蛋吧！constant 君

摘要：引入，有效解決事件分發時，事件類型的一致性以及清晰邏輯性。其實，細心思考，不難發現，隨著項目增大。目錄將會隨著數據處理事件迅速膨脹。大家一直維護著這個事件命名機制，身心疲憊有木有。其實，隨著項目增大，獨立出來的也會導致非常麻煩的維護問題。作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/4轉載請注明原文鏈接以及作者信息前言事情...

huangjinnan 2019-08-19 17:05 評論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