此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享!

1. 使用技术：react＋react-router + react-redux + antd

2. 请求方法封装

调用方法

3. 破解反盗链

4. 配置打包生产环境与测试环境

5. webpack + react-router 按需加载

首先在webpack中配置，主要需要配置 chunkFilename 这个属性，其它的顺便提一下

path：输出的文件存放的文件夹，此处address通过打包的命令生成，__driname为当前文件所在的目录的绝对路径

publicPath：处理静态资源引用地址，比如在CSS中引用了图片，打包后默认情况是url（文件名），这样必须确保资源文件和CSS处于同一目录，如果希望打包引用地址改为img目录下的资源，就需要用这个参数．

filename：编译生成的js文件路径，可在前面加上文件夹名，如果没有会自动创建．

chunkFilename：用webpack内置的require.ensure方法引入的模块打包后的文件名，如果该方法中没有引入任何模块，则不会生成任何chunk块文件．

Version：打包时JS文件生成的时间戳，禁止缓存

在需要分包加载的组件中使用require.ensure方法

语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])．

dependencies：依赖的模块数组．

callback：回调函数，该函数调用时会传一个require参数，可以进一步的require其他模块．

chunkName：模块名，用于构建时生成文件时命名使用．

require.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行.

require(‘./rankingList/orderDetails’).default中require方法的参数不能使用变量，只能使用字符串．

如果组件是使用ES5的module.exports导出的话，那么只需要require(‘./rankingList/orderDetails’)即可，而如果组件使用ES6的 export  default 导出的话，那么需要加上default．

如果在路由页面使用了按需加载（require.ensure）加载路由级组件的方式，那么在其他地方（包括本页面）就不要再import了，否则不会打包生成chunk文件．

6. 跨级组件之间的通信

首先定义公共事件对象event.js

在需要传递数据的组件multiMedia.js引入公共事件对象

组件multiMedia.js传递数据时

在需要接收数据的组件Editor.js中引入公共事件对象

在Editor.js的生命周期挂载完成后，调用监听事件

在Editor.js中定义事件newMedia接收数据

在Editor.js的生命周期将要卸载时，移除监听事件

7. Redux状态管理

在大型项目中，react中的组件嵌套及跨级是非常频繁的，而react的数据本身是单向数据流，这样组件之间传递数据非常麻烦，Redux最主要是用作应用状态的管理，用于实现多级组件之前的数据共享．

首先创建数据仓库store

在项目入口文件index.js中传入store

iv 

当组件需要修改store里的数据时必须要派发action

action有两个特定参数，一个为type，为action的名称，一个为payload，即需要传递的数据

在需要修改数据的组件banDetail.js中引入action

在需要修改数据的组件banDetail.js中通过connect让addOpenActiveMenu这个action方法与当前组件做链接

在banDetail.js调用方法

定义reducer，处理store接收到的新数据

当reducer把处理过后的数据返回到store里后，同上面action的链接方法一样，让state与store做链接，就可以在组件里通过this.props.title获取store里的数据了，title即为store里的数据．

return时如果要返回异步数据，可以通过redux-thunk和redux-saga这两个中间件来实现，这样就可以以action中发起异步请求了．

8. 瀑布流插件Macy的使用

npm安装macy后引入该插件

初始化macy插件

指定页面上需要加载瀑布流布局的容器，ID与初始化里面的ID一样.

在请求数据完成后，setState的回调方法里调用声明的方法

实现滚动加载

实现效果如下：

9. 表格插件Echarts使用

引入Echarts插件

重要的三个步骤，封装成一个方法，方便在数据改变时调用它．

上图步骤２中不同的表格类型配置不一样

(1). 饼图的配置

主要的展示数据为series里的data

最终效果如下：

(2). 折线图的配置

主要的展示数据为series里的data

最终效果如下：

如果想在缩放屏幕时让图表自适应，可以加个监听事件，记得在组件将要卸载时移除事件

10. 编辑器UEditor的使用

首先，引入编辑器文件

然后，在componentDidMount生命周期里初始化编辑器

上图自定义this.createOnUeReady()的方法里面执行要添加开关，保证只执行一次回调，避免多次触发事件

最后，在组件卸载时销毁编辑器

正常加载所功能的编辑器如下：

本项目中常用的编辑器指令如下：

(1). 清空内容

(2). 插入内容

(3). 获取编辑器的内容

(4). 设置编辑器的内容

(5). 设置编辑器不可编辑

(6). 设置编辑器可以编辑

你可能觉得工具条上的功能有点多，实际不需要那么多，可以对工具条进行配置，打开刚开始引入的ueditor.config文件，里面有一系列的配置选项，如下所示：

toolbars: [[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
]]

对于不需要的工具将其注释掉即可，多个工具如果要用中划线分开可以在上面的数组中加上 |

其他一些重要的配置，与toolbars同级放置.

上图中whiteList为最重要的配置选项，通过配置该选项，可以将一些标签或是一些标签的属性加入白名单，防止被过滤

需要特别注意的是，使用了ueditor后，一定要在webpack中添加插件配置，这样打包过后才能将ueditor添加到打包文件里面去

11. 图片裁剪插件react-cropper的使用

12. 前端项目工程化与模块化的心得

(1). 项目架构设计（比如登录页与数据页与通用页要设计成平级关系，而不是嵌套关系）

(2). 目录结构定义（比如通用的config文件，不能藏的太深）

(3). 制定项目开发规范(ESLint规范)

(4). 模块化(小颗粒度的，如表格中的分页)、组件化(粗颗粒度的，如表格)(早期的require.js为例)

(5). 前后端的接口规范(比如loading控制，错误拦截处理，code码代表的含义，系统级的错误、业务型的错误码，交互型的错误)

(6). 性能优化、自动化布署（压缩、合并、打包）(webpack)