剛做完一個專案的改進需求，總結一些專案心得，主要有兩方面：

1. 同一個頁面，前後端各負責幾個模組開發，如何頁面整合？
2. 前端如何從後端獲取資料？

1 前後端按模組開發同一頁面

首先，在這個專案中沒有用到vue、react這些框架，實現頁面的一種做法是前端通過html/css/js把頁面搭建出來，再交由後端改造成ftl/jsp等模版頁面，但是這個過程造成前後端開發的不同步；另一種做法是前端負責開發一些模組，後端負責開發另一些模組，劃分可以按照模組的資料形式，比如可以通過介面獲取資料的模組可以交由前端開發，需要很多變數的可以通過後端開發。

具體做法（從前端開發角度出發）：

1. 劃分好前後端開發的模組；
2. 後端建立前端的模組根節點，比如<div id="front_module0_root"></div>;
3. 前端建立模版檔案，本專案使用mustache，在模板中通過{{variable}}調取資料，js應用參考https://github.com/janl/mustache.js；
4. 在頁面的js檔案中，通過ajax獲取介面資料注入到模版中；
5. 在頁面的js檔案中，將模版新增到模組根節點front_module0_root中。

2 前端如何從後端獲取資料

在該專案中有兩種方式：

1. 介面
2. 頁面js中的全域性變數

第一種方式在上面已經提到了，通過前端js非同步讀取，一般作為列表等較多資料