改用比較好的架構來切割後端PHP與前端HTML

我在前幾天的兩篇文章中，提到一些關於網頁前端後端開發上的架構問題，

如何透過前端的Javascript得到Server端的PHP的變數數值

如何撰寫好看又好維護的PHP？

其實目的是為了引出這篇，我真正想要探究，想要知道的是一套好用、通用、實用或者大部分人怎麼用的架構，最近看了很多網路資訊、也請教了朋友之後，之後，覺得或許我找到了好的用法跟寫法，在此跟大家分享一下。

為了讓後端的資料能在前端因為資料不同而呈現不同的資訊、甚至是需要不同的UI編排，就會需要把PHP寫成多種分支。當某種資料時，則產生某種UI元件組合，當另外一種，則產生另外一種UI元件組合，如果資料型態有很多種，那這個PHP不就寫的又臭又難維護？尤其如果是採用 如何撰寫好看又好維護的PHP？ 文章中第二種寫法的話，那個PHP會醜到讓維護的人想要殺人，所以第一個改進的方向，就是從第二種寫法，先改為第一種寫法，這是把UI跟邏輯資料分開的第一步，分開除了讓程式乾淨，之後不論是修改UI，或是PHP要換ASP也會容易些。

再來，可以把PHP更純化，只負責資料處理，而前端則是單純的HTML，透過JS來控制UI長相，但怎麼從JS拿到PHP的數值呢？之前會用 如何透過前端的Javascript得到Server端的PHP的變數數值 來達到，但是，更好一點的作法，是可以在JS透過Ajax的方式，向Server取得資訊，然後即時對前端的HTML產生變化。而其中的CSS除了美化UI之外，更可以方便透過跟JQuery的整合應用，來增加UI元件的Class屬性，比方：

$('#item').addClass('selected') 或 $('#item').removeClass('selected')。

一方面可達到顏色或外觀的控制，另一方面則是可以因此決定出哪些UI元件具備了什麼Class，然後用

$('#target').children( '.selected' )  或  $('.init_state:has(.selected)') 

來選到這些物件作一些控制，或是傳資訊到後端。如此一來，甚至有機會不用把HTML跟PHP寫在一起，可以分成不同檔案了呢。

架構上，大概就是朝這個方向去改，去設計，就對了。

參考資料：

從 PHP + HTML 架構，擴展至 PHP + JSON + JQuery + JS Event + HTML 之筆記