首页手记花式填坑13期 | 如何高效开发企业级电商的前端？

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

标签：

Html/CSS CSS3 前端工具

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

慕课网开展的花式填坑活动，每期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做刷新页面的操作来请求最新的资源，这样就实现了修改文件后的自动刷新。