layui彈出層之應用執行個體講解

從酒店管理系統到智能門鎖及其現在的資源共享平台，layui架構，我們團隊用的比較多的就是這個layui彈出層。

layui彈出層，除了頁面iframe層我們比較常用還有就是表單校驗和其他相關的友好提示資訊。

通常比較常用的方式是layui+jQuery，layui主要引用layui相關的js和css檔案，jQuery的話，通常就是兩個版本，壓縮版和源碼版，壓縮版就像我們Java沒有用maven那樣，就是一個一個的jar檔案，如果我們想看源碼，就必須找到對應的源檔案。源檔案通常情況下比jar包式的檔案要大的多。就好比我們部署web工程，特别是使用maven項目的時候，通過打包，将war項目打成war包，由上百兆變成十幾兆。

當然了，使用壓縮版，且建議使用壓縮版，生産環境一定要使用壓縮版，壓縮版壓縮版，看這詞，肯定和源碼版相比，體積要小的多。

目前很多企業的軟體，很多都包含這麼幾端，浏覽器端，用戶端或者電腦端等，無論是浏覽器端、用戶端、電腦端，它們都要用的一個玩意，換言之遵守一個規則，即HTTP請求的規則。

《高性能網站建設指南》中提出了關于網站性能優化十個點，其中就包括減少Http請求，而且我認識的朋友中，有不少他們公司要麼是使用CDN将所有的靜态資源放在CDN上，當然了，有的放在CDN上是幾個檔案的壓縮版，比如相關的4到5個css檔案，但是很多頁面都引用，而且它并沒有很多變動，基本不動，這種情況我們使用YUI壓縮技術或者其他壓縮技術，将其壓縮成一個css檔案，當然檔案體積比較大，但是相對于請求4到5個css靜态檔案，也就是請求4到5個http請求來說，相對比請求一個，響應時間要少的多，響應時間一少，使用者體驗也就好了。而且對于web性能方面還是很有幫助的。

當然了，體積大占用的帶寬也會比較大，所有這也是建議使用壓縮版。體積小，占用帶寬少，功能也并無差别。當然了，像個人學習或者測試環境可以使用源碼版的。

layui的彈出層也可以幫助我們性能優化，它可以使頁面上的html相關的标簽減少，進而使整個檔案減少，這樣一來html檔案雖然多，但是并不是全部在一個頁面上，要知道很多iframe在一塊，真的不利于維護，或者維護起來比較困難，通過layui倒可以将一些比如添加的form表單或者是增加編輯資訊之類的抽取出來為一個界面，利于維護，也利于性能。

下面說說，layui我常用的幾個彈出層:

首先貼一下layui的官網:http://www.layui.com/

layui的下載下傳和文檔上面都有，對于一些公司技術調研方面，通常會比較以下:

(1)社群是否活躍;

(2)文檔是否豐富;

(3)風險是否可控;

layui基本滿足以上原則，社群很活躍，文檔也非常豐富，至于風險，很多開源項目和我認識的朋友們，他們公司也在用這個架構，既然這麼多人都在用，那麼我想風險方面一定也是可控的。

注意一點:

