一.为什么要学习layui？
它是一个开源的Web UI解决方案，采用自己的经典模块化规范，遵循原生HTML/CSS/JS开发模式。它很容易使用。它的风格简单轻巧，而组件优雅而丰富。从源代码到使用方法的每一个细节都经过精心雕琢，非常适合快速开发的web界面。Layui不同于那些基于MVVM的前端框架，但它并不违背这条道路，而是相信回归自然的方式。准确地说，它更面向后端开发人员。不需要参与前端工具，只需面对浏览器本身，让您需要的所有元素和交互都来自这里。
二.目录结构
目录结构如下：
├─css //css目录 │ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：） │ │ ├─laydate │ │ └─layer │ └─layui.css //核心样式文件 ├─font //字体图标目录 └─layui.js //核心库
三.CDN 方式引入
UNPKG 和 CDNJS 均为第三方开源免费的 CDN，通过 NPM/GitHub 实时同步。UNPKG 引入示例
<!-- 引入 layui.css --> <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"> <!-- 引入 layui.js --> <script src="//unpkg.com/layui@2.6.8/dist/layui.js">
四.经典的模块化”
Layui被定义为“经典的模块化”，并不是为了炫耀她有多么优秀，而是为了刻意避免当前JS社区的主流解决方案，并尝试以尽可能简单的方式解释效率！所谓的经典在于她对回归自然的痴迷。以当前浏览器普遍认可的方式组织模块！我们相信，这对中国的大多数程序员来说是一个很好的指南，可以帮助他们在未来从旧时代过渡到新标准。因此，layui本身并不完全遵循AMD时代。准确地说，她试图建立自己的模型：
layui 模块的定义（新 js 文件）
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/JS。然而，layui不是像requirejs那样的模块加载器，而是一个UI解决方案。与bootstrap的不同之处在于，layui结合了自己对经典模块化的理解。这使在layui组织的框架内更好地用更易维护的代码编织丰富的用户界面。
五.建立模块入口
可以根据layui的模块规范创建条目文件，并使用layui use（）加载条目文件，如下所示：存放新模块的目录，注意，不是 layui 的模块目录：
<script src="./layui/layui.js"></script> <script> layui.config({ base: '/res/js/modules/' }).use('index'); </script>
上述指数为指数。js在/RES/js/modules/目录中。其内容应如下：
layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); exports('index', {}); });
注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致。
六.管理扩展模块
除了使用layui的内置模块外，还需要加载扩展模块（可以简单地理解为符合layui模块规范的JS文件）。我们假设许多扩展模块存储在项目中，如下所示：
//mod1.js layui.define('layer', function(exports){ //… exports(mod1, {}); }); //mod2.js，假设依赖 mod1 和 form layui.define(['mod1', 'form'], function(exports){ //… exports(mod2, {}); }); //mod3.js //… //main.js 主入口模块 layui.define('mod2', function(exports){ //… exports('main', {}); });
在某些模块依赖性之后，还可以将上述扩展模块组合到一个文件中进行加载。我们可以使用gulp将上述扩展模块（如mod1、mod2、MOD3和main）合并到一个模块文件中：main.js。此时，只需加载它：
<script src="./layui/layui.js"></script> <script> layui.config({ base: '/res/js/modules/' //你的扩展模块所在目录 }).use('main'); // </script>
这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块如我们所见，我们最多只需要加载两个JS文件：layui，js和main.js。这将显著减少对静态资源的请求。
七.全局配置
在使用该模块之前，请全局配置一些参数，尽管大多数情况下不需要这样做。因此，我们目前提供的全局配置项很少，这也是为了减少一些不必要的工作，并使使用尽可能简单。当前支持的全局配置项如下：
layui.config({ dir: '/res/layui/' ,version: false ,debug: false ,base: '' });
- layui.js 所在目录（如果是 script 单独引入 layui.js，无需设定该参数）一般可无视
- 一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610
- 用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
- 设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
如果对layui JS本身执行动态加载和其他特殊场景的看法是正确的，那么上述由config设置的layui-the-dir参数将变得无效。它将在加载某些组件的依赖文件（CSS）后执行。此时，我们可以动态加载layui JS定义了一个我们事先约定的全局对象：
<script> var LAYUI_GLOBAL = { dir: '/res/layui/' }; </script>
八.定义模块
使用此方法，可以在新的JS文件中定义layui模块。参数mods是可选的，用于声明模块依赖的模块。回调是加载模块后的回调函数。它返回一个exports参数以输出模块的接口。
layui.define(function(exports){ //do something exports('demo', { msg: 'Hello Demo' }); });
与requirejs最大的区别在于接口输出。Exports是一个接受两个参数的函数。第一个参数是模块名，第二个参数是模件接口。声明上述模块后，可以在外部使用它。演示将在layui对象下注册，可以使用VaR demo=layui demo获得模块接口。还可以在定义模块时声明模块所需的依赖项，例如：
layui.define(['layer', 'laypage', 'mod1'], function(exports){ //此处 mod1 为你的任意扩展模块 //do something exports('demo', { msg: 'Hello Demo' }); });
上述的 layer、laypage 都是 layui 的内置模块。
layui - 在每一个细节中，用心与你沟通
