溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“layui的簡單介紹”，在日常操作中，相信很多人在layui的簡單介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”layui的簡單介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
先看下Layui的介紹：
layui 是一款采用自身模塊規范編寫的情懷級前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年金秋，她區別于那些基于MVVM底層的UI框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作為PC端后臺系統與前臺界面的速成開發方案。
獲取Layui
可以 官網首頁 下載到 layui 的最新版，它經過了自動化構建，更適合用于生產環境。目錄結構如下：
├─css //css目錄 │ │─modules //模塊css目錄（一般如果模塊相對較大，我們會單獨提取，比如下面三個：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心樣式文件 ├─font //字體圖標目錄 ├─images //圖片資源目錄（目前只有layim和編輯器用到的GIF表情） │─lay //模塊核心目錄 │ └─modules //各模塊組件 │─layui.js //基礎核心庫 └─layui.all.js //包含layui.js和所有模塊的合并文件
快速上手
獲得 layui 后，將其完整地部署到你的項目目錄（或靜態資源服務器），你只需要引入下述兩個文件：
./layui/css/layui.css./layui/layui.js //提示：如果是采用非模塊化方式（最下面有講解），此處可換成：./layui/layui.all.js
你只需要加載這兩個文件，不用去管其他任何文件。因為他們（比如各模塊）都是在最終使用的時候才會自動加載。這是一個基本的入門頁面；
模塊化方式
我們推薦你遵循 layui 的模塊規范建立一個入口文件，并通過 layui.use() 方式來加載該入口文件，如下所示：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>開始使用layui</title> <link rel="stylesheet" href="../layui/css/layui.css"></head><body> <!-- 你的HTML代碼 --> <script src="../layui/layui.js"></script><script>//一般直接寫在一個js文件中layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World');});</script> </body></html>非模塊化方式（即所有模塊一次性加載）
如果你并不喜歡 layui 的模塊化組織方式，你完全可以毅然采用“一次性加載”的方式，我們將 layui.js 及所有模塊單獨打包合并成了一個完整的js文件，用的時候直接引入這一個文件即可。當你采用這樣的方式時，你無需再通過 layui.use() 方法加載模塊，直接使用即可，如：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>非模塊化方式使用layui</title> <link rel="stylesheet" href="../layui/css/layui.css"></head><body> <!-- 你的HTML代碼 --> <script src="../layui/layui.all.js"></script><script>//由于模塊都一次性加載，因此不用執行 layui.use() 來加載對應模塊，直接使用即可：;!function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World');}();</script> </body></html>模塊化與非模塊化
我還是比較喜歡模塊化這個概念，需要的時候就加載，因為假如是非模塊化的話，一開始就是加載全部js文件，但實際上有些頁面用到模塊可能很少，并不需要加載這么大的js文件，所以還是推薦使用模塊化的方式。非模塊化雖然方便，還是對用戶其實不太友好的。
模塊規范
layui 的模塊是基于 layui.js 內部實現的異步模塊加載方式，它并不遵循于AMD（沒有為什么，畢竟任性呀！），而是自己定義了一套更輕量的模塊規范。并且這種方式在經過了大量的實踐后，成為 layui 最核心的模塊加載引擎。
預先加載
開門見山，還是直接說使用比較妥當。Layui的模塊加載采用核心的 layui.use(mods, callback)方法，當你的JS 需要用到Layui模塊的時候，我們更推薦你采用預先加載，因為這樣可以避免到處寫layui.use的麻煩。你應該在最外層如此定義：
/* Demo1.js 使用Layui的form和upload模塊*/layui.use(['form', 'upload'], function(){ //如果只加載一個模塊，可以不填數組。如：layui.use('form') var form = layui.form //獲取form模塊 ,upload = layui.upload; //獲取upload模塊 //監聽提交按鈕 form.on('submit(test)', function(data){ console.log(data); }); //實例化一個上傳控件 upload({ url: '上傳接口url' ,success: function(data){ console.log(data); } })});按需加載（不推薦）
如果你有強迫癥，你對網站的性能有極致的要求，你并不想預先加載所需要的模塊，而是在觸發一個動作的時候，才去加載模塊，那么，這是允許的。你不用在你的JS最外層去包裹一個大大的 layui.use，你只需要：
/* Demo2.js 按需加載一個Layui模塊*/ //……//你的各種JS代碼什么的//…… //下面是在一個事件回調里去加載一個Layui模塊button.addEventListener('click', function(){ layui.use('laytpl', function(laytpl){ //溫馨提示：多次調用use并不會重復加載laytpl.js，Layui內部有做模塊cache處理。 var html = laytpl('').render({}); console.log(html); });});注意：如果你的JS中需要大量用到模塊，我們并不推薦你采用這種加載方式，因為這意味著你要寫很多layui.use()，代碼可維護性不高。 建議還是采用：預先加載。即一個JS文件中，寫一個use即可。
模塊命名空間
Layui的全部模塊綁定在 layui對象下，內部由layui.define()方法來完成。每一個模塊都會一個特有的名字，并且無法被占用。所以你無需擔心模塊的空間被污染，除非是你 delete layui.mod; 調用一個模塊也必須借助layui對象的賦值。如：
layui.use(['layer', 'laypage', 'laydate'], function(){ var layer = layui.layer //獲得layer模塊 ,laypage = layui.laypage //獲得laypage模塊 ,laydate = layui.laydate; //獲得laydate模塊 //使用模塊});一個模塊一旦加載后，就會注冊在layui對象下，所以你無法直接用模塊名來獲得，而同樣借助layui對象。譬如有時你可能會直接在元素的事件屬性上去調用一個模塊，如：
<input onclick="layui.laydate()">
擴展一個Layui模塊
layui 官方提供的模塊有時可能還無法滿足你，或者你試圖按照layer的模塊規范來擴展一個模塊。那么你有必要認識layui.define()方法，相信你在文檔左側的“底層方法”中已有所閱讀。下面就就讓我們一起擴展一個Layui模塊吧：
第一步：確認模塊名，假設為：test，然后新建一個test.js 文件放入項目任意目錄下（注意：不用放入layui目錄）
第二步：編寫test.js 如下：
/** 擴展一個test模塊**/ layui.define(function(exports){ //提示：模塊也可以依賴其它模塊，如：layui.define('layer', callback); var obj = { hello: function(str){ alert('Hello '+ (str||'test')); } }; //輸出test接口 exports('test', obj);});第三步：設定擴展模塊所在的目錄，然后就可以在別的JS文件中使用了
//config的設置是全局的layui.config({ base: '/res/js/' //假設這是test.js所在的目錄}).extend({ //設定模塊別名 test: 'test' //如果test.js是在根目錄，也可以不用設定別名 ,test1: 'admin/test1' //相對于上述base目錄的子目錄}); //使用testlayui.use('test', function(){ var test = layui.test; test.hello('World!'); //彈出Hello World!});//使用test1layui.use('test1', function(){ var test = layui.test1; //……});大體上來說，Layui的模塊定義很類似Require.js和Sea.js，但跟他們又有著明顯的不同，譬如在接口輸出等地方。
到此，關于“layui的簡單介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
