2018-08-28 2048及SongBook项目-总结

                                                  SongBook

1.整体架构

    1-1布局结构上

          采用Songbook组件作为本项目的容器，在其中分为上中下三部分

              SongbookHeather:主要包含<返回><用户姓名><完成>三个小区域

              NavBar:作为导航条 循环子组件NavBarBtn来展示小的tab项

              SongbookBody: 主要包含三个子页面内容

    1-2 reducer拆分

                分为五个文件

                index.js 作为入口文件

                dialog.js 管理组件dialog的状态 包括展示内容及点击方法函数

                entities.js 作为所有后端所传经过扁平化处理的音乐id实体

                songBook.js 管理整个曲库状态 而其中又包含曲库整体状态songBookState以及子页面mySongState的reducer 因为这次项目中只涉及我的音乐这个子页面因此放到一起 如果有另外两个页面将会将其再次拆分成单独文件

                userInfo.js 负责管理用户昵称 token 以及mid 必要时，将会利用localStorage进行token的存储以实现一段时间内自动登录

        1-3 ServerApi 中间件

              在中间件中，首先依旧按照以往的方式 通过判断action有无SERVER_API属性来进行拦截，之后通过创建promise来进行异步action的传递，而因为此项目中加入了登录功能模块 有因为只有简单的获取token没有复杂的验证等 因此我选择了将其也写入serverAPI中而没有单独抽离出来。那么在serverAPI中便首先需要定义一个数组队列来暂存因还没有登录成功且需要token的action。  当登录的action请求成功后 将暂存数组中的action一 一 进行dispatch从而成功拉取数据

2.通用型组件

        在项目中因为常常需要使用到Dialog和提示信息的TipsView 因此便想到将其构建成一个通用型的组件 其实像Player中的滑动条在最除也是一个个通用型组件 但是考虑到本项目中需要有截取片段功能 便将其构建成一个适合本项目的组件 而没有将其再次抽离成通用型。 

3.数据扁平化处理

           在数据扁平化处理上 因为通过观察后端所返回数据 在其中音乐的信息可以扁平化处理出来 且主键为id，如果作者的信息为对象 那么将可以再次进行拆解

---

                                                            2048

1.整体架构

  1-1布局结构上

          采用Game组件作为本项目的容器，在其中分为上下三部分

 GameHead:主要包含游戏名称 分数 介绍 重新开始按钮

 GameBody:作为游戏的主体部分 通过滑动或按键操作进行控制

2.通用型组件

        在项目中游戏主体按钮可以构建成一个只要传入数据有变化且不为0 便可以有弹动效果的小方块

        而增加积分的动态加分块也可以构建成一个累计积分动态效果的通用型小组件

3.reducer

        在reducer中 通过将handlemove操作行为抽离出来 来达到reducer主体的简洁性 也可将其单独放在一个专门处理各种事件的文件中 因此项目结构较为简小 因此放在其中。