成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

滾蛋吧！constant 君

ideaa / 3074人閱讀

摘要：引入，有效解決事件分發(fā)時(shí)，事件類型的一致性以及清晰邏輯性。其實(shí)，細(xì)心思考，不難發(fā)現(xiàn)，隨著項(xiàng)目增大。目錄將會(huì)隨著數(shù)據(jù)處理事件迅速膨脹。大家一直維護(hù)著這個(gè)事件命名機(jī)制，身心疲憊有木有。其實(shí)，隨著項(xiàng)目增大，獨(dú)立出來的也會(huì)導(dǎo)致非常麻煩的維護(hù)問題。

作者：Jogis
原文鏈接：https://github.com/yesvods/Blog/issues/4
轉(zhuǎn)載請(qǐng)注明原文鏈接以及作者信息

前言

事情經(jīng)過是這樣的，某個(gè)陽光明媚的晚上，跟大多數(shù)人一樣，在MacBook前靜靜地寫著redux/flux“優(yōu)美”的詩句。劇情急轉(zhuǎn)直下：

└── constants
    ├── comA.js
    ├── comB.js
    ├── comC.js
    ├── comD.js
    ├── comE.js
    └── index.js

index.js看起來是這樣的：

import * from "./a";
import * from "./b";
...

好像沒什么不對(duì)勁，然后看了一下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又寫重復(fù)了。于是開始漫長的改constant之旅：

名字改成 COMB_HIDE_ITEM

reducers/comB.js改幾個(gè)store/reducer

actions/comB.js改幾個(gè)action

慢著....
好像comC,comD,comE都有這個(gè)constant

問題由來

咳咳，膝蓋中箭的有木有，站出來！其實(shí)constant這個(gè)常量在react界最先被flux框架采用，再后來著名的redux（star數(shù)已經(jīng)超過flux），也采用同樣方式定義action與reducer之間的事件分發(fā)機(jī)制。引入constant，有效解決事件分發(fā)時(shí)，事件類型的一致性以及清晰邏輯性。

constant的悲慘經(jīng)歷

其實(shí)一直以來，業(yè)界津津樂道的是react的vm,flux/redux的狀態(tài)管理機(jī)制，webpack開發(fā)技巧以及插件使用，react-router入門 etc.

constant如此重要的事件結(jié)構(gòu)機(jī)制因?yàn)榭蓪⑿蕴?，往往被大家忽略。其?shí)，細(xì)心思考，不難發(fā)現(xiàn)，隨著項(xiàng)目增大。constants目錄將會(huì)隨著數(shù)據(jù)處理事件迅速膨脹。大家一直維護(hù)著這個(gè)事件命名機(jī)制，身心疲憊有木有。

constant發(fā)展 constant由一開始的flux風(fēng)格，配合facebook插件庫 
export KeyMirror({
    ADD_TODO: null,
    COMPLETE_TODO: null,
    SET_VISIBILITY_FILTER: null
})
再到小項(xiàng)目維護(hù)的constant，非常容易導(dǎo)致重復(fù) 
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的經(jīng)歷，大家可以發(fā)現(xiàn)。其實(shí)，constant隨著項(xiàng)目增大，獨(dú)立出來的constants也會(huì)導(dǎo)致非常麻煩的維護(hù)問題。

constant的進(jìn)化

類似constant-mirror、flux-constants的庫都耐不住寂寞了，站出來聲張正義。
但是，這些庫其中一個(gè)致命共同點(diǎn)：

我們都依舊需要維護(hù)一套constants

不同組件使用的constants依舊有可能會(huì)因?yàn)橹貜?fù)導(dǎo)致不可預(yù)知的問題

react-constant 簡介

就一句話：

Fuck Off constants.js

我們?cè)僖膊恍枰ゾS護(hù)任何的與constant有關(guān)的文件，也不需要到處去找constants/comA.js、reducer/comA.js、action/comA.js一個(gè)個(gè)去改命名。

把所有constant相關(guān)文件去掉，react-constant為您打理得井井有條

自定義命名空間的constant，comA的HIDE_ITEM和comB的HIDE_ITEM可不一樣，自家用自家的，互不侵犯。

自動(dòng)生成偽uuid格式的constant，不用再為生成格式打個(gè)null

2kb大?。╩inified），任何地方的貼心小助手

單元測試，100% coverage

使用過程相當(dāng)簡單，沒有任何多余的代碼 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
  }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49675.html

相關(guān)文章

  • 滾蛋吧！constant 君

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

    huangjinnan 評(píng)論0 收藏0

  • 圖表君碎碎念-- 填坑

    摘要：，之前在介紹的時(shí)候圖表君還是留了問題。下邊說幾句非技術(shù)的話題，技術(shù)的道路做久了，都會(huì)考慮到技術(shù)路線的問題，作為一個(gè)年輕人圖表君并沒有太多的經(jīng)驗(yàn)，但是上周看到了池建強(qiáng)老師的一篇文章，說的挺好，在這里分享給大家。 大家周末好，天氣這是越來越冷了，冬季到來了。西安冬日的傳統(tǒng)霧霾又上演了，不過最近又限行了，希望能有點(diǎn)用處吧。好了今天不說什么新的東西，把之前的坑給填一填吧。 上篇文章的最后給大家...

    goji 評(píng)論0 收藏0

  • 圖表君聊Docker-開篇

    摘要：圖表君聊開篇今天是圖表君聊的第一篇，為什么會(huì)有這個(gè)系列呢容器技術(shù)出現(xiàn)已經(jīng)有一段時(shí)間了，之前零零星星的也看過一些文章，圖表君的項(xiàng)目上也在使用。至于，圖表君沒試過，官網(wǎng)有的教程，大家可以參考。上的官網(wǎng)，安裝，然后跟著圖表君一起學(xué)習(xí)吧。 圖表君聊Docker-開篇 今天是圖表君聊Docker的第一篇，為什么會(huì)有這個(gè)系列呢？容器技術(shù)Docker出現(xiàn)已經(jīng)有一段時(shí)間了，之前零零星星的也看過一些文章...

    z2xy 評(píng)論0 收藏0

  • 「前端早讀君006」移動(dòng)開發(fā)必備：那些玩轉(zhuǎn)H5的小技巧

    摘要：今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。三動(dòng)畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動(dòng)畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識(shí)，度過擠地鐵坐公交的時(shí)光 今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。 文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗(yàn)demoshowImg(https://segmentfault.co...

    LittleLiByte 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<