對于前端頁面和后端代碼的分離，ASP.NET WEBFORM和ASP.NET MVC都在不同方面做了努力。

在這里提出一些自己初步的設(shè)想，只是初步的設(shè)想，對各種質(zhì)量特性并沒有經(jīng)過驗(yàn)證，就不放首頁了。

?

我們的目的是：

?

1）產(chǎn)品或美工負(fù)責(zé)頁面布局、樣式以及基本的交互行為（不依賴業(yè)務(wù)邏輯的交互）。

2）開發(fā)人員只負(fù)責(zé)數(shù)據(jù)的填充。

3）產(chǎn)品提供的html不需要引入代碼進(jìn)行二次包裝，直接使用。

?

您可以覺得這就是模板的方式，模板的方式可以解決，但主要的問題是：

?

1）需要產(chǎn)品或美工熟悉標(biāo)記。

2）不太能實(shí)現(xiàn)根據(jù)動(dòng)態(tài)的邏輯來實(shí)現(xiàn)不同的數(shù)據(jù)呈現(xiàn)。

?

能不能反過來，產(chǎn)品在給出html+css+javascript之后，我們的開發(fā)人員只負(fù)責(zé)填充數(shù)據(jù)或是根據(jù)業(yè)務(wù)邏輯填充不同的數(shù)據(jù)？

?

我的設(shè)想如下：

1） 產(chǎn)品提供的html+css+javascript直接放在目錄下用。

2） 由一個(gè)Handler來處理所有請求，比如list.shml，然后找到目錄（配置為不可以直接訪問）下的html。

3） 加載html到緩存中，解析DOM。

4） 開發(fā)人員對每一個(gè)頁面提供一個(gè)cs文件，實(shí)現(xiàn)數(shù)據(jù)填充。

怎么進(jìn)行數(shù)據(jù)填充呢？首先從數(shù)據(jù)庫加載要填充的數(shù)據(jù)，然后指定數(shù)據(jù)填充到哪里。

比如 list 已經(jīng)是一個(gè)產(chǎn)品集合，調(diào)用框架類似 list.Fill(func, func) 的方法填充數(shù)據(jù)，第一個(gè)參數(shù)傳入一個(gè)方法指定填充的數(shù)據(jù)格式，比如p => p.Name，后面一個(gè)通過jquery選擇器指定要填充的對象。框架維護(hù)要渲染的數(shù)據(jù)以及jquery代碼兩個(gè)數(shù)據(jù)集合，分別渲染到頁面上。

也就是頁面由三個(gè)部分構(gòu)成：html模板 + json數(shù)據(jù) + jquery代碼。開發(fā)人員用c#代碼寫jquery代碼和獲取數(shù)據(jù)的代碼，然后交給框架去把數(shù)據(jù)和填充行為放到頁面上。

?

甚至，可以在項(xiàng)目中制作一個(gè)代碼生成工具，每次編譯自動(dòng)根據(jù)html代碼生成其中所有的id和class名等用于jquery定位，這樣代碼中選取器也不需要手動(dòng)寫，可以在編譯的時(shí)候發(fā)現(xiàn)可能存在的javascript問題。

對于這種模式，還可以反過來，可以把html文件放在獨(dú)立的服務(wù)器上，自動(dòng)ajax請求shtml文件獲取數(shù)據(jù)和填充腳本，然后執(zhí)行腳本進(jìn)行數(shù)據(jù)異步填充。

這樣的話，產(chǎn)品寫html/css/jquery，開發(fā)寫c#的jquery和數(shù)據(jù)訪問，大家甚至獨(dú)自維護(hù)自己的靜態(tài)和動(dòng)態(tài)服務(wù)器。

?

您可能要說這不就相當(dāng)于全ajax的頁面嗎，其實(shí)這么做的好處是，開發(fā)人員可以直接寫了c#的數(shù)據(jù)訪問代碼后又直接寫c#的js代碼，由框架確保了這些腳本和數(shù)據(jù)的呈現(xiàn)，可以利用大量自動(dòng)提示的特性，不會(huì)出現(xiàn)前后臺不一致的現(xiàn)象（不需要根據(jù)json的格式寫客戶端的腳本文件，只需要在服務(wù)端根據(jù)c#對象的格式寫代碼，這和asp.net的控件方式有什么區(qū)別？其實(shí)理論上來說相當(dāng)于dom+jquery版的控件操作和訪問，好處是可以直接使用html）。

總結(jié)

以上是生活随笔為你收集整理的UI分离引擎的设想的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。