兩年前，曾打算自己開發(fā)一個(gè)web開發(fā)框架，把部門、人員、權(quán)限、日志作為基本服務(wù)加入進(jìn)去，在其基礎(chǔ)上可以做業(yè)務(wù)快速開發(fā)，結(jié)果沒有堅(jiān)持下去，僅僅開 了個(gè)頭就夭折了。究其原因，一方面是采用自己完全不熟悉的新技術(shù)，不算成熟的MVC，對(duì)習(xí)慣于WEB FORM開發(fā)的我，是一個(gè)比較大的沖擊，加上EntityFramework涌入的大量概念，對(duì)JQuery的一知半解，以及這三項(xiàng)技術(shù)自身不成熟帶來的 BUG和版本的不斷升級(jí)變更，都帶來了很大困擾。兩年之后，重啟開發(fā)框架之旅。

 　　開發(fā)工具選擇VS2012，后臺(tái)使用MVC4.0+EntityFramework5，前臺(tái)選用operamasks-ui2.0 +JQuery1.6.3(Jquery用此版本是跟operamasks-ui2.0匹配，擔(dān)心冒然換成新的出來一些莫名其妙的問題)。 

      關(guān)于前臺(tái)框架的選擇，需要多說兩句。

　　兩年前，曾經(jīng)使用過JQuery，當(dāng)時(shí)沒有成套的JQuery控件，往往是根據(jù)需要逐個(gè)搜尋，例如布局、tree、Tab、datagrid等 等，最大的問題就是沒有統(tǒng)一的風(fēng)格和界面，缺少文檔和示例，以及網(wǎng)上各種對(duì)源碼進(jìn)行任意修改和擴(kuò)展的版本，需要自己花大量時(shí)間摸索和試驗(yàn)，當(dāng)時(shí)就覺得這種 混亂的局面終會(huì)結(jié)束，出現(xiàn)一個(gè)統(tǒng)一的框架。

　　現(xiàn)在來看，類似的框架涌現(xiàn)出來很多，開始沒有認(rèn)真篩選對(duì)比，大概搜了下，看不少人推薦easyUI，說其免費(fèi)開源，然后看了下官方網(wǎng)站，網(wǎng)站上 提供了豐富的文檔和demo，風(fēng)格（包括界面風(fēng)格和編程風(fēng)格）統(tǒng)一，因此在自己的開發(fā)框架中使用了easyUI，用了layout、tree、tab、 datagrid等，完成了業(yè)務(wù)實(shí)體增刪改查，感覺還不錯(cuò)，小問題確實(shí)有，比如頁(yè)面加載時(shí)元素抖動(dòng)、DataGrid列表界面搜索文本框里加回車事件卻被 分頁(yè)控件里的頁(yè)碼框截獲，還有一個(gè)就是沒有控件刷新方法，比如刷新樹，新增了數(shù)據(jù)后刷新datagrid，得自己寫一個(gè)刷新，雖然往往只有一句話，但還是 不如直接提供一個(gè)方法調(diào)用方便……總體來說，用起來還是挺方便。

　　本想開一個(gè)系列，記錄下開發(fā)過程中的點(diǎn)點(diǎn)滴滴，與大家交流，剛發(fā)了第一篇， EasyUI1.3.1+MVC4.0+EF5.0實(shí)戰(zhàn)之一 開篇及布局控件介紹，有園友回復(fù)說easyui商用需要付費(fèi)，于是反過頭來認(rèn)真讀了下官方的說明，449刀，非年費(fèi)，不限項(xiàng)目和時(shí)間，說實(shí)話，這價(jià)格還說得過去。

　　有了這段插曲，于是找其他同類框架來大體比較了下，糾結(jié)了下要不要用免費(fèi)開源的替換掉easyui。

     園友的回復(fù)集中在LigerUI和DMZ，從搜索引擎來看，ligerui 網(wǎng)上的評(píng)價(jià)貌似不怎么樣，說個(gè)人弄的，有bug也不修復(fù)，至于dwz，網(wǎng)上沒評(píng)價(jià)，倒是掛了幾個(gè)后臺(tái)是java和php的應(yīng)用案例，貌似還可以。結(jié)果自己 看了一下二者官方網(wǎng)站，反而覺得DMZ官方頁(yè)面亂，控件展現(xiàn)效果比較粗糙,demo和文檔條理性差,反而是ligerui看上去比較精致。 

