首页 > 其他分享 >layui.config详解

layui.config详解

时间:2023-11-14 18:11:06浏览次数:38  
标签:layui 配置 js 详解 模块 config 加载

原文链接:https://www.python100.com/html/80540.html

下载layui的官网首页:https://www.bejson.com/doc/layui/index.html

一、layui.config什么意思

(谐音:类 UI)
在了解layui.config之前,我们需要先了解 layui 静态文件加载器。它是一个简化的资源加载器,可以自动为模块分析和处理其依赖关系。 layui.config 是 layui 静态文件加载的第一行代码,其作用是为 layui 配置信息。通过layui.config 可以方便地引入功能模块,在编写 layui 的项目时,layui.config 操作需要格外注意。

二、layui.config的使用
使用 layui.config 首先要引入 layui.js 文件,当 HTML 页面出现一个标识成layui.js 的 script 标签时,浏览器会将其解析为 JavaScript 脚本并立即执行。在加载 layui.js 时,您可以将layui.config写在几乎所有前端的 js 文件之前,这样就可以在使用任何模块之前修改 layui 配置了,同时也方便layui加载器对依赖进行分析。


// 在layui.js 文件之前引入
< script src="http://cdn.layui.com/layui/2.5.6/layui.js" >< /script>
< script >
layui.config({
version: '2.5.6',
base: '/res/custom/', // 自定义样式地址,layui默认引入的是基础的样式,我们可以在这里配置自定义样式路径
modules: { // 配置模块
laydate: 'laydate', // 模块名:文件名
laypage: {
deps: ['laypage.css', 'laypage.js'], // 配置依赖
url: 'laypage/laypage.js'
},
treeTable: {
url: '/modules/plat/treeTable/treeTable.js',
// 设置为 false 可不加载该模块,而只我们外部不会发现
// 恶意跳过依赖模块,直接加载该模块则会有报错
done: function () {
console.log('模块 treeTable 被加载完成!');
}
}
}
});
< /script >
三、layui.config的配置参数
在 layui.config 中可以配置多个参数,下面是常见的配置参数列表:

1、version
表示 layui 版本号,版本号不对会影响某些功能的使用。


layui.config({
version: '2.5.6', //设定版本号
});
2、base
可以配置 layui 自带模块的路径或自定义模块的路径,如配置了自定义路径,layui 会去该路径下查找模块。如果不配置则默认为 layui.cache.dir。


layui.config({
base: '/res/custom/', // 自定义样式地址
});
3、mods
用于配置模块地址和依赖关系,每个模块名都与其对应文件名或文件路径相对应,均可以省略文件类型后缀名(.js 和 .css)。


layui.config({
modules: {
code: 'CodeMirror/lib/code.js', // 路径
dtree: { // 模块名:文件名
deps: [
'/modules/dtree/dtree.css'
],
url: '/modules/dtree/dtree.js'
}
}
});
4、debug
debug 模式下 layui 会输出模块加载情况,通常在开发阶段使用。


layui.config({
debug: true, // 是否开启调试模式
});
5、charset
layui.config 中的 charset 选项用来指定输出内容的字符集,对于汉字网站来说,很重要。如果不设置字符集,默认为 utf-8。


layui.config({
charset: 'utf-8'
});
四、layui.config的注意点
1. layui.config 一定要在 layui 的静态文件加载前引入;

2. layui.config 的 modules 配置项中配置的模块名,需要与对应的模块文件名(或路径名)一致;

3. 配置自定义路径的 base 最后必须加上“/”,否则也会造成相对路径加载出问题;

4. 对于不是 layui 的内置模块,模块的 name 和 path 必须一致,否则会加载不出来;

5. layui 通过加载的模块都会缓存到 layui 的模块缓存中,模块一旦被定义后,除非确实不需要,要避免直接删除模块定义文件。

 

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

</>code
<!-- 你引入的 layui.js 建议是通过官网首页下载的。当然也可以由 github 或 gitee clone -->
<script src="./layui/layui.js"></script>
<script>
layui.config({
base: '/res/js/modules/' //你存放新模块的目录,注意,不是 layui 的模块目录
}).use('index'); //加载入口
</script>

标签:layui,配置,js,详解,模块,config,加载
From: https://www.cnblogs.com/Dongmy/p/17832234.html

