最近老師讓我一周之內做個后臺管理系統網站，又不給前端，作為應該后臺人員，前端確實不太精通，我只好找個框架咯= =！也只要有句話不是說嗎——給我幾周時間開發，我會找個模板改一下；給我幾個月時間開發，我會找個框架搭上去；給我幾年時間，我會造幾個輪子。
因為之前后臺一直寫的是安卓的api接口，所以想復用那些接口，想過用react全家桶，還是學習時間肯定不夠，找了很久，找到一個比較好看的前端框架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目錄的子目錄
});
//使用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.js的兩個底層方法：一個用于定義模塊的layui.define()，一個加載模塊的layui.use()。
參考文章：
http://www.layui.com/doc/
http://www.layui.com/doc/base/modules.html
