開始使用 · layui

layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。兼容性和面向場景 layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端后臺系統與前臺界面的速成開發方案。獲得 layui 1. 官網首頁下載你可以在我們的官網首頁下載到 layui 的最新版，它經過了自動化構建，更適合用于生產環境。目錄結構如下： codelayui.code ├─css //css目錄 │ │─modules //模塊css目錄（一般如果模塊相對較大，我們會單獨提取，比如下面三個：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心樣式文件 ├─font //字體圖標目錄 ├─images //圖片資源目錄（目前只有layim和編輯器用到的GIF表情） │─lay //模塊核心目錄 │ └─modules //各模塊組件 │─layui.js //基礎核心庫 └─layui.all.js //包含layui.js和所有模塊的合并文件 2. Git 倉庫下載你也可以通過 GitHub 或碼云得到 layui 的完整開發包，以便于你進行二次開發，或者 Fork layui 為我們貢獻方案 3. npm 安裝 codelayui.code npm install layui-src 一般用于 WebPack 管理快速上手獲得 layui 后，將其完整地部署到你的項目目錄（或靜態資源服務器），你只需要引入下述兩個文件： codelayui.code ./layui/css/layui.css ./layui/layui.js //提示：如果是采用非模塊化方式（最下面有講解），此處可換成：./layui/layui.all.js 沒錯，不用去管其它任何文件。因為他們（比如各模塊）都是在最終使用的時候才會自動加載。這是一個基本的入門頁面： codelayui.code <!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>  <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> 如果你想采用非模塊化方式（即所有模塊一次性加載，盡管我們并不推薦你這么做），你也可以按照下面的方式使用： codelayui.code <!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>  <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> 經典，因返璞歸真 layui 定義為“經典模塊化”，并非是自吹她自身有多優秀，而是有意避開當下JS社區的主流方案，試圖以最簡單的方式去詮釋高效！她的所謂經典，是在于對返璞歸真的執念，她以當前瀏覽器普通認可的方式去組織模塊！我們認為，這恰是符合當下國內絕大多數程序員從舊時代過渡到未來新標準的最佳指引。所以 layui 本身也并不是完全遵循于AMD時代，準確地說，她試圖建立自己的模式，所以你會看到： codelayui.code //layui模塊的定義 layui.define([mods], function(exports){ //…… exports('mod', api); }); //layui模塊的使用 layui.use(['mod1', 'mod2'], function(args){ var mod = layui.mod1; //…… }); 沒錯，她具備AMD的影子，又并非受限于 CommonJS 的那些條條框框，layui認為這種輕量的組織方式，比WebPack更符合絕大多數場景。所以她堅持采用經典模塊化，也正是能讓人避開工具的復雜配置，回歸簡單，安靜高效地編織原生態的HTML、CSS和JavaScript。但是 layui 又并非是 Requirejs 那樣的模塊加載器，而是一款UI解決方案，她與Bootstrap最大的不同恰恰在于她糅合了自身對經典模塊化的理解。模塊化的用法（推薦）我們推薦你遵循 layui 的模塊規范建立一個入口文件，并通過 layui.use() 方式來加載該入口文件，如下所示： codelayui.code <script> layui.config({ base: '/res/js/modules/' //你存放新模塊的目錄，注意，不是layui的模塊目錄 }).use('index'); //加載入口 </script> 上述的 index 即為你 /res/js/modules/ 目錄下的 index.js，它的內容應該如下： codelayui.code ~~~ /** 項目JS主入口以依賴layui的layer和form模塊為例 **/ layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); exports('index', {}); //注意，這里是模塊輸出的核心，模塊名必須和use時的模塊名一致 }); ~~~ 非模塊化用法如果你并不喜歡 layui 的模塊化組織方式，你完全可以毅然采用“一次性加載”的方式，我們將 layui.js 及所有模塊單獨打包合并成了一個完整的js文件，用的時候直接引入這一個文件即可。當你采用這樣的方式時，你無需再通過 layui.use() 方法加載模塊，直接使用即可，如： ~~~ <script src="../layui/layui.all.js"></script> <script> ;!function(){ //無需再執行layui.use()方法加載模塊，直接使用即可 var form = layui.form ,layer = layui.layer; //… }(); </script> ~~~ 但你必須知道，采用該方式，意味著 layui 的模塊化已經失去了它的意義。但不可否認，它使用起來會更簡單直接。也許通過上面的閱讀，你已經大致了解如何使用 layui 了，但真正用于項目遠不止如此，你需要繼續閱讀后面的文檔，尤其是【基礎說明】那么，從現在開始，盡情地擁抱 layui 吧！但愿她能成為你長遠的開發伴侶，化作你方寸屏幕前的億萬字節！