为了账号安全,请及时绑定邮箱和手机立即绑定

花式填坑13期 | 如何高效开发企业级电商的前端?

2017.08.03 18:14 3930浏览

图片描述

电商前端项目作为互联网行业中的典型代表,应用最广、发展最显成熟,但在实际开发中也会遭遇各种问题。比如,更适合电商企业的前端开发方式有哪些、如何保证高效的前端开发等等。

慕课网开展的花式填坑活动,每期1个主题,1位大牛嘉宾。用户可围绕当期话题进行提问,嘉宾将在规定时间内针对问题进行详细解答。并且,小伙伴们也可以发表自己的见解与嘉宾展开讨论。

以下内容精选在花式填坑第13期。


Q:企业级的电商平台都包含什么内容?

Rosen_Gao:在前后端分离的情况下,后端同学的任务是把数据和文件做持久化存储,并提供操作数据数据的接口。前端同学负责请求数据,然后对数据做处理和适配,最后再把数据呈现出来。其实就是以接口为界限,后端负责接口的制作,前端负责接口的调用。

在实际开发中,一般是前后端同学拿到需求后,一起来确定各个功能点需要的接口,然后再逐个细化出各个接口的输入输出字段,最后由后端同学生成一个接口文档。

Q:电商前端和普通前端分别避开的坑有哪些?

Rosen_Gao :1.互联网里面最大的一个部分就是电商,可以说这是互联网里最大的一块。
2.行业的选择对研发来说很重要,选一个前景好的行业能保证你的公司不会短时间倒下,有更多时间去做积累和创新;还有一方面是兴趣的问题,建议不要把自己限定到纯研发的角色里,最好多参与业务上的事。
3.电商是一个很复杂的系统,市面上大部分的业务都可以理解成电商的一个子集,这里游戏可能会例外。所以电商的前端搞定了,其他业务也不会有太大问题。

Q:请问开发一个电商平台里,怎么进行技术选型?

Rosen_Gao :技术选型结合业务的,比如电商的用户端比较介意兼容和SEO的问题,更多的会用原生js;管理系统比较熬注重开发效率,更多用的是一些单页框架。但技术选型是一个比较大的话题, 大到架构、框架的设计,小到工具的选择,可以针对更具体的项进行提问,在实战课里也系统的讲了电商系统的技术选型。

Q:模块化为什么可以提高开发效率?

Rosen_Gao :
1.对代码进行封装隔离,提高代码的复用性,就能减少代码量
2.通过逐级对业务的拆解,达到简化业务的作用,降低系统复杂度
3.更好的代码组织方式,能支持团队并行开发,提高团队的效率
4.封闭作用域,减少变量冲突带来的不太容易发现的问题
5.耦合小,利于后期扩展和修改,降低系统的后期维护成本

Q:一般前端是如何与后端交互的呢?

Rosen_Gao :绝大部分都是通过json格式的数据接口来做数据交互的

Q:电商前端一般会用模板引擎吗?

Rosen_Gao:会用的, 电商前端一般很少通过框架来进行开发,所以会通过模板引擎来减少dom的操作,解决无框架开发下的痛点。

Q:老师,您在整个前端开发过程中,遇到有哪些兼容性问题吗?

Rosen_Gao:H5的一些标签解析不了,比如section
各种样式不兼容,包括选择器和属性的不兼容
使用了不存在的js方法
使用了一些保留关键字,在ie8以前任何地方都不能用保留字

Q:前后端如何配合

Rosen_Gao:在前后端分离的情况下,后端同学的任务是把数据和文件做持久化存储,并提供操作数据数据的接口。前端同学负责请求数据,然后对数据做处理和适配,最后再把数据呈现出来。其实就是以接口为界限,后端负责接口的制作,前端负责接口的调用。
在实际开发中,一般是前后端同学拿到需求后,一起来确定各个功能点需要的接口,然后再逐个细化出各个接口的输入输出字段,最后由后端同学生成一个接口文档。

Q:电商后台用php写可以嘛,还有商品列表的排序功能可否在前端实现

Rosen_Gao:只要接口格式一样就行。
商品列表的排序因为有分页,不适合在前端做。如果是前端分页的话,就要一次性取出所有商品。

Q:webpack-dev-server的自动刷新是怎么实现的?

Rosen_Gao:webpack-dev-server实际上使用的是一个nodejs做的服务,并且webpack-dev-server还会在我们的页面里注入一个client,这个client和nodejs的服务通过socket的方式做了个连接,就可以实现浏览器和nodejs服务进行通信了。webpack-dev-server这个服务同时还会监听本地文件的改动,当我们修改文件时nodejs就会得到通知,然后拿到最新的文件内容编译成新的模块结构,编译完成后再通知client做刷新页面的操作来请求最新的资源,这样就实现了修改文件后的自动刷新。

讲师介绍,查看个人主页

Rosen_Gao:曾任职360云事业部高级前端开发工程师,某C轮创业公司前端架构及前端负责人、初中级工程师导师、招聘面试官。

热爱前端技术的研究与分享,多年一线架构设计和开发经验,对jQuery、Angular、React等各种前端框架有丰富的项目实战经验,擅长SEO和数据分析等,是一个十足的技术咖。

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

27人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消