一.为什么要学习 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.jslayui.define('layer', function(exports){  //…  exports(mod1, {});}); //mod2.js，假设依赖 mod1 和 formlayui.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 - 在每一个细节中，用心与你沟通