如何让程序员更容易的开发Web界面？重构SmartAdmin展示TinyUI框架
序言
如何讓程序員更容易的開(kāi)發(fā)Web界面，是一個(gè)持久的話(huà)題，所有的從事相關(guān)開(kāi)發(fā)的公司都會(huì)碰到這個(gè)問(wèn)題，并且被這個(gè)問(wèn)題所深深困擾。
Tiny框架也不得不直視這個(gè)問(wèn)題，確實(shí)來(lái)說(shuō)，想解決這個(gè)問(wèn)題，也是非常有難度與深度的，業(yè)界也有各種各樣的嘗試，這也是有各種各樣不同框架出現(xiàn)的原因。
Tiny框架構(gòu)建者認(rèn)為，完全采用一種框架解決所有問(wèn)題，是不現(xiàn)實(shí)的。而且即使目前找得到一種非常好的框架，暫時(shí)可以滿(mǎn)足應(yīng)用需要，但是隨著技術(shù)的發(fā)展，業(yè)務(wù)的進(jìn)化，就會(huì)慢慢變得不再滿(mǎn)足業(yè)務(wù)需要。因此，Tiny框架構(gòu)建從不再把做一套UI組件去適各種需求作為自己的目標(biāo)。
反過(guò)來(lái)，我們看看在做Web應(yīng)用中，可能會(huì)碰到的問(wèn)題：
因此，我在以前寫(xiě)過(guò)一篇文章：UI開(kāi)發(fā)的終極解決方案感興趣的同學(xué)，可以去看看，今天的目標(biāo)是利用TinyUI框架的重構(gòu)SmartAdmin，使得更容易被使用。
SmartAdmin初識(shí)
SmartAdmin是一套基于JQuery,Bootstrap構(gòu)建的UI組件庫(kù)，說(shuō)直白些，它就是個(gè)大雜燴，它把各種JQuery插件和Bootstrap整合到一起，提供了一整套基本完整的應(yīng)用開(kāi)發(fā)UI庫(kù)，基本是拿著它就可以用來(lái)非常專(zhuān)業(yè)的應(yīng)用系統(tǒng)了。
下面是界面，當(dāng)然它內(nèi)嵌提供了四套皮膚，可以進(jìn)行切換的：
由于SmartAdmin是商業(yè)產(chǎn)品，需要購(gòu)買(mǎi)，因此不能提供其Copy，據(jù)說(shuō)在Baidu可以搜到，據(jù)說(shuō)可以下載。如果只是想看一下的話(huà)，請(qǐng)點(diǎn)擊此鏈接：http://192.241.236.31/test4.smartadmin/
SmartAdmin分析
通過(guò)對(duì)SmartAdmin的分析，發(fā)現(xiàn)其復(fù)用了大量的開(kāi)源插件，并且利用了Ajax加載技術(shù)，在運(yùn)行期加載了大量的JS插件或CSS，整個(gè)頁(yè)面采用Html+JS整合而成，許多JS與頁(yè)面還是分離的，也就是說(shuō)對(duì)本頁(yè)面中的Dom元素的處理的JS不一定在當(dāng)前html文件中，所以要想看得懂是非常困難的，如果想把它應(yīng)用在自己的項(xiàng)目當(dāng)中，也是非常困難的一件事情。
舉個(gè)例子來(lái)說(shuō)，要顯示一個(gè)小部件，需要寫(xiě)這么一段內(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 運(yùn)行結(jié)果： ?| 1 2 | 所列文件總數(shù): ????????310 個(gè)文件????? 6,043,053 字節(jié) |
執(zhí)行下面的命令：
dir *.css /s /w 運(yùn)行結(jié)果： ?| 1 2 | 所列文件總數(shù): ?????????36 個(gè)文件????? 1,511,412 字節(jié) |
再來(lái)看看，JS加載過(guò)程：
可以看到，要訪(fǎng)問(wèn)大量的js，CSS，對(duì)于服務(wù)器的壓力是比較大的，客戶(hù)端加載時(shí)間也是比較長(zhǎng)的，程序員要厘清這些關(guān)系，也是非常困難的。
SmartAdmin重構(gòu)
對(duì)SmartAdmin重構(gòu)，是指按照Tiny框架的體系結(jié)構(gòu)來(lái)進(jìn)行重構(gòu)。第一步，厘清關(guān)系
通過(guò)整理，發(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組件包化，就是編寫(xiě)下面的文件：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組修的包化，就是編寫(xiě)下面的文件：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組件包化，就是寫(xiě)下面的文件：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> |
其它類(lèi)推，最主要的目的就是要分清，用到哪些JS,哪些CSS，并且整理組件包之間的依賴(lài)關(guān)系，比如，上面BootStrap就依賴(lài)了jqueryui，當(dāng)然jqueryui依賴(lài)了JQuery
通過(guò)上面的依賴(lài)樹(shù)Tiny框架就可以自動(dòng)構(gòu)建好CSS及JS資源。
因?yàn)檫@些資源都是放在Jar工程的main/resources目錄中，因此就直接打進(jìn)jar包了。
第三步，編寫(xiě)宏
比如，原來(lái)的Tab，需要涉及到html,js，編寫(xiě)后續(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 |
以后的程序員就可以以如下方式編寫(xiě)一個(gè)Tab頁(yè)了：
?
| 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 |
通過(guò)上面的處理，封閉了代碼的具體實(shí)現(xiàn)，而換之以容易理解的宏，在提升開(kāi)發(fā)人員開(kāi)發(fā)效率方面，提升代碼的易維護(hù)性方面都有顯著提升。尤其是在需要變化的時(shí)候，只要接口不變化，很多的時(shí)候，只要修改宏定義即可，對(duì)于程序員寫(xiě)的界面文件，完全可以做到透明化處理。
重構(gòu)之后的結(jié)果
可以看到，重構(gòu)之后的界面樣式與原來(lái)沒(méi)有任何變化。
接下來(lái)看看，JS的加載：從原來(lái)的許多個(gè)js文件，變成只加載兩個(gè)，說(shuō)明js文件已經(jīng)被合并并壓縮傳輸。
再來(lái)看看css的加載，可以看到，也是只需要一個(gè)就可以了：
重構(gòu)之后寫(xiě)個(gè)小組件，是下面的樣子：
?| 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é)
通過(guò)對(duì)SmartAdmin進(jìn)行重構(gòu)，成功的理清了smartadmin中的css,js關(guān)系，便于進(jìn)行后續(xù)復(fù)用。
通過(guò)編寫(xiě)宏，可以在組件開(kāi)發(fā)人員與頁(yè)面開(kāi)發(fā)人員之間進(jìn)行隔離。由組件開(kāi)發(fā)人員與js,css等打交道，而讓頁(yè)面開(kāi)發(fā)人員只關(guān)注業(yè)務(wù)展現(xiàn)。
總結(jié)
以上是生活随笔為你收集整理的如何让程序员更容易的开发Web界面？重构SmartAdmin展示TinyUI框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 网口扫盲二:Mac与Phy组成原理的简单
- 下一篇： centos7 kafka2.3.1单点