今日学习总计

layui学习

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

如果你将 layui 下载到了本地，那么可将其完整地放置到你的项目目录（或静态资源服务器），这是一个基本的入门页面：

</>HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>开始使用 layui</title>
  7. <link rel="stylesheet" href="./layui/css/layui.css">
  8. </head>
  9. <body>
  11. <!-- 你的 HTML 代码 -->
  13. <script src="./layui/layui.js"></script>
  14. <script>
  15. layui.use(['layer', 'form'], function(){
  16. var layer = layui.layer
  17. ,form = layui.form;
  19. layer.msg('Hello World');
  20. });
  21. </script>
  22. </body>
  23. </html>
经典，因返璞归真

layui 定义为「经典模块化」，并非是自吹她自身有多优秀，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！她的所谓经典，是在于对返璞归真的执念，她以当前浏览器普通认可的方式去组织模块！我们认为，这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的绝佳指引。所以 layui 本身也并不是完全遵循于 AMD 时代，准确地说，她试图建立自己的模式：

</>code

  1. //layui 模块的定义（新 js 文件）
  2. layui.define([mods], function(exports){
  4. //……
  6. exports('mod', api);
  7. });
  9. //layui 模块的使用
  10. layui.use(['mod1', 'mod2'], function(args){
  11. var mod = layui.mod1;
  13. //……
  15. });

没错，她具备早前 AMD 的影子，又并非受限于 CommonJS 的那些条条框框，layui 认为这种轻量的组织方式，比WebPack更符合绝大多数场景。所以她坚持采用经典模块化，也正是能让人避开工具的复杂配置，回归简单，安静高效地编织原生态的 HTML/CSS/JS。

但是 layui 又并非是 RequireJS 那样的模块加载器，而是一款 UI 解决方案，与 BootStrap 的不同又在于：layui 糅合了自身对经典模块化的理解。这使得你可以在 layui 组织的框架之内，以更具可维护性的代码、去更好的编织丰富的用户界面。

建立模块入口

您可以遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：

</>code

  1. <!-- 你引入的 layui.js 建议是通过官网首页下载的。当然也可以由 github 或 gitee clone -->
  2. <script src="./layui/layui.js"></script>
  3. <script>
  4. layui.config({
  5. base: '/res/js/modules/' //你存放新模块的目录，注意，不是 layui 的模块目录
  6. }).use('index'); //加载入口
  7. </script>
上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：

</>code

  1. /**
  2. index.js 项目 JS 主入口
  3. 以依赖 layui 的 layer 和 form 模块为例
  4. **/
  5. layui.define(['layer', 'form'], function(exports){
  6. var layer = layui.layer
  7. ,form = layui.form;
  9. layer.msg('Hello World');
  11. exports('index', {}); //注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致
  12. });
posted @ 2021-10-28 18:59  禁小呆  阅读(37)  评论(0)    收藏  举报