相关文章

  • springboot+springsecurity+layui+cherryMd博客系统
    演示地址:http://175.24.198.63:9090/front/indexPS:演示环境的服务器配置很低,带宽很小,若打开速度较慢,稍微等等哦~现在动不动就是前后端分离,其实访问量不大博客这种项目,没有必要为了分离而分离。SpringBoot+LayUI:快速开发:LayUI是一个简单的UI框架,它提供了易于使用的组......
  • Cocos Creator 3.0基于PBR的物理渲染详解
    CocosCreator3.0出来以后,终于CocosCreator升级成为全新的2D/3D游戏引擎,适合2D和3D游戏开发,而3D游戏对画面效果和渲染管线的定制会有很高的需求,PBR美术工作流作为次世代主流的解决方案,今天我们来详细的分析一下基于CocosCreator的PBR物理渲染。1:计算机是如何显示颜色的讨......
  • 神经网络入门篇:详解向量化实现的解释(Justification for vectorized implementation)
    向量化实现的解释先对几个样本计算一下前向传播,看看有什么规律:公式1.16:\(z^{[1](1)}=W^{[1]}x^{(1)}+b^{[1]}\)\(z^{[1](2)}=W^{[1]}x^{(2)}+b^{[1]}\)\(z^{[1](3)}=W^{[1]}x^{(3)}+b^{[1]}\)这里,为了描述的简便,先忽略掉\(b^{[1]}\)后面将会看到利用Python的......
  • Nacos共享配置(shared-configs)和扩展配(extension-config)
    原文地址:https://www.jianshu.com/p/8715072d3f4c一、共享配置(shared-configs)和扩展配(extension-config)日常开发中,多个模块可能会有很多共用的配置,比如数据库连接信息,Redis连接信息,RabbitMQ连接信息,监控配置等等。那么此时,我们就希望可以加载多个配置,多个项目共享同一个......
  • 图文详解!带你认识 ancert:硬件兼容性标准实现工具!| 龙蜥技术
    编者按:大家都知道OS 其实是硬件设备资源利用的抽象,所以OS和各个硬件设备之间是否兼容,对OS的稳定性是非常关键。今天,龙蜥社区硬件兼容性SIG  Maintainer 吴朝峰为大家介绍龙蜥社区硬件兼容性认证的步骤和流程,以及硬件兼容性认证工具ancert......
  • Cocos Creator中Component使用详解
    序言在CocosCreator游戏开发中,组件是使用是非常频繁,对于组件的入口函数、常用属性、组件的操作等,必须做到非常熟悉。一、组件入口函数1:onLoad:组件加载的时候调用,保证了你可以获取到场景中的其他节点,以及节点关联的资源数据2:start:也就是第一次执行update之前触发......
  • 【Redis】详解 Redis哨兵(Sentinel)架构,Master 挂了的故障转移措施
    (目录)Redis哨兵(Sentinel)架构Redis主从复制一主多从架构master主要负责写入,slave负责读取,有读写分离的功能redis主从同步原理1、slave执行命令向master建立连接2、master执行bgsave(后台存储),生成rdb快照(redis备份方式,data以二进制方式保存在本地),发送到slave上3、sla......
  • 【celery详解】celery学习md笔记 第(2)期:Celery任务调度详解
    Celery是一个功能完备即插即用的任务队列。它使得我们不需要考虑复杂的问题,使用非常简单。celery看起来似乎很庞大,本文我们先对其进行简单的了解,然后再去学习其他一些高级特性。全套笔记直接地址:请移步这里共4章,12子模块介绍一下如何调用任务,队列路由.1.signature我......
  • Angular 服务器端渲染应用 re-hydration 过程详解
    当使用Angular启用服务器端渲染(Server-SideRendering,以下简称SSR)时,应用程序的工作方式发生了显著变化。这使得Angular应用更加友好,不仅对搜索引擎爬虫更友好,还有助于改善应用的性能和加载时间。在本文中,我们将详细介绍在浏览器端访问启用SSR的Angular应用时背后发生的事情,特别侧......
  • 使用 npm config set script-shell 实现跨平台的脚本执行需求
    npmconfigsetscript-shellC:\\app\\Git20180223\\bin\\bash.exe这个命令的准确含义是设置npm的脚本(shell)执行环境为"C:\app\Git20180223\bin\bash.exe"。这个命令用于修改npm的配置,具体来说,它修改了npm的一个配置项,该配置项用于指定在执行npm脚本时使用的shell程序。在这个......