Layui首個版本釋出，經典模組化前端UI框架

boxti發表於2017-06-02
UI前端框架

Layui 出蛋於2016年金秋的今日，是一款帶著濃烈情懷的國產前端UI框架，她追求極簡，又不失豐盈的內在，說她是史上最輕量的結晶，似乎並不為過。一切都源自於她對原生態的執著，對前端社群的那些噪雜聲音的過濾，以及她本身的精心雕琢。

獲得 Layui

你可以在官網首頁下載到 Layui 的最新版，也可以通過 GitHub 得到Layui的開源包。目前我們只同步維護這兩處資源渠道。一般如果你是用於實際專案，我們推薦你直接從官網下載。layui構建後的結構（也就是你獲得的包）如下：

├─css //css目錄
    │  └─modules //模組css目錄（一般如果模組相對較大，我們會單獨提取）
    │      ├─laydate
    │      ├─layer
    │      │  └─default
    │      └─layim
    │          └─skin
    ├─font  //字型圖示目錄
    ├─images //圖片資源目錄（一些表情等）
    │  └─face
    └─lay //JS目錄
        ├─dest //經過合併的完整模組
        ├─lib //部分元件依賴到的第三方庫（目前只有jquery）
        └─modules //各模組/元件

你還可以在GitHub 上 Fork Layui為我們貢獻方案

經典，因返璞歸真

近幾年，尤其是今年，常常會聽到猿們吐槽“現在想簡簡單單的寫個前端怎麼就變得這麼難呢？”。嗯的，前端目前正處於一個超出常理，且瘋狂造輪子的黃金時代，標準化的逐步設想與瀏覽器本身的現狀所形成的滯後感，讓一些尚未得到官方推廣的方案開始引領著前端社群，那彷彿是一場“五代十國”般的顛覆，這期間，你看不到一個所謂的新鮮輪子可以維持超過三年的光環，因為它很快就會被另一個新輪子所替代。你必須保持對技術的高度狂熱，透過未來的加鎖去追逐那些層出不窮的，工具！是的，他們只是工具，準確地說是一種標準化最終形成的過度！

透過那些高逼格工具的本質，最終仍然是 HTML、CSS、JavaScript 三駕馬車的真實面貌。與工具不同的是，它們是最終標準的歸屬者。所以工具在發展，三駕馬車本身同樣也在高速發展，那既然如此，我們為何不能跟隨原生態的穩健腳步，安安靜靜地擼會碼呢？

Layui 定義為“經典模組化”，並非是自吹她自身有多優秀，而是繞開JS社群的喧囂，以最簡單的方式去詮釋高效！她的所謂經典，是在於對返璞歸真的執念，她以當前瀏覽器普通認可的方式去組織模組！我們認為，這恰是符合當下國內絕大多數程式設計師從舊時代過度到未來新標準的最佳指引。

所以 Layui 本身也並不是完全遵循於AMD時代，準確地說，她試圖建立自己的模式，所以你會看到：

//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/css/layui.css
./layui/layui.js

沒錯，不用去管其它任何檔案。因為他們（比如各模組）都是在最終使用的時候才會自動載入。這是一個基本的入門頁面：

<!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的元件，你還是跟平時一樣script標籤引入你的js檔案，然後在你的js檔案中使用layui的元件。但我們更推薦你遵循Layui的模組規範，建立一個自己的模組作為入口：

<script>
layui.config({
  base: `/res/js/modules/` //你的模組目錄
}).use(`index`); //載入入口
</script>

上述的 index 即為你 /res/js/modules/ 目錄下的 index.js，它的內容應該如下：

/**
專案JS主入口
以依賴Layui的layer和form模組為例

**/    
layui.define([`layer`, `form`], function(){
  var layer = layui.layer
  ,form = layui.form();
  
  layer.msg(`Hello World`);
});

好了，不管你採用什麼樣的方式，從現在開始，盡情地使用Layui吧！但願這是你的一段美妙的旅程。


相關文章