花式填坑13期 | 如何高效開發企業級電商的前端？

電商前端專案作為網際網路行業中的典型代表，應用最廣、發展最顯成熟，但在實際開發中也會遭遇各種問題。比如，更適合電商企業的前端開發方式有哪些、如何保證高效的前端開發等等。

慕課網開展的花式填坑活動，每期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和資料分析等，是一個十足的技術咖。