呵呵，有點(diǎn)標(biāo)題黨的意思，但是如果你正在尋找UI解決方案，你一定不會(huì)白來(lái)的。  雖然沒(méi)有直接開(kāi)發(fā)前臺(tái)界面，但是好呆也看了這么些年，碰到許多關(guān)于UI的問(wèn)題：

• UI中JS的引入與順序，JS合并的問(wèn)題
• UI中css的引入與順序，CSS合并的問(wèn)題
• UI中碰到性能問(wèn)題時(shí)的影響范圍，比如：一個(gè)樹(shù)出現(xiàn)問(wèn)題，要改動(dòng)許多用到樹(shù)的地方
• 代碼重復(fù)的問(wèn)題，同樣的內(nèi)容在許多地方都有，如果要改動(dòng)就要改動(dòng)許多個(gè)地方
• 整體布局調(diào)整困難的問(wèn)題
• 開(kāi)發(fā)效率的問(wèn)題
• 執(zhí)行效率的問(wèn)題，前臺(tái)響應(yīng)要求速度更快
• 集群的問(wèn)題
• 國(guó)際化的問(wèn)題
• ...
  

這些問(wèn)題直接帶來(lái)開(kāi)發(fā)得是否夠快，系統(tǒng)是否夠健壯，系統(tǒng)是否易擴(kuò)展，是否易維護(hù)等等。
為此，在Tiny框架中，我們?cè)O(shè)計(jì)了整套的UI開(kāi)發(fā)方案，與具體的技術(shù)實(shí)現(xiàn)無(wú)關(guān)，可以兼容各種現(xiàn)有或未來(lái)的JS,CSS框架。同時(shí)，對(duì)于上述的問(wèn)題，也都有良好的思考及解決方案，可謂是界面開(kāi)發(fā)的終極解決方案。
那么，Tiny框架的UI解決方案是怎樣的呢？
一、規(guī)范化，如果沒(méi)有一個(gè)規(guī)范，那么所有的期許都無(wú)法落地。
Tiny中規(guī)范中認(rèn)為所有共用的內(nèi)容都是一個(gè)UI組件包。UI組件包，由一個(gè)Jar工程組成，UI組件名最后以Jar名為單位進(jìn)行發(fā)布。UI組件包中包含了其所需的css/jss/gif/htm等等各種資源。同時(shí)有一個(gè)UI組件包描述文件，對(duì)UI組件包的結(jié)構(gòu)、內(nèi)容、以及對(duì)其它UI組件包的依賴關(guān)系。
比如：我們要復(fù)用JQuery，實(shí)際上非常簡(jiǎn)單，在Maven工程結(jié)構(gòu)中，在resources目錄中，放置所有的JQuery資源進(jìn)來(lái)，然后編寫(xiě)一個(gè)ui組件包描述文件。UI組件包就算開(kāi)發(fā)完畢了。
 
再看看UI組件包描述文件

1 2 3 4 5 6

<ui-components>     <ui-component name="Jquery" order="99">         <js-resource>/jquery/js/jquery-1.9.1.min.js</js-resource>         <js-debug-resource>/jquery/js/jquery-1.9.1.js</js-debug-resource>     </ui-component> < /ui-components>

UI組件名描述信息，包含UI組件名名稱，這里是JQuery，引入順序，這里指定是99，當(dāng)然，在大多數(shù)情況下，你都不需要指定它。這里指定了調(diào)試和非調(diào)試模式下引入的JS。這樣，在實(shí)際運(yùn)行時(shí)，可以根據(jù)運(yùn)行模式來(lái)統(tǒng)一進(jìn)行引入，而這個(gè)過(guò)程不再需要程序員干預(yù)。  OK，mvn install之后，第一個(gè)UI組件包就開(kāi)發(fā)好了，非常簡(jiǎn)單吧?
二、引擎支持
引擎要做內(nèi)容就非常多了，這些js/css/img資源都是放在Jar包中的，在工程運(yùn)行過(guò)程中，需要訪問(wèn)到這些文件，引擎提供了訪問(wèn)Jar包中文件的能力，提供了css/js文件合并，提供根據(jù)運(yùn)行模式引入調(diào)試或非調(diào)試JS或CSS的能力，提供文件緩沖以提速訪問(wèn)，提供壓縮以縮小網(wǎng)絡(luò)傳輸量，等等等等。當(dāng)然，這些都相當(dāng)有難度，但這正是框架要解決的問(wèn)題，對(duì)于程序員來(lái)說(shuō)，與平時(shí)所做的內(nèi)容唯一不同就是需要配置一個(gè)UI描述文件。用如此小的付出換來(lái)如此多的便捷，投入產(chǎn)出比還是相當(dāng)高的。
三、模板化支持
我們都知道不管是html,xml,wml等等，實(shí)際上都是文本內(nèi)容，都是一些標(biāo)記語(yǔ)言。因此，都可以通過(guò)一些模板語(yǔ)言來(lái)進(jìn)行生成，我們常說(shuō)的asp,aspx,jsp,php等等，實(shí)際上都可以認(rèn)為是模板語(yǔ)言。
Tiny框架因?yàn)樘峁┝肆己玫哪K化組織方式，展現(xiàn)層的內(nèi)容也是可以放在jar包中的，因此，不再推薦使用jsp作為展現(xiàn)層(在某些容器如：tomcat,jetty，也是可以放入的，但是在Weblogic,Websphere等容器下，由于其沒(méi)有遵循接口編程規(guī)范，而是使用了類型強(qiáng)轉(zhuǎn)，所以無(wú)法進(jìn)行處理)。另外，由于jsp自身的特殊性，實(shí)際上它最后是以Servlet形式存在，所以可控性稍差，雖然通過(guò)處理可以對(duì)其進(jìn)行控制，但是投入產(chǎn)出比不高。所以，Tiny框架并不排斥，使用jsp，但是只能放在war中使用。帶來(lái)的問(wèn)題就是展現(xiàn)層無(wú)法模塊化。（關(guān)于模板化的相關(guān)問(wèn)題不在此說(shuō)明，參見(jiàn)相關(guān)博文）。
因此Tiny推薦采用模板語(yǔ)言,如：Velocity,FreeMaker等作為展現(xiàn)層。Tiny內(nèi)部實(shí)現(xiàn)復(fù)用了Velocity，但是實(shí)際上并沒(méi)有限制，你完全可以用其它模板語(yǔ)言做同樣的事情。
Tiny的模板體系組織方式如下：

