首頁  >  文章  >  web前端  >  layui框架是什麼

layui框架是什麼

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼原創
2019-07-11 13:22:0511752瀏覽

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中文網其他相關文章!

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