如何让程序员更容易的开发Web界面？重构SmartAdmin展示TinyUI
生活随笔
收集整理的這篇文章主要介紹了
如何让程序员更容易的开发Web界面？重构SmartAdmin展示TinyUI
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
如何讓程序員更容易的開發(fā)Web界面，是一個持久的話題，所有的從事相關(guān)開發(fā)的公司都會碰到這個問題，并且被這個問題所深深困擾。
Tiny框架也不得不直視這個問題，確實來說，想解決這個問題，也是非常有難度與深度的，業(yè)界也有各種各樣的嘗試，這也是有各種各樣不同框架出現(xiàn)的原因。
Tiny框架構(gòu)建者認為， 完全采用一種框架解決所有問題，是不現(xiàn)實的。而且即使目前找得到一種非常好的框架，暫時可以滿足應(yīng)用需要，但是隨著技術(shù)的發(fā)展，業(yè)務(wù)的進化，就會慢慢變得不再滿足業(yè)務(wù)需要。因此，Tiny框架構(gòu)建從不再把做一套UI組件去適各種需求作為自己的目標。
反過來，我們看看在做Web應(yīng)用中，可能會碰到的問題：
SmartAdmin初識
SmartAdmin是一套基于JQuery,Bootstrap構(gòu)建的UI組件庫，說直白些，它就是個大雜燴，它把各種JQuery插件和Bootstrap整合到一起，提供了一整套基本完整的應(yīng)用開發(fā)UI庫，基本是拿著它就可以用來非常專業(yè)的應(yīng)用系統(tǒng)了。
下面是界面，當然它內(nèi)嵌提供了四套皮膚，可以進行切換的：
由于SmartAdmin是商業(yè)產(chǎn)品，需要購買，因此不能提供其Copy，據(jù)說在Baidu可以搜到，據(jù)說可以下載。如果只是想看一下的話，請點擊此鏈接： http://192.241.236.31/test4.smartadmin/
SmartAdmin分析 通過對SmartAdmin的分析，發(fā)現(xiàn)其復(fù)用了大量的開源插件，并且利用了Ajax加載技術(shù)，在運行期加載了大量的JS插件或CSS，整個頁面采用Html+JS整合而成，許多JS與頁面還是分離的，也就是說對本頁面中的Dom元素的處理的JS不一定在當前html文件中，所以要想看得懂是非常困難的，如果想把它應(yīng)用在自己的項目當中，也是非常困難的一件事情。
舉個例子來說，要顯示一個小部件，需要寫這么一段內(nèi)容：
?
這個程序員處理起來還是相當有難度的，好吧，這還不算過分的。 執(zhí)行下面的命令：
dir *.js /s /w運行結(jié)果： ?
執(zhí)行下面的命令：
dir *.css /s /w運行結(jié)果： ?
里面有這么多的JS，有這么多的CSS，它們的引入順序也是非常重要的，稍有差錯，就會有js錯誤的問題。 再來看看，JS加載過程：
可以看到，要訪問大量的js，CSS，對于服務(wù)器的壓力是比較大的，客戶端加載時間也是比較長的，程序員要厘清這些關(guān)系，也是非常困難的。
SmartAdmin重構(gòu) 對SmartAdmin重構(gòu)，是指按照Tiny框架的體系結(jié)構(gòu)來進行重構(gòu)。 第一步，厘清關(guān)系 通過整理，發(fā)現(xiàn)smartadmin中使用的js插件有如下之多：
第二步：UI插件，組件包化： 比如JQuery組件包化，就是編寫下面的文件：jquery.ui.xml
比如JQueryUI組修的包化，就是編寫下面的文件：jqueryui.ui.xml
比如BootStrap組件包化，就是寫下面的文件：bootstrap.ui.xml
其它類推，最主要的目的就是要分清，用到哪些JS,哪些CSS，并且整理組件包之間的依賴關(guān)系，比如，上面 BootStrap就依賴了jqueryui，當然jqueryui依賴了JQuery
通過上面的依賴樹Tiny框架就可以自動構(gòu)建好CSS及JS資源。
因為這些資源都是放在Jar工程的main/resources目錄中，因此就直接打進jar包了。
第三步，編寫宏 比如，原來的Tab，需要涉及到html,js，編寫后續(xù)使用的宏如下：
以后的程序員就可以以如下方式編寫一個Tab頁了：
通過上面的處理，封閉了代碼的具體實現(xiàn)，而換之以容易理解的宏，在提升開發(fā)人員開發(fā)效率方面，提升代碼的易維護性方面都有顯著提升。尤其是在需要變化的時候，只要接口不變化，很多的時候，只要修改宏定義即可，對于程序員寫的界面文件，完全可以做到透明化處理。
重構(gòu)之后的結(jié)果
可以看到，重構(gòu)之后的界面樣式與原來沒有任何變化。
接下來看看，JS的加載：從原來的許多個js文件，變成只加載兩個，說明js文件已經(jīng)被合并并壓縮傳輸。
再來看看css的加載，可以看到，也是只需要一個就可以了：
重構(gòu)之后寫個小組件，是下面的樣子：
總結(jié) 通過對SmartAdmin進行重構(gòu)，成功的理清了smartadmin中的css,js關(guān)系，便于進行后續(xù)復(fù)用。
通過編寫宏，可以在組件開發(fā)人員與頁面開發(fā)人員之間進行隔離。由組件開發(fā)人員與js,css等打交道，而讓頁面開發(fā)人員只關(guān)注業(yè)務(wù)展現(xiàn)。
Tiny框架也不得不直視這個問題，確實來說，想解決這個問題，也是非常有難度與深度的，業(yè)界也有各種各樣的嘗試，這也是有各種各樣不同框架出現(xiàn)的原因。
Tiny框架構(gòu)建者認為， 完全采用一種框架解決所有問題，是不現(xiàn)實的。而且即使目前找得到一種非常好的框架，暫時可以滿足應(yīng)用需要，但是隨著技術(shù)的發(fā)展，業(yè)務(wù)的進化，就會慢慢變得不再滿足業(yè)務(wù)需要。因此，Tiny框架構(gòu)建從不再把做一套UI組件去適各種需求作為自己的目標。
反過來，我們看看在做Web應(yīng)用中，可能會碰到的問題：
- UI中JS的引入與順序，JS合并的問題
- UI中css的引入與順序，CSS合并的問題
- UI中碰到性能問題時的影響范圍，比如：一個樹出現(xiàn)問題，要改動許多用到樹的地方
- 代碼重復(fù)的問題，同樣的內(nèi)容在許多地方都有，如果要改動就要改動許多個地方
- 整體布局調(diào)整困難的問題
- 程序員需要關(guān)注的內(nèi)容太多的問題，JS,CSS,布局，后臺業(yè)務(wù)，前臺展現(xiàn)，尼瑪界面工程師必須得是全才才可以搞得定所有問題。
- 開發(fā)效率的問題
- 執(zhí)行效率的問題，前臺響應(yīng)要求速度更快
- 集群的問題
- 國際化的問題
- ...
SmartAdmin初識
SmartAdmin是一套基于JQuery,Bootstrap構(gòu)建的UI組件庫，說直白些，它就是個大雜燴，它把各種JQuery插件和Bootstrap整合到一起，提供了一整套基本完整的應(yīng)用開發(fā)UI庫，基本是拿著它就可以用來非常專業(yè)的應(yīng)用系統(tǒng)了。
下面是界面，當然它內(nèi)嵌提供了四套皮膚，可以進行切換的：
085559_R5hc_1245989.jpg (65.3 KB, 下載次數(shù): 0)
下載附件
由于SmartAdmin是商業(yè)產(chǎn)品，需要購買，因此不能提供其Copy，據(jù)說在Baidu可以搜到，據(jù)說可以下載。如果只是想看一下的話，請點擊此鏈接： http://192.241.236.31/test4.smartadmin/
SmartAdmin分析 通過對SmartAdmin的分析，發(fā)現(xiàn)其復(fù)用了大量的開源插件，并且利用了Ajax加載技術(shù)，在運行期加載了大量的JS插件或CSS，整個頁面采用Html+JS整合而成，許多JS與頁面還是分離的，也就是說對本頁面中的Dom元素的處理的JS不一定在當前html文件中，所以要想看得懂是非常困難的，如果想把它應(yīng)用在自己的項目當中，也是非常困難的一件事情。
舉個例子來說，要顯示一個小部件，需要寫這么一段內(nèi)容：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <div class="jarviswidget" id="wid-id-0"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <h2><strong>Default</strong> <i>Widget</i></h2> </header> <!-- widget div--> < div> <!-- widget edit box --> < div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> < input class="form-control" type="text"> <span class="note"><i class="fa fa-check text-success"></i> Change title to update and save instantly!</span> </div> <!-- end widget edit box --> <!-- widget content --> < div class="widget-body"> <p> Widget comes with a default 10 padding to the body which can be removed by adding the class <code>.no-padding</code> to the <code>.widget-body</code> class. The default widget also comes with 5 widget buttons as displayed on top right corner of the widget header. </p> <a href="javascript:void(0);" class="btn btn-default btn-lg"> <strong>Big</strong> <i>Button</i> </a> </div> <!-- end widget content --> </div> <!-- end widget div --> < /div> |
這個程序員處理起來還是相當有難度的，好吧，這還不算過分的。 執(zhí)行下面的命令：
dir *.js /s /w運行結(jié)果： ?
| 1 2 | 所列文件總數(shù): 310 個文件 6,043,053 字節(jié) |
執(zhí)行下面的命令：
dir *.css /s /w運行結(jié)果： ?
| 1 2 | 所列文件總數(shù): 36 個文件 1,511,412 字節(jié) |
里面有這么多的JS，有這么多的CSS，它們的引入順序也是非常重要的，稍有差錯，就會有js錯誤的問題。 再來看看，JS加載過程：
093417_JwIh_1245989.jpg (131.21 KB, 下載次數(shù): 0)
下載附件
可以看到，要訪問大量的js，CSS，對于服務(wù)器的壓力是比較大的，客戶端加載時間也是比較長的，程序員要厘清這些關(guān)系，也是非常困難的。
SmartAdmin重構(gòu) 對SmartAdmin重構(gòu)，是指按照Tiny框架的體系結(jié)構(gòu)來進行重構(gòu)。 第一步，厘清關(guān)系 通過整理，發(fā)現(xiàn)smartadmin中使用的js插件有如下之多：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | bootstrap bootstrapProgressbar bootstrapSlider bootstrapTags bootstrapTimepicker bootstraptree bootstrapWizard ckeditor colorhelpers colorpicker datatables delete-table-row dropzone easyPieChart excanvas fastclick flot FontAwesome fueluxwizard fullcalendar ie-placeholder ion-slider jquery jquery-form jquery-nestable jquery-touch jqueryui jqueryvalidate js-migrate jstorage knob markdown maskedInput maxlength morris msieFix multiselect notification noUiSlider pace prettify raphael select2 selectToUISlider smartadmin smartwidgets sparkline summernote superbox throttle-denounce typeahead vectormap x-editable |
第二步：UI插件，組件包化： 比如JQuery組件包化，就是編寫下面的文件：jquery.ui.xml
| 1 2 3 4 5 | <ui-components> <ui-component name="jquery"> <js-resource>/jquery/jquery-1.11.0.js</js-resource> </ui-component> < /ui-components> |
比如JQueryUI組修的包化，就是編寫下面的文件：jqueryui.ui.xml
| 1 2 3 4 5 6 | <ui-components> <ui-component name="jqueryui" dependencies="jquery"> <js-resource>/jqueryui/js/jquery-ui-1.10.4.custom.js</js-resource> <css-resource>/jqueryui/css/smoothness/jquery-ui-1.10.4.custom.css</css-resource> </ui-component> < /ui-components> |
比如BootStrap組件包化，就是寫下面的文件：bootstrap.ui.xml
| 1 2 3 4 5 6 | <ui-components> <ui-component name="bootstrap" dependencies="jqueryui"> <css-resource>/bootstrap/css/bootstrap.min.css</css-resource> <js-resource>/bootstrap/js/bootstrap.js</js-resource> </ui-component> < /ui-components> |
其它類推，最主要的目的就是要分清，用到哪些JS,哪些CSS，并且整理組件包之間的依賴關(guān)系，比如，上面 BootStrap就依賴了jqueryui，當然jqueryui依賴了JQuery
通過上面的依賴樹Tiny框架就可以自動構(gòu)建好CSS及JS資源。
因為這些資源都是放在Jar工程的main/resources目錄中，因此就直接打進jar包了。
第三步，編寫宏 比如，原來的Tab，需要涉及到html,js，編寫后續(xù)使用的宏如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | #** * JqueryUI Tab * juiTab[1..1] * juiTabHeader[1..1] * juiTabHeaderItem[1..n] * juiTabContentItem[1..n] *# #macro(juiTab $juiTabId) < div id="$juiTabId"> $bodyContent < /div> < script> $(document).ready(function(){ $('#$juiTabId').tabs(); }); < /script> #end #macro(juiTabHeader) < ul> $bodyContent < /ul> #end #macro(juiTabHeaderItem $juiTabContentItemId) < li> <a href="#$juiTabContentItemId">$bodyContent</a> < /li> #end #macro(juiTabContentItem $juiTabContentItemId) < div id="$juiTabContentItemId"> $bodyContent < /div> #end |
以后的程序員就可以以如下方式編寫一個Tab頁了：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #@juiTab("tabs") #@juiTabHeader() #@juiTabHeaderItem("tabs-a")First#end #@juiTabHeaderItem("tabs-b")Second#end #@juiTabHeaderItem("tabs-c")Third#end #end #@juiTabContentItem("tabs-a") tabs-a content #end #@juiTabContentItem("tabs-b") tabs-b content #end #@juiTabContentItem("tabs-c") tabs-c content #end #end |
通過上面的處理，封閉了代碼的具體實現(xiàn)，而換之以容易理解的宏，在提升開發(fā)人員開發(fā)效率方面，提升代碼的易維護性方面都有顯著提升。尤其是在需要變化的時候，只要接口不變化，很多的時候，只要修改宏定義即可，對于程序員寫的界面文件，完全可以做到透明化處理。
重構(gòu)之后的結(jié)果
095647_eKv2_1245989.jpg (116.15 KB, 下載次數(shù): 0)
下載附件
可以看到，重構(gòu)之后的界面樣式與原來沒有任何變化。
接下來看看，JS的加載：從原來的許多個js文件，變成只加載兩個，說明js文件已經(jīng)被合并并壓縮傳輸。
095845_XPrk_1245989.jpg (22.87 KB, 下載次數(shù): 0)
下載附件
再來看看css的加載，可以看到，也是只需要一個就可以了：
100106_Nfi0_1245989.jpg (19.11 KB, 下載次數(shù): 0)
下載附件
重構(gòu)之后寫個小組件，是下面的樣子：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #@jarvisWidget("wid-id-0" '<strong>Default</strong> <i>Widget</i>') #@jarvisWidgetHeader() #end #@jarvisWidgetBody() #@widgetEditBox() <input class="form-control" type="text"> <span class="note"><i class="fa fa-check text-success"></i> Change title to update and save instantly!</span> #end #@widgetBody() <p> Widget comes with a default 10 padding to the body which can be removed by adding the class <code>.no-padding</code> to the <code>.widget-body</code> class. The default widget also comes with 5 widget buttons as displayed on top right corner of the widget header. </p> <a href="javascript:void(0);" class="btn btn-default btn-lg"> <strong>Big</strong> <i>Button</i> </a> #end #end #end |
總結(jié) 通過對SmartAdmin進行重構(gòu)，成功的理清了smartadmin中的css,js關(guān)系，便于進行后續(xù)復(fù)用。
通過編寫宏，可以在組件開發(fā)人員與頁面開發(fā)人員之間進行隔離。由組件開發(fā)人員與js,css等打交道，而讓頁面開發(fā)人員只關(guān)注業(yè)務(wù)展現(xiàn)。
總結(jié)
以上是生活随笔為你收集整理的如何让程序员更容易的开发Web界面？重构SmartAdmin展示TinyUI的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centos7 zookeeper3.5
- 下一篇： LR预设王家卫港风胶片复古调色滤镜支持P