如何讓程序員更容易的開發Web界面？重構SmartAdmin展現TinyUI框架

時間 2019-11-09

標籤如何程序員容易開發 web 界面 smartadmin 展現 tinyui 框架欄目快樂工作简体版

原文原文鏈接

序言

如何讓程序員更容易的開發Web界面，是一個持久的話題，全部的從事相關開發的公司都會碰到這個問題，而且被這個問題所深深困擾。 javascript

Tiny框架也不得不直視這個問題，確實來講，想解決這個問題，也是很是有難度與深度的，業界也有各類各樣的嘗試，這也是有各類各樣不一樣框架出現的緣由。 css

Tiny框架構建者認爲，徹底採用一種框架解決全部問題，是不現實的。並且即便目前找獲得一種很是好的框架，暫時能夠知足應用須要，可是隨着技術的發展，業務的進化，就會慢慢變得再也不知足業務須要。所以，Tiny框架構建從再也不把作一套UI組件去適各類需求做爲本身的目標。 html

反過來，咱們看看在作Web應用中，可能會碰到的問題： java

UI中JS的引入與順序，JS合併的問題
UI中css的引入與順序，CSS合併的問題
UI中碰到性能問題時的影響範圍，好比：一個樹出現問題，要改動許多用到樹的地方
代碼重複的問題，一樣的內容在許多地方都有，若是要改動就要改動許多個地方
總體佈局調整困難的問題
程序員須要關注的內容太多的問題，JS,CSS,佈局，後臺業務，前臺展示，尼瑪界面工程師必須得是全才才能夠搞得定全部問題。
開發效率的問題
執行效率的問題，前臺響應要求速度更快
集羣的問題
國際化的問題
...

所以，我在之前寫過一篇文章：UI開發的終極解決方案感興趣的同窗，能夠去看看，今天的目標是利用TinyUI框架的重構SmartAdmin，使得更容易被使用。 jquery

SmartAdmin初識

SmartAdmin是一套基於JQuery,Bootstrap構建的UI組件庫，說直白些，它就是個大雜燴，它把各類JQuery插件和Bootstrap整合到一塊兒，提供了一整套基本完整的應用開發UI庫，基本是拿着它就能夠用來很是專業的應用系統了。

下面是界面，固然它內嵌提供了四套皮膚，能夠進行切換的：

因爲SmartAdmin是商業產品，須要購買，所以不能提供其Copy，聽說在Baidu能夠搜到，聽說能夠下載。若是隻是想看一下的話，請點擊此連接：http://192.241.236.31/test4.smartadmin/ 程序員

SmartAdmin分析

經過對SmartAdmin的分析，發現其複用了大量的開源插件，而且利用了Ajax加載技術，在運行期加載了大量的JS插件或CSS，整個頁面採用Html+JS整合而成，許多JS與頁面仍是分離的，也就是說對本頁面中的Dom元素的處理的JS不必定在當前html文件中，因此要想看得懂是很是困難的，若是想把它應用在本身的項目當中，也是很是困難的一件事情。 bootstrap

舉個例子來講，要顯示一個小部件，須要寫這麼一段內容： canvas

<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>

這個程序員處理起來仍是至關有難度的，好吧，這還不算過度的。

執行下面的命令：服務器

dir *.js /s /w

運行結果：

所列文件總數:
        310 個文件      6,043,053 字節

執行下面的命令： markdown

dir *.css /s /w

運行結果：

所列文件總數:
         36 個文件      1,511,412 字節

裏面有這麼多的JS，有這麼多的CSS，它們的引入順序也是很是重要的，稍有差錯，就會有js錯誤的問題。

再來看看，JS加載過程：

能夠看到，要訪問大量的js，CSS，對於服務器的壓力是比較大的，客戶端加載時間也是比較長的，程序員要釐清這些關係，也是很是困難的。

SmartAdmin重構

對SmartAdmin重構，是指按照Tiny框架的體系結構來進行重構。

第一步，釐清關係

經過整理，發現smartadmin中使用的js插件有以下之多：

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

<ui-components>
    <ui-component name="jquery">
        <js-resource>/jquery/jquery-1.11.0.js</js-resource>
    </ui-component>
</ui-components>

好比JQueryUI組修的包化，就是編寫下面的文件：jqueryui.ui.xml

<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

<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，而且整理組件包之間的依賴關係，好比，上面BootStrap就依賴了jqueryui，固然jqueryui依賴了JQuery

經過上面的依賴樹Tiny框架就能夠自動構建好CSS及JS資源。

由於這些資源都是放在Jar工程的main/resources目錄中，所以就直接打進jar包了。

第三步，編寫宏

好比，原來的Tab，須要涉及到html,js，編寫後續使用的宏以下：

#**
 * 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頁了：

#@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

經過上面的處理，封閉了代碼的具體實現，而換之以容易理解的宏，在提高開發人員開發效率方面，提高代碼的易維護性方面都有顯著提高。尤爲是在須要變化的時候，只要接口不變化，不少的時候，只要修改宏定義便可，對於程序員寫的界面文件，徹底能夠作到透明化處理。

重構以後的結果

能夠看到，重構以後的界面樣式與原來沒有任何變化。

接下來看看，JS的加載：從原來的許多個js文件，變成只加載兩個，說明js文件已經被合併並壓縮傳輸。

再來看看css的加載，能夠看到，也是隻須要一個就能夠了：

重構以後寫個小組件，是下面的樣子：

#@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