　　后來有園友提到了operamasks-ui，LGPL協(xié)議，看了下官網(wǎng)和團(tuán)隊(duì)，應(yīng)該是金蝶旗下產(chǎn)品，感覺相當(dāng)不錯(cuò)，網(wǎng)上也有不少行業(yè)網(wǎng)站的訪談和同類產(chǎn)品性能評(píng)測(cè)。

　　另外，下面這篇園子里的文章是比較全面的列舉和簡(jiǎn)介前臺(tái)應(yīng)用框架，推薦閱讀一下：前端框架你究竟選什么

　　于是，最終決定嘗試一下，使用operamasks-ui替換掉easyUI，同樣將開發(fā)過程中的點(diǎn)點(diǎn)滴滴記錄下來。

　　官方網(wǎng)站：http://ui./website/homepage.html 怎么下載和加入項(xiàng)目我就不多說了，參考官網(wǎng)說明即可。 

      上面說了啰嗦了這么多，下面轉(zhuǎn)入正題，來說一下最常見的布局。

　　對(duì)于MIS管理系統(tǒng)，常見的布局分為三大塊，頂部是系統(tǒng)名稱，加當(dāng)前登錄人的賬號(hào)、姓名、部門等信息展現(xiàn)，以及注銷、切換賬號(hào)等操作按鈕；左側(cè) 是系統(tǒng)菜單欄，右側(cè)是主工作區(qū)，點(diǎn)擊左側(cè)菜單，可以在主工作區(qū)顯示對(duì)應(yīng)的業(yè)務(wù)處理界面。為了最大程度利用空間，通常還要求左側(cè)導(dǎo)航菜單欄可以折疊隱藏顯 示。 先上效果圖，有個(gè)直觀的印象：

　　之前的開發(fā)，通常就是使用Html的frameset標(biāo)簽　　

<frameset cols="25%,50%,25%">
 
  <frame src="frame_a.htm" />
 
  <frame src="frame_b.htm" />
 
  <frame src="frame_c.htm" />
 
</frameset>

　　然后在自己編寫JS來控制折疊和隱藏某個(gè)區(qū)域。 

　　使用operamasks-ui（好長(zhǎng)的名字，以下簡(jiǎn)稱om）就簡(jiǎn)單多了,首先將下載的壓縮包解壓加入到工程中，我選擇放在web工程根目錄下，與視圖文件夾View同級(jí)存放，名字為“OperaMasksUI”，然后修改Home控制器對(duì)應(yīng)的Index視圖：

　　1.在head標(biāo)簽內(nèi)部加入對(duì)om相關(guān)css樣式表的引用

    　　　@Styles.Render("~/OperaMasksUI/css/default/om-default.css")

　　2.在</body>標(biāo)簽之前加入以下對(duì)js文件的引用

   　　 @Scripts.Render("~/OperaMasksUI/js/jquery163.min.js")

　　　 @Scripts.Render("~/OperaMasksUI/js/operamasks-ui200.min.js") 

　　注：其實(shí)上面的Styles.Render 和Scripts.Render真正用途是將多個(gè)css和js壓縮和傳輸，后文再找個(gè)機(jī)會(huì)詳細(xì)說這塊。這里我是參照默認(rèn)模板下寫的，誤打誤撞也能運(yùn)行，可以解析成正確的引用。

      參考官方說明和demo，在body里加入以下內(nèi)容

  <div id="page" >

        <div id="north-panel" />      

        <div id="center-panel"  style="padding: 0 10px;" />

        <div id="east-panel" />

        <div id="west-panel" />

        <div id="south-panel" style="vertical-align:top; text-align:center" >

            &copy; @DateTime.Now.Year - 版權(quán)聲明

        </div>

</div>　　

然后，寫js來初始化

 $(function ()

        {

            //初始加載

            loadLayout();         

        });

        //加載布局

        function loadLayout()

        {

            $('#page').omBorderLayout({

                panels: [{

                    id: "north-panel",

                    region: "north",

                    resizable: true,

                    collapsible: true,

                    height: 100,

                    header:false

                },

                {

                    id: "center-panel",

                    region: "center",

                    header: false

                },

                {

                    id: "west-panel",

                    title: "功能菜單",

                    region: "west",

                    resizable: true,

                    collapsible: true,

                    width: 200

                },

                {

                    id: "south-panel",

                    region: "south",

                    resizable: true,

                    collapsible: true,

                    height: 20,

                    header: false

                }              

                ],

                hideCollapsBtn: true,

                spacing: 7

            });

        }

