溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

layui如何使用

發(fā)布時間：2020-09-21 10:05:20 來源：億速云 閱讀：130 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了layui如何使用，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

先看下Layui的介紹：

　　layui 是一款采用自身模塊規(guī)范編寫的情懷級前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。layui 首個版本發(fā)布于2016年金秋，她區(qū)別于那些基于MVVM底層的UI框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作為PC端后臺系統(tǒng)與前臺界面的速成開發(fā)方案。

獲取Layui

　　可以 官網(wǎng)首頁 下載到 layui 的最新版，它經(jīng)過了自動化構建，更適合用于生產(chǎn)環(huán)境。目錄結構如下：

 ├─css //css目錄
  │  │─modules //模塊css目錄（一般如果模塊相對較大，我們會單獨提取，比如下面三個：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心樣式文件
  ├─font  //字體圖標目錄
  ├─images //圖片資源目錄（目前只有l(wèi)ayim和編輯器用到的GIF表情）
  │─lay //模塊核心目錄
  │  └─modules //各模塊組件
  │─layui.js //基礎核心庫
  └─layui.all.js //包含layui.js和所有模塊的合并文件

快速上手

獲得 layui 后，將其完整地部署到你的項目目錄（或靜態(tài)資源服務器），你只需要引入下述兩個文件：

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模塊化方式（最下面有講解），此處可換成：./layui/layui.all.js

　　你只需要加載這兩個文件，不用去管其他任何文件。因為他們（比如各模塊）都是在最終使用的時候才會自動加載。這是一個基本的入門頁面；

模塊化方式

　　我們推薦你遵循 layui 的模塊規(guī)范建立一個入口文件，并通過 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>
//由于模塊都一次性加載，因此不用執(zhí)行 layui.use() 來加載對應模塊，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
}();
</script> 
</body>
</html>

模塊化與非模塊化

　　我還是比較喜歡模塊化這個概念，需要的時候就加載，因為假如是非模塊化的話，一開始就是加載全部js文件，但實際上有些頁面用到模塊可能很少，并不需要加載這么大的js文件，所以還是推薦使用模塊化的方式。非模塊化雖然方便，還是對用戶其實不太友好的。

模塊規(guī)范

　　layui 的模塊是基于 layui.js 內(nèi)部實現(xiàn)的異步模塊加載方式，它并不遵循于AMD（沒有為什么，畢竟任性呀！），而是自己定義了一套更輕量的模塊規(guī)范。并且這種方式在經(jīng)過了大量的實踐后，成為 layui 最核心的模塊加載引擎。

預先加載

　　開門見山，還是直接說使用比較妥當。Layui的模塊加載采用核心的 layui.use(mods, callback)方法，當你的JS 需要用到Layui模塊的時候，我們更推薦你采用預先加載，因為這樣可以避免到處寫layui.use的麻煩。你應該在最外層如此定義：

/*
  Demo1.js
  使用Layui的form和upload模塊
*/
layui.use(['form', 'upload'], function(){  //如果只加載一個模塊，可以不填數(shù)組。如：layui.use('form')
  var form = layui.form //獲取form模塊
  ,upload = layui.upload; //獲取upload模塊
  
  //監(jiān)聽提交按鈕
  form.on('submit(test)', function(data){
    console.log(data);
  });
  
  //實例化一個上傳控件
  upload({
    url: '上傳接口url'
    ,success: function(data){
      console.log(data);
    }
  })
});

按需加載（不推薦）

　　如果你有強迫癥，你對網(wǎng)站的性能有極致的要求，你并不想預先加載所需要的模塊，而是在觸發(fā)一個動作的時候，才去加載模塊，那么，這是允許的。你不用在你的JS最外層去包裹一個大大的 layui.use，你只需要：

/*
  Demo2.js
  按需加載一個Layui模塊
*/
 
//……
//你的各種JS代碼什么的
//……
 
//下面是在一個事件回調(diào)里去加載一個Layui模塊
button.addEventListener('click', function(){
  layui.use('laytpl', function(laytpl){ //溫馨提示：多次調(diào)用use并不會重復加載laytpl.js，Layui內(nèi)部有做模塊cache處理。
    var html = laytpl('').render({});
    console.log(html);
  });
});

　　注意：如果你的JS中需要大量用到模塊，我們并不推薦你采用這種加載方式，因為這意味著你要寫很多l(xiāng)ayui.use()，代碼可維護性不高。
　　建議還是采用：預先加載。即一個JS文件中，寫一個use即可。

模塊命名空間

　　Layui的全部模塊綁定在 layui對象下，內(nèi)部由layui.define()方法來完成。每一個模塊都會一個特有的名字，并且無法被占用。所以你無需擔心模塊的空間被污染，除非是你 delete layui.mod; 調(diào)用一個模塊也必須借助layui對象的賦值。如：

layui.use(['layer', 'laypage', 'laydate'], function(){
  var layer = layui.layer //獲得layer模塊
  ,laypage = layui.laypage //獲得laypage模塊
  ,laydate = layui.laydate; //獲得laydate模塊
  
  //使用模塊
});

　　一個模塊一旦加載后，就會注冊在layui對象下，所以你無法直接用模塊名來獲得，而同樣借助layui對象。譬如有時你可能會直接在元素的事件屬性上去調(diào)用一個模塊，如：

<input onclick="layui.laydate()">

擴展一個Layui模塊

　　layui 官方提供的模塊有時可能還無法滿足你，或者你試圖按照layer的模塊規(guī)范來擴展一個模塊。那么你有必要認識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目錄的子目錄
});
 
//使用test
layui.use('test', function(){
  var test = layui.test;
  
  test.hello('World!'); //彈出Hello World!
});
//使用test1
layui.use('test1', function(){
  var test = layui.test1;
  
  //……
});

大體上來說，Layui的模塊定義很類似Require.js和Sea.js，但跟他們又有著明顯的不同，譬如在接口輸出等地方。

感謝你能夠認真閱讀完這篇文章，希望小編分享layui如何使用內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手