您好,登錄后才能下訂單哦!
小編給大家分享一下layui框架的優(yōu)缺點(diǎn)有哪些,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
layui框架的優(yōu)點(diǎn)有它屬于輕量級(jí)框架,簡(jiǎn)單適合后端人員開發(fā);缺點(diǎn)是技術(shù)還不是很成熟,由于需要查詢DOM操作因此在前端交互上較麻煩
layui是一款模塊化的前端框架,因其簡(jiǎn)單而又充實(shí)的內(nèi)在而受到歡迎。
layui含義:
layui是一款采用自身模塊規(guī)范編寫的前端 UI 框架,它遵循原生的 HTML/CSS/JS 書寫方式。它雖然外在極簡(jiǎn),但是內(nèi)容豐富,里面包含眾多組件從核心代碼到 API 都非常適合界面的快速開發(fā)。事實(shí)上layui更多是面向于后端開發(fā)者,而且它還擁有自己的模式。更加輕量和簡(jiǎn)單
layui的優(yōu)點(diǎn)與缺點(diǎn)
優(yōu)點(diǎn)有以下幾方面:
(1)layui屬于輕量級(jí)框架,簡(jiǎn)單美觀。適用于開發(fā)后端模式,它在服務(wù)端頁(yè)面上有非常好的效果。
(2)layui是提供給后端開發(fā)人員最好的ui框架,基于DOM驅(qū)動(dòng),只要不涉及到交互layui還是很不錯(cuò)的
缺點(diǎn)如下:
(1)layui出現(xiàn)較遲,想必其他前端框架來(lái)說(shuō)還是不太成熟。現(xiàn)在已更新到2.X版本了
(2)在實(shí)現(xiàn)前端交互上比較麻煩,因?yàn)轫?yè)面的增刪改查都需要查詢DOM元素
案例:通過(guò)layui框架實(shí)現(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' //設(shè)置容器寬度 , arrow: 'always' //始終顯示箭頭,可選hover,none //,anim: 'updown' //切換動(dòng)畫方式,可選fade,default , full: false //全屏 , autoplay: true //自動(dòng)切換 , interval: 1000 //自動(dòng)切換的時(shí)間間隔 , index: 3 //初始化時(shí)item索引,默認(rèn)時(shí)0 , indicator:'inside' //指示器位置,可選outside,none }); //監(jiān)聽輪播切換事件 carousel.on('change(carofilter)', function (obj) { //test1來(lái)源于對(duì)應(yīng)HTML容器的 lay-filter="test1" 屬性值 console.log(obj.index); //當(dāng)前條目的索引 console.log(obj.prevIndex); //上一個(gè)條目的索引 console.log(obj.item); //當(dāng)前條目的元素對(duì)象 }); //重置輪播 ins.reload({arrow:'hover'});//將arror從alway變成hover }); </script>
效果圖:
看完了這篇文章,相信你對(duì)layui框架的優(yōu)缺點(diǎn)有哪些有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。