與easyui有點(diǎn)區(qū)別，Easyui支持兩種方式，一種與上類似，通過js來初始化，另一種可以通過html標(biāo)簽擴(kuò)展屬性來初始化，不用寫js代碼

<body class="easyui-layout">
 
    <div region="north" title="" split="true" style="height: 100px;"></div>
　　……

</body>

　　前面夸了一下om簡(jiǎn)單易用，用其替代easyui的時(shí)候就栽了……

　　由于是在原來已經(jīng)做好的ui上改的，所以我操作完上述步驟后，就以為大功告成了，結(jié)果運(yùn)行……js報(bào)錯(cuò)，提示，對(duì)象不支持“css”屬性或方 法，jquery肯定有css方法的，把jquery1.8.0替換成隨om2.0自帶的1.6.3問題依舊，表面上看不出什么問題，后來逐行排查，發(fā)現(xiàn) 問題出在<div>標(biāo)簽的閉包上……

　　<div id="north-panel" />   改為<div id="north-panel"></div>就正常了

　　這算BUG嗎？好吧，這算個(gè)注意事項(xiàng)。  

　　這還沒完，解決了js報(bào)錯(cuò)，出來的是個(gè)白屏，懷疑是沒加高度和寬度，給最外層id為page的div加上了高寬，確實(shí)能顯示了，但是，我想要全 屏效果，給div高和寬指定100%，還是白屏，于是又補(bǔ)了下基礎(chǔ)知識(shí)，需要給html和body加寬度和高度，不然div子元素設(shè)置的百分比無效，后來 看到了官方demo自適應(yīng)窗口大小，有了詳細(xì)的解釋：
　　頁(yè)面加了DOCTYPE聲明后body和html默認(rèn)是沒有高度的。因此如果要自適應(yīng)body大小需要給html和body加上100%的高度。另外，瀏覽器會(huì)默認(rèn)給html和body加上頁(yè)邊距，所以還要設(shè)置html和body的padding和margin為0

　　解決方式如下： 

  <style>

        html, body {

            width: 100%;

            height: 100%;

            padding: 0;

            margin:0;

            overflow: hidden;

        }

</style>

　　加上后，還是白屏……查看示例，沒發(fā)現(xiàn)什么異常，然后推測(cè)是填充原因，找了下屬性，把自動(dòng)填充父元素的fit屬性設(shè)為true（默認(rèn)為false）總算正常了，說實(shí)話，這個(gè)屬性默認(rèn)為true更合理。官方demo顯示正常，是因?yàn)闉槊總€(gè)區(qū)域設(shè)定了具體的高度和寬度。

   好多坑啊好多坑……

　還有點(diǎn)不夠完美的地方就是左右邊框基本看不見了，有點(diǎn)缺失的感覺，還算可以忍受。 

　可以設(shè)定上下左右中五個(gè)區(qū)域，這里沒有使用右側(cè)區(qū)域，底部區(qū)域也僅僅放了一個(gè)版權(quán)聲明, 頂部是系統(tǒng)名稱，加當(dāng)前登錄人的賬號(hào)、姓名、部門等信息展現(xiàn)，以及注銷、切換賬號(hào)等操作按鈕，左側(cè)為系統(tǒng)功能菜單導(dǎo)航樹，點(diǎn)擊葉節(jié)點(diǎn)后將在中心區(qū)域打開對(duì)應(yīng)的業(yè)務(wù)功能頁(yè)面。

　與easyui只能左右折疊相比，om可以往四個(gè)方向折疊，而且提供了僅占用很小空間的小箭頭方式，更加優(yōu)美。

　比如我想允許左側(cè)菜單導(dǎo)航區(qū)域折疊，禁止頂部區(qū)域折疊，設(shè)置hideCollapsBtn為true，設(shè)置north-panel的collapsible屬性為false，搞定。

　本文從實(shí)戰(zhàn)角度出發(fā)，加入自己多年來的開發(fā)經(jīng)驗(yàn)和項(xiàng)目經(jīng)驗(yàn)，僅指明關(guān)鍵屬性和要注意的事項(xiàng)，其他屬性請(qǐng)查閱官方網(wǎng)站說明。 

　第一次做開發(fā)平臺(tái)，有些問題也在摸索和思考，歡迎同行討論拍磚，共同進(jìn)步。