• 支持多層文件結(jié)構(gòu)
• 布局文件統(tǒng)一用.layout擴(kuò)展名結(jié)尾
• 頁(yè)面文件統(tǒng)一用.page擴(kuò)展名結(jié)構(gòu)
• 只有.page文件可以被外部訪問(wèn)，訪問(wèn)方式有兩種.page或.pagelet
  

Tiny的模板渲染方式為：
如果訪問(wèn)aa.pagelet，則會(huì)讀取aa.page中的文件內(nèi)容，并用velocity引擎進(jìn)行渲染后輸出
如果訪問(wèn)aa.page，則會(huì)讀取aa.page中的文件內(nèi)容，并用velocity引擎進(jìn)行渲染，但是此時(shí)會(huì)做布局渲染
比如：aa.page所中的路徑是/a/b/c/aa.page，布局的渲染過(guò)程如下：
查找/a/b/c/aa.layout是否存在？如果存在，則渲染，否則查找/a/b/c/default.layout，如果存在，則渲染。

查找/a/b/aa.layout是否存在？如果存在，則渲染，否則查找/a/b/default.layout，如果存在，則渲染。
查找/a/aa.layout是否存在？如果存在，則渲染，否則查找/a/default.layout，如果存在，則渲染。
查找/aa.layout是否存在？如果存在，則渲染，否則查找/default.layout，如果存在，則渲染。
通過(guò)上面的渲染機(jī)制，程序員有可能只寫(xiě)了非常少的內(nèi)容，但是通過(guò)分層布局渲染，最后出來(lái)的效果也會(huì)非常豐富多彩。
這樣說(shuō)說(shuō)，可能很難理解，我們來(lái)看個(gè)例子，程序?qū)懙睦邮牵篸emo.page。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#@homepage() #@faq("演示列表") #@servicesItem("idea") HelloWorld #end #@servicesItem("design") 四則運(yùn)算 #end #@servicesItem("apps") 簡(jiǎn)單數(shù)據(jù)維護(hù) #end #@servicesItem("mobile") 站內(nèi)郵件系統(tǒng) #end #end #end

運(yùn)行結(jié)果如下：    
可能看了有些云里霧里，但是不管怎么樣，你看到了，只要寫(xiě)非常少的內(nèi)容，就可以出來(lái)非常多的結(jié)果。
通過(guò)布局的支持，程序員不用管js，不用管css，不用管header,footer，不用管頁(yè)面結(jié)構(gòu)，只用管自己的那點(diǎn)事兒，就可以了。
國(guó)際化，可能對(duì)于小型個(gè)人網(wǎng)站來(lái)說(shuō)，無(wú)所謂，但是對(duì)于大型企業(yè)來(lái)說(shuō)是經(jīng)常要用到的。TinyUI展現(xiàn)框架對(duì)國(guó)際化有良好支持，支持國(guó)際化資源方式國(guó)際化和國(guó)際化頁(yè)面國(guó)際化兩種方案。
國(guó)際化資源就很容易理解了，添加國(guó)際化資源文件，用國(guó)際化標(biāo)簽進(jìn)行引用即可。國(guó)際化頁(yè)面是指同樣訪問(wèn)aa.page，在對(duì)其渲染時(shí)，會(huì)優(yōu)先使用與訪問(wèn)者相同的語(yǔ)言的文件進(jìn)行渲染，比如：存在aa.page，aa.zh_CN.page，如果非zh_CN語(yǔ)言的人來(lái)訪問(wèn)，渲染的是aa.page，zh_CN語(yǔ)言的人來(lái)訪問(wèn)，渲染的是aa.zh_CN.page。兩種方式總有一款適合你。
小結(jié)：
Tiny框架的前臺(tái)開(kāi)發(fā)，基本上幫助你解決了所有的難題，但是對(duì)你的工作沒(méi)有任何限制，你可以用你想用的任何展現(xiàn)框架，做任何基于腳本語(yǔ)言的展現(xiàn)。當(dāng)然還遠(yuǎn)遠(yuǎn)不止這些，框架還提供了緩沖功能，只要增加一點(diǎn)配置，就可以設(shè)定哪些頁(yè)面進(jìn)行緩沖，緩沖多長(zhǎng)時(shí)間，等等。更多的好處與便利，需要你親身體會(huì)。

分享題目：UI開(kāi)發(fā)的終極解決方案
當(dāng)前鏈接：http://jinyejixie.com/article22/ippdcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、做網(wǎng)站、搜索引擎優(yōu)化、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)