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

資訊專欄INFORMATION COLUMN

Redux 源碼解析 - Redux 的架構(gòu)

lylwyy2016 / 1618人閱讀

摘要：要應(yīng)用于生成環(huán)境必須要用或者，是的進(jìn)化產(chǎn)物，優(yōu)于。我們來看一下他的源碼，從而學(xué)一些東西。里面都是一個一個的模塊，一共個模塊，都導(dǎo)出了一些的方法，比如這個號函數(shù)，一個匿名函數(shù)，然后導(dǎo)出他寫的方法。整體架構(gòu)就是這樣的。主要用于壓縮的時候。

redux很小的一個框架，是從flux演變過來的，盡管只有775行，但是它的功能很重要。react要應(yīng)用于生成環(huán)境必須要用flux或者redux，redux是flux的進(jìn)化產(chǎn)物，優(yōu)于flux。

而且redux還很小。那么redux是怎么做到單項數(shù)據(jù)流和一些讓人驚奇的特性的呢。我們來看一下他的源碼，從而學(xué)一些東西。

redux里面都是一個一個的模塊，一共9個模塊，都導(dǎo)出了一些redux的方法，比如這個9號函數(shù)，一個匿名函數(shù)，然后導(dǎo)出他寫的方法。9里面就這一個方法。英文注釋也蠻清楚的，檢測類對象的方法。

然后redux開始呢，定義了一個導(dǎo)出模塊和緩存模塊的方法：

上面這個函數(shù)用模塊id緩存一個模塊，然后每個模塊都傳入3個參數(shù)，module, exports, __webpack_require__，__webpack_require__傳入了就可以用了，然后就用這個加載別的模塊導(dǎo)出的方法用。就像這樣：

需要的方法就這樣加載就行。

然后把模塊等一些信息和緩存信息都放到這個函數(shù)上，返回一個module.exports。

整體架構(gòu)就是這樣的。重點寫在模塊1-9里面。包含redux的方法。

 (function webpackUniversalModuleDefinition(root, factory) {
  //...
  //這里是判斷amd和cmd環(huán)境
})(this,function(){
  return (function(modules) { 
      function __webpack_require__(moduleId) {} //這是那個加載函數(shù)
      //...
    })
    ([function(){
      //..模塊0
    },function(){
      //...模塊1
    }])
})

開始的webpackUniversalModuleDefinition是這樣。

if(typeof exports === "object" && typeof module === "object")
        module.exports = factory();
    else if(typeof define === "function" && define.amd)
        define([], factory);
    else if(typeof exports === "object")
        exports["Redux"] = factory();
    else
        root["Redux"] = factory();

redux會檢測使用環(huán)境是amd環(huán)境還是cmd環(huán)境。實在不行就把方法放到window上。

redux把它所有的匿名函數(shù)(里面包含redux的所有方法)都寫在一個數(shù)組里，就像這樣

[function(){},function(){},...]

大家也看到了，每一個函數(shù)都是一個模塊，比如剛才的模塊9，匿名函數(shù)，加載就導(dǎo)出自身的方法。

這是0號函數(shù)

function(module, exports, __webpack_require__) {

    "use strict";

    exports.__esModule = true;
    exports.compose = exports.applyMiddleware = exports.bindActionCreators = exports.combineReducers = exports.createStore = undefined;

    var _createStore = __webpack_require__(2);

    var _createStore2 = _interopRequireDefault(_createStore);

    var _combineReducers = __webpack_require__(7);

    var _combineReducers2 = _interopRequireDefault(_combineReducers);

    var _bindActionCreators = __webpack_require__(6);

    var _bindActionCreators2 = _interopRequireDefault(_bindActionCreators);

    var _applyMiddleware = __webpack_require__(5);

    var _applyMiddleware2 = _interopRequireDefault(_applyMiddleware);

    var _compose = __webpack_require__(1);

    var _compose2 = _interopRequireDefault(_compose);

    var _warning = __webpack_require__(3);

    var _warning2 = _interopRequireDefault(_warning);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

  
    function isCrushed() {}

    if (("development") !== "production" && typeof isCrushed.name === "string" && isCrushed.name !== "isCrushed") {
      (0, _warning2["default"])("You are currently using minified code outside of NODE_ENV === "production". " + "This means that you are running a slower development build of Redux. " + "You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify " + "or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) " + "to ensure you have the correct code for your production build.");
    }

    exports.createStore = _createStore2["default"];
    exports.combineReducers = _combineReducers2["default"];
    exports.bindActionCreators = _bindActionCreators2["default"];
    exports.applyMiddleware = _applyMiddleware2["default"];
    exports.compose = _compose2["default"];

/***/ },

