顧
接上文：【大前端之前後分離01】js前端渲染vs伺服器端渲染，我們**了為什麼要做前後分離，以及前端渲染需要解決的問題，最後提出了自己的解決方案：
前端**編譯形成兩套**：①前端發布版本 + ②伺服器端指令碼
前端模組巢狀問題
我們在乙個模板中又有乙個widget，在子模板中又有乙個widget，父模組與子模組中有資料依賴，或者子模組為乙個迴圈，迴圈卻依賴父模組某個值，這個便很麻煩。
舉個例子來說，我們首頁引入了乙個商品模組，商品型別模組為一迴圈模組，裡面又有子模組：
index首頁模組： 2
5 type模組：
複製** 1
12
13 <% } %>
14 複製**
可以看到，其中有第二次迴圈迭代的將該型別的商品資訊讀出，如果我們想將商品資訊模組化的，這裡便出現了模組巢狀情況：
複製** 1
12
13 <% } %>
14 複製**
這裡暫時不考慮子模組中還有非同步資料請求問題，我們將列表對應的模板放到了單個檔案中：
1 <% for (var j = 0, len1 = data[i].product.length; j < len1; j++) %>
這裡的迴圈解析便是我們今天研究的重點，因為前端模組至少需要兩個條件：
① 唯一的dom容器
② 能獲取父級模組的相關資料
為了解決這個問題，我這裡提出了迭代模組的概念。
迭代模組
所謂迭代模組，便是用於資料內嵌形式，並且處於迴圈中的模組，比如上述例子，我整個type模板就變成了這樣（這裡為最簡形式）：
複製** 1
19
20 <% } %>
21 複製**
這個是編譯過後形成的前端**，最初是這樣的：
複製** 1
13
14 <% } %>
15 複製**
1 <%iteratorwidget(); %>
這個時候前端需要實現iteratorrender方法，首先前端模板將上述**解析結束後是這個樣子的：
view code
複製** 1
2 4
17 複製**
然後前端方法的實現為：
複製**
1 //最簡單實現，僅考慮渲染，不嚴謹
2 var iteratorrender = function (opts) );
18 }
複製**
然後**執行，邏輯跑通了： 結語
由於最近工作強度上來了，解決了前端渲染時候的模板巢狀問題，一直拖到了今天，伺服器端的模板巢狀更好處理，該方案後續會繼續細
前後分離之使用nodejs執行前端專案
第二步 安裝完成後,使用npm命令安裝express模組和cors模組 npm install express npm install cors ps 如果有使用其它模組,請自行安裝.第三步 編寫以下service.js檔案 載入express框架,乙個簡單的web開發框架 const expres...
前端通訊, 前後端分離 前後端不分離
基於後端的通訊 後端完成 pc端用 基於h5的websocket來完成 應用於移動端 低版本瀏覽使用的socket.io 案例 利用node.js流來生成壓縮包 fszlib 市場流行 前後端分離好處 很久以前 10 13年 前後端不分離專案 不分離 前端 後端 jsp 前後端專案整合 成功 前端 ...
前後端分離之前端部署 nginx多多埠配置
如果vue專案最終打包生成了乙個dist資料夾，那我們應該怎麼處理這個資料夾呢？有兩種思路 一 非完全前後端分離專案 我們可以自己在本地開發，使用後端的介面，開發完成後，我們將打包生成的dist資料夾丟給後端，依賴後端部署，反正都是靜態檔案，只是最終和後端放乙個伺服器了。二 完全前後端分離專案 我們...