layui框架是什麼

簡介

#layui（諧音：類別UI) 是一款採用自身模組規範編寫的前端UI 框架，遵循原生HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心程式碼到 API 的每一處細節都經過精心雕琢，非常適合介面的快速開發。 layui 首個版本發佈於2016年金秋，她有別於那些基於 MVVM 底層的 UI 框架，卻並非逆道而行，而是信奉返璞歸真之道。確切地說，她更多是為服務端程式設計師量身定做，你無需涉足各種前端工具的複雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這裡信手拈來。

layui 相容於人類正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端後台系統與前台介面的速成開發方案。

獲得Layui

1. 官網首頁下載

下載Layui到官網：https://www.layui.com/下載到layui 的最新版，它經過了自動化構建，更適合用於生產環境。目錄結構如下：

2. Git 倉庫下載

你也可以透過GitHub或碼雲得到layui 的完整開發包，以便於你進行二次開發，或者Fork layui 為我們貢獻方案

3. npm 安裝

npm install layui-src

一般用於WebPack 管理

相關推薦：《layui框架教學》

#用法

1.模組化的用法（推薦）

我們推薦你遵循layui 的模組規範建立一個入口文件，並透過layui.use() 方式來加載該入口文件，如下所示：

<script>
layui.config({
  base: &#39;/js/modules/&#39; //你存放新模块的目录，注意，不是layui的模块目录
}).use(&#39;index&#39;); //加载layui入口
</script>    
上述的 index 即为你/js/modules/ 目录下的 index.js，它的内容如下：
/**
项目JS主入口
以依赖layui的layer和form模块为例
**/
layui.define([&#39;layer&#39;, &#39;form&#39;], function(exports){
var layer = layui.layer
,form = layui.form;
layer.msg(&#39;Hello World&#39;);
exports(&#39;index&#39;, {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});

2.非模組化用法

如果你不喜歡layui 的模組化組織方式，你完全可以毅然採用「一次性加載」的方式，我們將layui.js 及所有模組單獨打包合併成了一個完整的js文件，用的時候直接引入這一個文件即可。當你採用這樣的方式時，你無需再透過layui.use() 方法載入模組，直接使用即可，如：

<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
!function(){
//无需再执行layui.use()方法加载模块，直接使用即可
var form = layui.form
,layer = layui.layer;
//…
}();
</script>

但你必須知道，採用該方式，意味著layui 的模組化已經失去了它的意義。但不可否認，它使用起來會更簡單直接。

以上是layui框架是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！