Layui 首个版本发布,经典模块化前端UI框架

贤心
 贤心
发布于 2016年10月14日
收藏 203

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吧!但愿这是你的一段美妙的旅程。

地址:http://www.layui.com

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:Layui 首个版本发布,经典模块化前端UI框架
资讯来源:http://www.layui.com
加载中

精彩评论

554330833a
554330833a

引用来自“554330833a”的评论

我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?

引用来自“554330833a”的评论

回复@554330833a : 我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?@贤心 ,还有layer是不是不支持seajs的?加载会丟css,其他lay系列也会这样吗?

引用来自“Mr天明”的评论

。。。仔细看一下文档,他的加载有自己的一套

引用来自“554330833a”的评论

回复@Mr天明 : 我晕,没找到在哪里,请问在哪呢。

引用来自“Mr天明”的评论

并且上面的加载css,layui有一个动态加载外部css的东西,他其实就是自己定义了一套模块化规则,所以你可以完全不用seajs

引用来自“554330833a”的评论

回复@Mr天明 : 那就坑了,这样的就要在页面引入layui.js,本来我页面只需要引用sea.js,其他js而已根据sea.js按需加载

引用来自“Mr天明”的评论

坑啥,你可以把它当seajs用嘛

引用来自“554330833a”的评论

回复@Mr天明 : 恩?它也可以模块化加载其他的js文件吗?

引用来自“Mr天明”的评论

。。。。。你都不看文档的啊,它可以加载第三方模块
回复@Mr天明 : 谢谢大神 ,我大概看了一下 ,以为是加载 它自己内部的模块
贤心
贤心
额,开源中国居然还在置顶,三天了。感动ing。。。

