當web前端架構方案趕上《金瓶梅》？！

首先聲明，我不是標題黨，你能夠說我是老司機，可是此次絕對不會把你帶溝裏去，關於技術類的文章千篇一概，估計早就看煩了，不妨細細品味這篇文章，帶你認識一個不同的web前端世界，文章主要結合金瓶梅中的人物屬性和web前端架構的模塊劃分關係，分享一個關於我對web前端架構的一點點別緻的見解，若是能耐心的看完，對你構建複雜的web應用必定有所收穫，固然，有講的很差的地方，也但願各路大神多多指點，廢話很少說，上正文。

你們知道《金瓶梅》中幾個重要角色：武大郎，潘金蓮，西門慶，武松，王婆。在故事情節中，各類角色扮演起到不一樣的做用，互相關聯，將故事情節緊密聯繫在一塊兒，這樣的情節構造堪稱經典，已然成爲經典，而在構建複雜的web前端應用時候，也須要一些模塊互相做用，構造一個完整的系統。

潘金蓮（插件）：我以爲這個比喻再合適不過了，若是這裏你只看到公用性，那你就想簡單了，潘金蓮除了公用性，還有美，沒錯，插件不只要有公用性，還要美。這裏的美是指代碼的簡潔，輕量，高維護，對於一個複雜的項目來講，每每會對插件有些特殊的要求，在使用插件的時候，你必須對插件有較深刻的瞭解，確保你能駕馭她，固然在必要的時候，你能夠本身造輪子。

武大郎（入口函數）：任何一個複雜的項目，都有一個入口，而這個入口必須是很簡單的。也就是咱們C裏面的main函數。入口函數一定是存在一些全局的配置，模板渲染，事件初始化等。入口函數是獨一無二的，就像武大郎的身高，在整個《金瓶梅》中，你絕對找不到第二個，因此入口只須要一個，咱們不須要在入口上去實現過多的方法，入口的做用是梳理業務邏輯。

武松（方法類）：在一個複雜的項目中，一個類是不能完成咱們的業務的，固然這裏的武松不是隻一個類，而是泛指其餘類，在咱們梳理好業務邏輯以後，將項目的類提取出來，將其劃分在方法類之中，固然，劃分的越準確，咱們的項目業務就越清晰，這裏是考察技術的核心點，武松的強大，你們都知道，徒手劈老虎，若是你提取的方法類太弱，連武大郎都打不過，那《潘金蓮》這個項目估計就廢了，由於若是武松殺不死這對姦夫淫婦，故事就沒有一個好的結局。

西門慶（視圖）：爲何要把西門慶比做是視圖呢？沒爲何，就由於書中說西門慶長的帥，視圖是給客戶看的，因此必定要有必定的觀賞性，固然在《金瓶梅》這個項目中，視圖過多的使用了插件，而在實際項目中，這種狀況是不多的。咱們在作一個前端項目的時候，視圖是必不可少的，由於不少業務是在與視圖的交互中產生的，這裏的視圖能共用就儘可能共用，西門慶也不止一個老婆，就是這個理兒。

王婆（配置）：西門慶之因此能和潘金蓮勾搭在一塊兒，全靠王婆的功勞，若是沒有王婆，固然西門慶就要靠本身去和潘金蓮交際，這樣難免會加大被發現的風險，因此最好將配置文件單獨提取出來，方便項目的維護和修改，這裏的配置文件是泛指全部的公用配置。

有了主類，插件，方法類，視圖，配置 這幾個主要的架構，咱們的web前端項目也就輕鬆多了。別覺得文章就完了。學以至用纔是最關鍵的，來看看實際的應用，這些心得出自個人一個開源項目,下面是項目截圖，網址：www.h5ds.com

項目入口: 我給項目定義了一個入口 h5ds.js

插件庫: 插件放在unit文件夾下面。我針對該項目封裝了40多個插件，基本上都是本身造的輪子，爲何要造輪子？很簡單，我只想讓項目更輕，更快，網上不少輪子未必是最適合個人項目的，若是一個拖拉機非要安裝個法拉利的輪子，那跑也不起來，更別說性能了，最好的，不必定是最合適的！對於框架和插件來講，都是同樣。

方法類:個人方法類定義在core文件夾裏面，對於類的設計，以下圖所示。App類是主類，>包含Page類，Page類包含Layer類，他們只有包含關係，並無繼承關係。 手機H5，web頁面，小程序等 繼承App類； 手機頁面，PC頁面，彈窗，浮動層 繼承 Page類； 文本，圖片，視頻，幻燈片，SVG等 繼承 Layer類；

視圖:視圖我放在tpls文件夾裏面的，這裏麪包含了全部的界面，從上面的軟件截圖也能夠看出來，視圖是很美觀的，略帶一點點騷。

配置: 關於一些全局的配置文件，我放在了 conf文件夾裏面。這裏包含了所有的配置項，這樣會讓個人項目維護起來很是方便，不用全項目裏面去找一些經常使用配置項。

有了這些關鍵的模塊，接下來就是在項目中將其關聯起來。一個複雜的前端應用就這樣輕鬆完成了，是否是感受頗有幫助呢？若是該項目對你有幫助，別忘了在開源社區給我點個star。很是感謝！

by: 饅頭