一定要在layui.use('layer',function(){}函數作用域内加上var layer=layui.layer

就好像你要使用jQuery的ajax那樣，加上$.ajax或者$.post、$.get

$相當于是jQuery，隻是給它起了個别名

這樣說好像有點欠妥，再補充一點，就好比Java或者js,你要使用這個變量并給其指派，前提是必須有，這個“有”，可以了解為聲明。

Java對于變量，流行這樣一句，先聲明再指派，邊聲明邊指派。js同樣如此。

再打比方:

比如Java類中，寫了多個方法，那麼你如果可以調用這個方法呢？出來将方法用static修飾之外，以類名調用方法，還有就是執行個體化，換言之就是New

layui也是這個道理，你如果想要用它的彈出層相關的一系列方法，就必須要聲明指派才行。不然就無法調用。

代碼講解

1.  layer.msg

layui.use('layer', function(){
              var layer = layui.layer;
              
              layer.msg('消息001');
            });      

這個通常用于消息提示，比如退房推送，比如做酒店系統時，有人退房了，通過它提醒酒店店長及其相關人員，說某某在某時刻退房了，這時收到通知就可以通知對應的清潔人員去打掃，當然了，現在手機發短信的形式非常流行，至于退房推送不必通過layer.msg來提示，不過作為背景系統而言，有人退房的話，經理或者其他的管理人員，需要及時在web界面上看到，這時layer.msg就可以起到作用。

當然了，也可以用于表單校驗。

layer.msg('參數自定義', {
                       time: 1500, //1.5s後自動關閉
                       btn: ['明白了', '知道了', '哦']
                 });      

這個可以讓人聯想到，比如你的好友評論你的文章或者你的好友上線下線，又或者某某個點贊了你的說說等，直接就會彈出來，當然了比如中說的就是事件，當然得觸發事件才行。不然的話就成死循環了。

time這個屬性在這裡的作用是資訊時間定義，就是msg顯示在螢幕上多長時間，不寫預設是2秒。根據自己需求而定。

2.layer.open

layui.use('layer', function(){
              var layer = layui.layer;

              layer.open({
                    type: 2,
                    title: 'iframe',
                    fix: false,
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1000px', '700px'],
                    content: 'https://www.baidu.com',
                    end: function () {
                       location.reload();
                    }
                });
            });       

這個通常的可以用于減少HTML大量的标簽，這讓我想到了Bootstrap,Bootstrap的響應式，我是沒話說，滿意+非常滿意，但是它的那個模态框我不喜歡，有的時候，我的界面需要好幾個模态框這樣的，但是如果加上了，即便是有注釋，簡單的說吧，如果div嵌套的少，那還好說，如果div加上個頁籤，頁籤裡面又套div，而且又是好幾個，這樣就不能使用模态框了，當然bootstrap實作這個也很簡單，但是對于頁面來說，加入了很多HTML，即便有注釋，也會使頁面的複雜性增加，不利于維護，這時layui的功效來了，通過layer.open可輕松的将模态框分離為一個界面這樣頁面不利于維護的問題也就解決了。而且使用者體驗也非常好。

layui.use('layer', function(){
              var layer = layui.layer;

              layer.open({
                  type: 1, 
                  area: ['200px', '100px'],
                  content: '<p align="center">消息003</p>' //這裡content是一個普通的String
                });
            });       

layer..open的type有5種類型:

0（資訊框，預設）1（頁面層）2（iframe層）3（加載層）4（tips層)

我個人用的比較的還是資訊框和頁面層及其iframe層，當然了加載層也用，至于tips層基本沒用過。沒用過也不能說沒有用。

3.lay.alert

layui.use('layer', function(){
              var layer = layui.layer;

              layer.alert('test', {icon: 1});
            });       

這個可以說是alert強化版本，alert在原始的js中也就是起到提示資訊的作用，比如表單校驗就比較常用。

4.layer.prompt

layer.prompt(function(value, index, elem){
              alert(value); //得到value
              layer.close(index);
            });      

layer.prompt({
                formType: 2,
                value: '初始值',
                title: '請輸入值',
                area: ['800px', '350px'] //自定義文本域寬高
              }, function(value, index, elem){
                alert(value); //得到value
                layer.close(index);
              });      

提示使用者輸入的提示框，和原本的js中的prompt一樣。隻是功能更強大了。

通常可以應用于使用者評論文章

5.layer.tab

layer.tab({
                  area: ['600px', '300px'],
                  tab: [{
                    title: 'TAB1', 
                    content: '内容1'
                  }, {
                    title: 'TAB2', 
                    content: '内容2'
                  }, {
                    title: 'TAB3', 
                    content: '内容3'
                  }]
                });         

頁籤就不說了，之前提到過，layer.tab+layer.open結合起來更強大。

小結:

架構，無論是前端架構或者後端架構，架構的目的隻有一個更好更快更友善。

這與奧林匹克的格言:“更快、更高、更強”不謀而合。