這個0號模塊基本沒干什么事，就是加載了一些其他模塊的重要方法導(dǎo)出，還有個isCrushed方法，在生產(chǎn)環(huán)境下，如果函數(shù)名縮小或被改變就會發(fā)出警告。主要用于壓縮的時候。

接下來就是1-9號模塊，主要寫了redux的各種函數(shù)，那下一篇博客再說吧~

下一篇博文地址---點我或者飛向->http://www.cnblogs.com/dh-dh/p/5357176.html

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

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

相關(guān)文章

  • 純Redux原理分析

    摘要：調(diào)用鏈中最后一個會接受真實的的方法作為參數(shù)，并借此結(jié)束調(diào)用鏈?？偨Y(jié)我們常用的一般是除了和之外的方法，那個理解明白了，對于以后出現(xiàn)的問題會有很大幫助，本文只是針對最基礎(chǔ)的進(jìn)行解析，之后有機會繼續(xù)解析對他的封裝 前言 雖然一直使用redux+react-redux，但是并沒有真正去講redux最基礎(chǔ)的部分理解透徹，我覺得理解明白redux會對react-redux有一個透徹的理解。 其實，...

    sumory 評論0 收藏0

  • redux源碼解讀--applyMiddleware源碼解析

    摘要：的中間件主要是通過模塊實現(xiàn)的。返回的也是一個對象這個其實就是，各個中間件的最底層第三層的哪個函數(shù)組成的圓環(huán)函數(shù)構(gòu)成的這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試?yán)涌梢躁P(guān)注源碼解讀倉庫 applyMiddleware源碼解析 中間件機制在redux中是強大且便捷的，利用redux的中間件我們能夠?qū)崿F(xiàn)日志記錄，異步調(diào)用等多種十分實用的功能。redux的中間件主要是...

    Atom 評論0 收藏0

  • 【源碼解析】redux-thunk

    摘要：的返回值是函數(shù)，這個函數(shù)經(jīng)調(diào)用，傳入?yún)?shù)，之后會在中間件鏈上進(jìn)行傳遞，只要保證每個中間件的參數(shù)是并且將傳遞給下一個中間件。 了解了Redux原理之后，我很好奇Redux中間件是怎么運作的，于是選了最常用的redux-thunk進(jìn)行源碼分析。 此次分析用的redux-thunk源碼版本是2.2.0，redux源碼版本是3.7.2。并且需要了解Redux原理 redux中間件都是由redu...

    simpleapples 評論0 收藏0

  • 基于react+react-router+redux+socket.io+koa開發(fā)一個聊天室

    摘要：最近練手開發(fā)了一個項目，是一個聊天室應(yīng)用。由于我們的項目是一個單頁面應(yīng)用，因此只需要統(tǒng)一打包出一個和一個。而就是基于實現(xiàn)的一套基于事件訂閱與發(fā)布的通信庫。比如說，某一個端口了，而如果端口訂閱了，那么在端，對應(yīng)的回調(diào)函數(shù)就會被執(zhí)行。 最近練手開發(fā)了一個項目，是一個聊天室應(yīng)用。項目雖不大，但是使用到了react, react-router, redux, socket.io，后端開發(fā)使用了...

    NusterCache 評論0 收藏0

  • React系列之 Redux 架構(gòu)模式

    摘要：原文地址沒想到這篇文章這么晚才出，最近發(fā)生了太多的事情，已致于心態(tài)全無，最終也離開了現(xiàn)在的公司，沒想到是這么的狼狽一個人的光芒可以放到很大也可以小到微乎其微，如果不能好好的規(guī)劃最終也只能默默的承受世上沒有相同的感同身受，感受真實才能真正的 原文地址：https://gmiam.com/post/react-... 沒想到這篇文章這么晚才出，最近發(fā)生了太多的事情，已致于心態(tài)全無，最終也離...

    xfee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<