|
|
|
主要表现在HTML 的 DOM 元素被 React 的 Virtual Dom 和 jQuery 同时操作,导致维护一个 state 的状态变得不是那么的顺利。 MVC 框架 为了使前端构架能够更灵活适用于商城的业务扩展,我们就对前端架构进行重构: 地基 View层:React js 语法:ES6 语法编译:Babel 数据流操作:Reflux 样式使用:Stylus 页面跳转:React-router 打包上线:Gulp+Webpack 为了保持 state 状态的统一管理,既有 React 何须 jQuery。 项目框架结构如下: 1)运行机制: npm 通过加载 package.json 必要的 modules,解决项目的依赖关系。通过 npm start 运行本地服务器,通过 webpack 加载 app 目录下main.js,通过 react-router 路由配置解析,进入到商城首页。 2)编译机制: babel 使用 babylon 解析器对源代码进行解析并生成 AST(Abstract Syntax Tree 抽象语法树),接着通过 babel-traverse 对解析出来的 AST 进行遍历,解析出来整个树的 path,读取对应的元素,并应用到 transformers 插件上,生成变换后的 AST,最后使用 babel-generator 将 AST 树转码成最终编译后的代码串。 3)数据流向: 当用户进来网站的时候,React action 匹配用户当前的操作,通过 API 获取后端提供的信息。Dispatcher 作为事件调度中心,Reflux 模型的中心枢纽,管理着Reflux 应用中的所有数据流,它本质上是 Store 的回调注册,每个 Store 注册它自己并提供一个回调函数。 当 Dispatcher 响应 Action 时,通过已注册的回调函数,将 Action 提供的数据信息发送给应用中所有的 Store,React views 把后台的数据渲染后呈现给用户,完成整个闭环的数据流。 MVC 模型进化过程: 1)单页面 2)业务线 这一模式的改版,是业务模式的探索与尝试。MVP 商城之所以能快速革故鼎新,得益于重构的能适应复杂业务线的前端架构,以及团队间的精诚协作与共同努力。 商城的首页也是经过不断更迭的页面 UI 优化调整,形成了用户舒适的视觉体验,并且在功能上给到用户更多的选择,如:提供商品搜索、心愿单、爱大牌、每日上新、商品多属性选择等等。 结语 商城作为一个通过“商品”来连接用户生活场景的模块,通过利息前置的方式,来帮助用户梳理理财与消费之间的关系。既解决了用户强烈的投资需求,同时也满足了实际的消费需求。 商城前端之路漫漫其修远兮,我们都在上下而求索的道路上。未来,我们会不断革新,打造贴近用户体验的全新商城模式。 |
|
|