談Web項目框架的搭建和設計

時間：2023-09-05 11:06:01 | 來源：網(wǎng)站運營

時間：2023-09-05 11:06:01 來源：網(wǎng)站運營

談Web項目框架的搭建和設計：當前web端框架日益豐富，有react、vue、angular等，而且使用方式也比較容易上手，只要根據(jù)說明文檔走你就能搭建起一個自己的框架。但是這樣簡單搭建起來的框架就真的可以用于項目開發(fā)嗎？答案當然是NO。其實這只能算成搭建開發(fā)環(huán)境的一部分，就像web開發(fā)人員在電腦上安裝node.js一樣，因為這種框架的開發(fā)規(guī)則的并不是我們設計的，而是用的外部第三方的。引用完這個第三方框架后，剩下的內容才是真正能夠展示你架構設計和實現(xiàn)能力的地方！

當然有些人會問，第三方框架引入后還剩下啥？不就是功能實現(xiàn)了嘛，沒啥好設計的。這樣想的人其實不在少數(shù)，我遇到的好多前端開發(fā)人員雖然嘴上沒這樣說過，但是他們思想和開發(fā)工作其實都在證明。

引入第三方框架后還有很多事情要干，基于react、vue等框架的思想，我們要開發(fā)的是組件而不是平鋪開來流水式實現(xiàn)整個頁面，也不是把流水式實現(xiàn)的代碼切割一下裝作是組件，然后做簡單的拼接形成頁面。所以要根據(jù)項目的具體需要設計一套組件實現(xiàn)方式。組件有了我們的頁面呢？既然有了一套組件，我們的頁面最好是通過配置化的方式組裝實現(xiàn)，這樣的話開發(fā)效率也就自然提升上去，可擴展性應該也能做到最好?？偨Y下來除了引用第三方框架，前端架構設計更重要的內容應該是結構設計和代碼設計。

首先是結構設計，好的工程結構可以提高項目的可閱讀性，使用起來方便從而提高開發(fā)效率。下面是我對一個項目結構的理解：

然后是代碼設計，JS的語法導致前端代碼的書寫比較隨意，因此為了提高項目的質量，架構設計中必須加入代碼設計。目前typescript是可以提高前端代碼書寫規(guī)范的重要工具，推薦使用。代碼設計可以包括以下幾個方面：

1.一定要定義類似于強類型語言的數(shù)據(jù)結構，在定義變量和函數(shù)參數(shù)時，使用數(shù)據(jù)結構做類型限制。這樣可以讓對象的內容清晰明了，不用看代碼也知道對象中有那些屬性。

2.一定要定義靜態(tài)常量，比較時使用靜態(tài)常量作比較。

3.由于前端主要是做數(shù)據(jù)展示，因此可以根據(jù)項目特點定義數(shù)據(jù)處理中心，數(shù)據(jù)處理中心的目的主要是為了定義格式化函數(shù)，這樣數(shù)據(jù)展示就走一個格式化函數(shù)，再次修改展示格式只需要改一個地方，避免全局搜索。

4.在開發(fā)過程中要注重每個細節(jié)的設計實現(xiàn)，多用配置化的方式實現(xiàn)頁面的展示，這樣可以提高開發(fā)效率和擴展性。比如可以通過配置化方式設定頁面布局，可以預先定義好所有列然后通過配置化方式設定每個表格的列，可以通過配置化方式定義導出文件的列信息等等。

5.在做字段信息配置時，考慮在字段信息中添加format、isInclude等屬性方法函數(shù)，做格式化、是否包含等邏輯處理。在定義回調函數(shù)時，可以采用nodejs回調函數(shù)的設計思路，把isError作為第一個參數(shù)，只有isError是null時，才認為是正常返回，否則為異常。

6.可以根據(jù)業(yè)務模塊的特點為每個業(yè)務模塊定義各自通用的數(shù)據(jù)處理方法，在這個層次中定義這些函數(shù)方法既不會過于抽象，也可以提供適當?shù)耐ㄓ眯裕谶m當?shù)娜∩嶂袨殚_發(fā)提供便利。

7.如果項目允許的話，可以全局統(tǒng)一定義頁面操作行為，為每個操作定義行為信息，使用的時候只需要把操作行為代碼傳入，整個系統(tǒng)都可以根據(jù)根據(jù)行為代碼找到對應的行為信息，這樣可以抽象出所有操作，數(shù)據(jù)在系統(tǒng)中流轉時可以隨時獲取處理規(guī)則。

8.react中的靜態(tài)成員變量和靜態(tài)成員函數(shù)，在做多個組件實例的數(shù)據(jù)共享時會有大的用途，請注意使用。

9.發(fā)送請求時可以定義三個狀態(tài)，pending、success、failed。同時對應的定義三個回調函數(shù)，onPending、onSuccess、onFailed，這樣可以讓數(shù)據(jù)的處理更加方便，切記不要只定義一個回調函數(shù)，這樣會導致返回的數(shù)據(jù)不知處于什么狀態(tài)，還要不停地做邏輯處理分析，而且不夠清楚明了。每個狀態(tài)地回調函數(shù)可以允許業(yè)務強相關組件做相應地展示處理。