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
redux源码解析-redux的架构的更多相关文章
- redux源码解析(深度解析redux+异步demo)
redux源码解析 1.首先让我们看看都有哪些内容 2.让我们看看redux的流程图 Store:一个库,保存数据的地方,整个项目只有一个 创建store Redux提供 creatStore 函数来 ...
- 时序数据库 Apache-IoTDB 源码解析之系统架构(二)
上一章聊到时序数据是什么样,物联网行业中的时序数据的特点:存量数据大.新增数据多(采集频率高.设备量多).详情请见: 时序数据库 Apache-IoTDB 源码解析之前言(一) 打一波广告,欢迎大家访 ...
- redux源码解析-函数式编程
提到redux,会想到函数式编程.什么是函数式编程?是一种很奇妙的函数式的编程方法.你会感觉函数式编程这么简单,但是用起来却很方便很神奇. 在<functional javascript> ...
- 【Mybatis源码解析】- 整体架构及原理
整体架构 version-3.5.5 在深入了解Mybatis的源码之前,我们先了解一下Mybatis的整体架构和工作原理,这样有助于我们在阅读源码过程中了解思路和流程. 核心流程 在上一遍的入门程序 ...
- Tensorflow源码解析1 -- 内核架构和源码结构
1 主流深度学习框架对比 当今的软件开发基本都是分层化和模块化的,应用层开发会基于框架层.比如开发Linux Driver会基于Linux kernel,开发Android app会基于Android ...
- 一.jQuery源码解析之总体架构
(function (window, undefined) { //构建jQuery对象 var document = window.document, navigator = window.navi ...
- Spring4源码解析:BeanDefinition架构及实现
一.架构图 首先共同看下总体的 Java Class Diagrams 图: 二.具体类实现 2.1 AttributeAccessor 接口定义了一个通用的可对任意对象获取.修改等操作元数据的附加契 ...
- spring源码解析1--spring整体架构
一.Spring整体架构图 关于Spring的基本介绍就不再赘述了,先展示Spring框架的整体架构图如下示: 二.Spring结构介绍 Spring主要分为Core Container.Test.D ...
- Redux源码分析之bindActionCreators
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
随机推荐
- node错误中间件处理 express类 带有路由操作
let express = require('express'); let app = new express(); let bodyParser = require('body-parser'); ...
- Es6数值拓展
Es6数值拓展 一,Number扩展 1,ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 将0b和0o前缀的字符串数值转为十进制,要使用Number方法 N ...
- IdentityServer4【QuickStart】之使用ClientCredentials流程保护API
使用ClientCredentials流程保护API 这个示例展示了使用IdentityServer中保护APIs的最基本的场景. 在这个场景中我们会定义一个API和一个想要访问它的客户端.客户端会在 ...
- Oracle 序列(sequence)
序列(sequence) 是Oracle提供的用于生成一系列唯一数字的数据库对象.它会自动生成顺序递增或者递减的序列号,以实现自动提供唯一的主键值.序列可以在多用户并发环境中使用,并且可以为所有用户生 ...
- [新三板摘牌]国资企业济南华光光电去年终止拟IPO今年摘牌新三板
国资企业济南华光光电去年终止拟IPO今年摘牌新三板 http://blog.sina.com.cn/s/blog_e32cfa770102ycku.html http://stock.qlmoney. ...
- day 7-21 pymysql模块
一.安装的两种方法 第一种: #安装 pip3 install pymysql 第二种: 二.链接,执行sql,关闭(游标) import pymysql user = input("use ...
- 认识SQL
一.SQL介绍 SQL 是用于访问和处理数据库的标准的计算机语言. i.What? SQL 指结构化查询语言 SQL 使我们有能力访问数据库 SQL 是一种 ANSI 的标准计算机语言 ii.How? ...
- js中判断数据类型的4中方法
注意: js中数据类型有7种(number, boolean, string, null, undefined, object, Symbol(es6新增)) 原始数据类型: number, stri ...
- Ubuntu16.04 启动纯文本界面方法
问题: Ubuntu16.04 如何启动纯文本界面. 解决方法: 1.系统启动后,在登陆界面点击Ctrl+Shift+F1切换到文本登陆界面: 2.修改为默认从文本界面登陆: sudo vi /etc ...
- PCIE
---恢复内容开始--- 高速差分总线.串行总线 每一条PCIe链路中只能连接两个设备这两个设备互为是数据发送端和数据接收端.PCIe链路可以由多条Lane组成,目前PCIe链路×1.×2.×4.×8 ...