layui框架的優(yōu)缺點是什么

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 19:27:37

layui框架的優(yōu)缺點是什么

layui框架的優(yōu)缺點是什么:layui框架的優(yōu)點有它屬于輕量級框架，簡單適合后端人員開發(fā)；缺點是技術還不是很成熟，由于需要查詢DOM操作因此在前端交互上較麻煩layui是一款模塊化的前端框架，因其簡單而又充實的內在而受到歡迎。今天將要介紹layui框架的優(yōu)點與缺點，具有一定的參考價值，

推薦度：

點擊下載本文 文檔為doc格式

導讀layui框架的優(yōu)缺點是什么:layui框架的優(yōu)點有它屬于輕量級框架，簡單適合后端人員開發(fā)；缺點是技術還不是很成熟，由于需要查詢DOM操作因此在前端交互上較麻煩layui是一款模塊化的前端框架，因其簡單而又充實的內在而受到歡迎。今天將要介紹layui框架的優(yōu)點與缺點，具有一定的參考價值，

layui框架的優(yōu)點有它屬于輕量級框架，簡單適合后端人員開發(fā)；缺點是技術還不是很成熟，由于需要查詢DOM操作因此在前端交互上較麻煩

layui是一款模塊化的前端框架，因其簡單而又充實的內在而受到歡迎。今天將要介紹layui框架的優(yōu)點與缺點，具有一定的參考價值，希望對大家有所幫助。

【推薦課程：javascript教程】

layui含義：

layui是一款采用自身模塊規(guī)范編寫的前端 UI 框架，它遵循原生的 HTML/CSS/JS 書寫方式。它雖然外在極簡，但是內容豐富，里面包含眾多組件從核心代碼到 API 都非常適合界面的快速開發(fā)。事實上layui更多是面向于后端開發(fā)者，而且它還擁有自己的模式。更加輕量和簡單

layui的優(yōu)點與缺點

優(yōu)點有以下幾方面：

（1）layui屬于輕量級框架，簡單美觀。適用于開發(fā)后端模式，它在服務端頁面上有非常好的效果。

（2）layui是提供給后端開發(fā)人員最好的ui框架，基于DOM驅動，只要不涉及到交互layui還是很不錯的

缺點如下：

（1）layui出現(xiàn)較遲，想必其他前端框架來說還是不太成熟。現(xiàn)在已更新到2.X版本了

（2）在實現(xiàn)前端交互上比較麻煩，因為頁面的增刪改查都需要查詢DOM元素

案例：通過layui框架實現(xiàn)輪播圖效果

（1）外部引入layui文件

<link rel="stylesheet" type="text/css" href=".\layui-v2.4.5\layui\css\layui.css">
<script src=.\layui-v2.4.5\layui\layui.js></script>

（2）輪播圖代碼：

<div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
 <div carousel-item>
 <div style="background-color:pink;">圖1</div>
 <div style="background-color:lightblue">圖2</div>
 <div style="background-color:blue">圖3</div>
 <div style="background-color:mediumorchid">圖4</div>
 <div style="background-color:orange">圖5</div>
 </div>
 </div>
 <script src=.\layui-v2.4.5\layui\layui.js></script>
 <script>
 layui.use('carousel', function () {
 var carousel = layui.carousel;
 var ins=carousel.render({
 elem: '#test1'
 , width: '450px' //設置容器寬度
 , arrow: 'always' //始終顯示箭頭，可選hover,none
 //,anim: 'updown' //切換動畫方式，可選fade,default
 , full: false //全屏
 , autoplay: true //自動切換
 , interval: 1000 //自動切換的時間間隔
 , index: 3 //初始化時item索引,默認時0
 , indicator:'inside' //指示器位置，可選outside,none
 });
 //監(jiān)聽輪播切換事件
 carousel.on('change(carofilter)', function (obj) { //test1來源于對應HTML容器的 
 lay-filter="test1" 屬性值
 console.log(obj.index); //當前條目的索引
 console.log(obj.prevIndex); //上一個條目的索引
 console.log(obj.item); //當前條目的元素對象
 });

 //重置輪播
 ins.reload({arrow:'hover'});//將arror從alway變成hover
 });
 </script>

效果圖：