首頁  >  文章  >  web前端  >  layui 怎麼引用

layui 怎麼引用

藏色散人
藏色散人原創
2021-01-19 09:17:558401瀏覽

layui的引用方法:首先下載layui;然後透過引入「layui.css」和「layui.js」兩個檔案;最後透過「layui.use()」方法完成需要使用的模組載入即可。

layui 怎麼引用

本教學操作環境:Windows7系統、layui2.5.6版,Dell G3電腦。

推薦:《layUI教學

layui是一款採用自身模組規格所寫的前端UI 框架,遵循原生HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心程式碼到 API 的每一處細節都經過精心雕琢,非常適合介面的快速開發。

layui怎麼引用?

在下載layui後如何快速將其引入到專案中,layui是一款經典模組化前端ui,它的模組是基於layui.js 內部實現的非同步模組載入方式,與日常所熟知的AMD 規範有所區別,有一套完全屬於layui定義的模組加載規範,通過預加載方式,這也是layui官方所推薦的方式,將下載到的源碼引入項目只需要引入layui.css和layui. js兩個文件,透過layui.use()方法完成需要使用的模組載入。

如下範例所示:載入layui內建的jquery穩定版本和layer元件

程式碼

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <link rel="stylesheet" href="layui/css/layui.css">
     <!-- your css link -->
</head>
<body>
     <!-- you html code -->
     <script type="text/javascript" src="layui/layui.js"></script>
     <script>
     layui.use([&#39;jquery&#39;,&#39;layer&#39;],function(){
      
        var $ = layui.$,
        layer = layui.layer;
        #your js coding
     });
     </script>
</body>
</html>

備註:

#預先載入的方式無論從程式碼可維護度、閱讀便利性以及程式碼優雅美觀方面是要強於按需加載避免隨從可見的layui.use()造成混亂,曾遇到過對網站性能的極致苛求用戶使用按需加載方式【不推薦使用按需載入方式】,按需載入如果對變數的作用域等關係處理不當也容易出現錯誤且不便於後期維護,當然在某些特定的情況下可以配合layui.cache.xx全域變數使用按需載入也是相對較好的方式;

但同時也不建議直接引入layui.all.js一次性全加載(全加載方式似乎失去了layui模組化的意義);layui的模組組件通過預加載方式在larryms的產品中是比較常見的。

以上是layui 怎麼引用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn