O2O解决方案>>

社区物业O2O
连锁电商O2O
上门维修O2O
农村电商O2O
多用户商城

行业平台类

汽车服务平台
家居服务平台
综合电商平台
家政服务平台
多门店商城系统

网站解决方案

全能型企业站
营销型网站
高端定制网站
品牌设计站
HTML5网站

APP解决方案

生鲜APP开发
物流APP开发
家居服务APP
汽车金融APP
多用户商城APP

定制开发类

APP开发
微信开发
小程序开发
网站建设
平台合作

合肥商城开发:你了解商城前端吗

浏览量:92

  六脉科技刚建立的时候,业务相对单一,商城前端构架演变之路主要表现在HTML 的 DOM 元素被 React 的 Virtual Dom 和 jQuery 同时操作,导致维护一个 state 的状态变得不是那么的顺利。  MVC 框架  为了使前端构架能够更灵活适用于商城的业务扩展,我们就对前端架构进行重构:  地基 View层:React  js 语法:ES6  语法编译:Babel  数据流...

合肥商城开发:你了解商城前端吗


  六脉科技刚建立的时候,业务相对单一,商城前端构架演变之路主要表现在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.jpg

  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)业务线

  3)六脉科技 MVC模型

  商城业务线

  商城主业务的转型:原来单一业务的券功能转变为通过投资免费获取商品的模式,将券功能移动到二级分类里。



4.jpg

  这一模式的改版,是业务模式的探索与尝试。MVP 商城之所以能快速革故鼎新,得益于重构的能适应复杂业务线的前端架构,以及团队间的精诚协作与共同努力。

  商城的首页也是经过不断更迭的页面 UI 优化调整,形成了用户舒适的视觉体验,并且在功能上给到用户更多的选择,如:提供商品搜索、心愿单、爱大牌、每日上新、商品多属性选择等等。

  结语

  商城作为一个通过“商品”来连接用户生活场景的模块,通过利息前置的方式,来帮助用户梳理理财与消费之间的关系。既解决了用户强烈的投资需求,同时也满足了实际的消费需求。

  商城前端之路漫漫其修远兮,我们都在上下而求索的道路上。未来,我们会不断革新,打造贴近用户体验的全新商城模式。更多资讯,欢迎关注六脉科技官网:http://www.liumaisoft.cn




上一篇:合肥商城定制--返利商城(上)
下一篇:合肥视频直播电商平台方案(三)
准备开展业务? 立即咨询 了解更多
统一热线:
在线客服 18326624515