最新评论(94

clark911
clark911
jqGrid?
clark911
clark911
表格用啥好呢?jgGrid?
554330833a
554330833a

引用来自“554330833a”的评论

我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?

引用来自“554330833a”的评论

回复@554330833a : 我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?@贤心 ,还有layer是不是不支持seajs的?加载会丟css,其他lay系列也会这样吗?

引用来自“Mr天明”的评论

。。。仔细看一下文档,他的加载有自己的一套

引用来自“554330833a”的评论

回复@Mr天明 : 我晕,没找到在哪里,请问在哪呢。

引用来自“Mr天明”的评论

并且上面的加载css,layui有一个动态加载外部css的东西,他其实就是自己定义了一套模块化规则,所以你可以完全不用seajs

引用来自“554330833a”的评论

回复@Mr天明 : 那就坑了,这样的就要在页面引入layui.js,本来我页面只需要引用sea.js,其他js而已根据sea.js按需加载

引用来自“Mr天明”的评论

坑啥,你可以把它当seajs用嘛

引用来自“554330833a”的评论

回复@Mr天明 : 恩?它也可以模块化加载其他的js文件吗?

引用来自“Mr天明”的评论

。。。。。你都不看文档的啊,它可以加载第三方模块
回复@Mr天明 : 谢谢大神 ,我大概看了一下 ,以为是加载 它自己内部的模块
Mr天明
Mr天明

引用来自“554330833a”的评论

我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?

引用来自“554330833a”的评论

回复@554330833a : 我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?@贤心 ,还有layer是不是不支持seajs的?加载会丟css,其他lay系列也会这样吗?

引用来自“Mr天明”的评论

。。。仔细看一下文档,他的加载有自己的一套

引用来自“554330833a”的评论

回复@Mr天明 : 我晕,没找到在哪里,请问在哪呢。

引用来自“Mr天明”的评论

并且上面的加载css,layui有一个动态加载外部css的东西,他其实就是自己定义了一套模块化规则,所以你可以完全不用seajs

引用来自“554330833a”的评论

回复@Mr天明 : 那就坑了,这样的就要在页面引入layui.js,本来我页面只需要引用sea.js,其他js而已根据sea.js按需加载

引用来自“Mr天明”的评论

坑啥,你可以把它当seajs用嘛

引用来自“554330833a”的评论

回复@Mr天明 : 恩?它也可以模块化加载其他的js文件吗?
你看上面的介绍也会意识到的。。
Mr天明
Mr天明

引用来自“554330833a”的评论

我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?

引用来自“554330833a”的评论

回复@554330833a : 我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?@贤心 ,还有layer是不是不支持seajs的?加载会丟css,其他lay系列也会这样吗?

引用来自“Mr天明”的评论

。。。仔细看一下文档,他的加载有自己的一套

引用来自“554330833a”的评论

回复@Mr天明 : 我晕,没找到在哪里,请问在哪呢。

引用来自“Mr天明”的评论

并且上面的加载css,layui有一个动态加载外部css的东西,他其实就是自己定义了一套模块化规则,所以你可以完全不用seajs

引用来自“554330833a”的评论

回复@Mr天明 : 那就坑了,这样的就要在页面引入layui.js,本来我页面只需要引用sea.js,其他js而已根据sea.js按需加载

引用来自“Mr天明”的评论

坑啥,你可以把它当seajs用嘛

引用来自“554330833a”的评论

回复@Mr天明 : 恩?它也可以模块化加载其他的js文件吗?
。。。。。你都不看文档的啊,它可以加载第三方模块
554330833a
554330833a

引用来自“554330833a”的评论

我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?

引用来自“554330833a”的评论

回复@554330833a : 我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?@贤心 ,还有layer是不是不支持seajs的?加载会丟css,其他lay系列也会这样吗?

引用来自“Mr天明”的评论

。。。仔细看一下文档,他的加载有自己的一套

引用来自“554330833a”的评论

回复@Mr天明 : 我晕,没找到在哪里,请问在哪呢。

引用来自“Mr天明”的评论

并且上面的加载css,layui有一个动态加载外部css的东西,他其实就是自己定义了一套模块化规则,所以你可以完全不用seajs

引用来自“554330833a”的评论

回复@Mr天明 : 那就坑了,这样的就要在页面引入layui.js,本来我页面只需要引用sea.js,其他js而已根据sea.js按需加载

引用来自“Mr天明”的评论

坑啥,你可以把它当seajs用嘛
回复@Mr天明 : 恩?它也可以模块化加载其他的js文件吗?
Mr天明
Mr天明

引用来自“554330833a”的评论

我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?

引用来自“554330833a”的评论

回复@554330833a : 我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?@贤心 ,还有layer是不是不支持seajs的?加载会丟css,其他lay系列也会这样吗?

引用来自“Mr天明”的评论

。。。仔细看一下文档,他的加载有自己的一套

引用来自“554330833a”的评论

回复@Mr天明 : 我晕,没找到在哪里,请问在哪呢。

引用来自“Mr天明”的评论

并且上面的加载css,layui有一个动态加载外部css的东西,他其实就是自己定义了一套模块化规则,所以你可以完全不用seajs

引用来自“554330833a”的评论

回复@Mr天明 : 那就坑了,这样的就要在页面引入layui.js,本来我页面只需要引用sea.js,其他js而已根据sea.js按需加载
坑啥,你可以把它当seajs用嘛
除却巫山不是云
@贤心 有没有计划出一个后台模板呢
554330833a
554330833a

引用来自“554330833a”的评论

我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?

引用来自“554330833a”的评论

回复@554330833a : 我想问问lay系列的东西 对移动端的兼容怎么样?如何?android 2.3+?@贤心 ,还有layer是不是不支持seajs的?加载会丟css,其他lay系列也会这样吗?

引用来自“Mr天明”的评论

。。。仔细看一下文档,他的加载有自己的一套

引用来自“554330833a”的评论

回复@Mr天明 : 我晕,没找到在哪里,请问在哪呢。

引用来自“Mr天明”的评论

并且上面的加载css,layui有一个动态加载外部css的东西,他其实就是自己定义了一套模块化规则,所以你可以完全不用seajs
回复@Mr天明 : 那就坑了,这样的就要在页面引入layui.js,本来我页面只需要引用sea.js,其他js而已根据sea.js按需加载
模糊的张狂
模糊的张狂
开源内裤是什么鬼...
返回顶部
顶部