redux源碼解析-redux的架構

 redux很小的一個框架，是從flux演變過來的，儘管只有775行，可是它的功能很重要。react要應用於生成環境必需要用flux或者redux，redux是flux的進化產物，優於flux。

並且redux還很小。那麼redux是怎麼作到單項數據流和一些讓人驚奇的特性的呢。咱們來看一下他的源碼，從而學一些東西。

redux裏面都是一個一個的模塊，一共9個模塊，都導出了一些redux的方法，好比這個9號函數，一個匿名函數，而後導出他寫的方法。9裏面就這一個方法。英文註釋也蠻清楚的，檢測類對象的方法。

而後redux開始呢，定義了一個導出模塊和緩存模塊的方法：若是看webpack源碼，發現它們的加載函數是同樣的，redux應該是借用了webpack的加載器

上面這個函數用模塊id緩存一個模塊，而後每一個模塊都傳入3個參數，module, exports, __webpack_require__，__webpack_require__傳入了就能夠用了，而後就用這個加載別的模塊導出的方法用。就像這樣：

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

而後把模塊等一些信息和緩存信息都放到這個函數上，返回一個module.exports。

總體架構就是這樣的。重點寫在模塊1-9裏面。包含redux的方法。

 (function webpackUniversalModuleDefinition(root, factory) {
  //...
  //這裏是判斷amd和cmd環境
})(this,function(){
  return (function(modules) { 
      function __webpack_require__(moduleId) {} //這是那個加載函數
      //...
    })
    ([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會檢測使用環境是amd環境仍是cmd環境。實在不行就把方法放到window上。

redux把它全部的匿名函數(裏面包含redux的全部方法)都寫在一個數組裏，就像這樣

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

你們也看到了，每個函數都是一個模塊，好比剛纔的模塊9，匿名函數，加載就導出自身的方法。

這是0號函數

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

    /*
    * This is a dummy function to check if the function name has been altered by minification.
    * If the function has been minified and NODE_ENV !== 'production', warn the user.
    */
    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號模塊基本沒幹什麼事，就是加載了一些其餘模塊的重要方法導出，還有個isCrushed方法，在生產環境下，若是函數名縮小或被改變就會發出警告。主要用於壓縮的時候。

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

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