如何引入layui.css,正确引入Layui模块-程序员宅基地

技术标签: 如何引入layui.css  

Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢

引入所有

浏览器在加载的时候会加载一个较大的layui.all.js文件

然后会把每个模块暴露出去,直接用就可以了

但你必须知道,这种使用方式,意味着Layui的模块化已经失去了它的意义。但不可否认,它比什么都来的简单。

//获得模块的引用

var layer = layui.layer;

layer.msg("Hello World");

//直接用

layer.msg("666")

通过layui.use加载模块

通过这种方式引入模块最大的好处是,在需要的时候才被加载需要模块,能够提高网页的记载速度

layui.use(['模块名','模块名'], function(){

//加载完成的回调函数

//推荐方法写在这里面,因为不知道什么时候加载完毕

});

console.info(layui);//一个对象,里面什么都没有

layui.use(['layer'], function(){

//加载结束后会把模块名曝露在layui上,可以直接使用layui.xx调用

var layer = layui.layer;

console.info(this);//等价于layui

});

自定义模块引入

定义

//layui模块的定义

layui.define([mods], function(exports){

//mods,你的模块依赖的模块,先加载它们

//自定义的api

var api={};

exports('mod', api);//把mod绑定到layui对象上,注意mod的名字必须喝use的时候一样

});

使用方法如下

//指定引入某个目录下的模块

layui.config({

base: 'static/modules/' //你的模块目录

}).use('mymod'); //加载入口

//或者先声明模块目录

layui.config({

base: 'static/modules/' //你的模块目录

});

//然后再使用,先根据名字判断是否是layui内置的模块,然后引入声明的模块目录下的mymod.js文件

layui.use(['mymod'], function(){

//...

});

效果如下

t {

mymod:Object,

v:"1.0.9_rls",

__proto__:Object

}

layui.mymod.say()

推荐将自己的js方法以layui模块的方式书写,这样就可以通过user的方式来在需要的时候加载,加快页面的载入速度

最佳实践

页面

...

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36075067/article/details/119398518

智能推荐

centos7挖矿病毒(xmrig,javs)清理_xmrig miner怎么彻底清除-程序员宅基地

文章浏览阅读3.3k次。1. 查看计划任务ls /var/spool/cron删除异常任务其配置项。如果当前系统之前并未配置过计划任务,可以直接删除计划脚本目录即可:rm -rf /var/spool/cron/*2. 查看密钥认证文件删除木马创建的密钥认证文件,如果当前系统之前并未配置过密钥认证,可以直接清空认证存放目录:rm -rf /root/.ssh/*如果有配置过密钥认证,需要删除指定的黑客创建的认证文件即可。3. 修复 SSH 配置项一般默认脚本中进行修改的 PermitRootLogin、R._xmrig miner怎么彻底清除

产品经理如何与研发工程师相处?-- Julie Zhuo_研发是把想法变成现实的桥梁-程序员宅基地

文章浏览阅读358次。原作者:Julie Zhuo,前Facebook产品设计副总裁原文地址:https://medium.com/the-year-of-the-looking-glass/how-to-work-with-engineers-a3163ff1eced很久以前,我当过项目经理。之后,我成为了工程师。最近7年,我担任产品设计师。每天我都与这三个岗位的人一起工作。每天,我都能发现新的方式来理解这产品研发背后的三大支柱的职责、挑战和艺术。研发工程师是魔术师,他们只需要轻轻动几下手指调整像素,瞧,一个能运作的产_研发是把想法变成现实的桥梁

利用虚拟机实时迁移技术可以实现服务器的,VMware vMotion虚拟机的实时迁移技术概述...-程序员宅基地

文章浏览阅读3k次。vMotion可在主机之间迁移正在运行的虚拟机,因此进行计划内服务器维护时无需中断应用的使用。概览vSphere vMotion 能在实现零停机和服务连续可用的情况下将正在运行的虚拟机从一台物理服务器实时迁移到另一台物理服务器上,并且能够完全保证事务的完整性。 vMotion 是创建动态、自动化并自我优化的数据中心所需的关键促成技术。即时迁移正在运行的虚拟机轻松管理和安排实时迁移即时迁移正在运行的..._vmware 虚机 漫游 实时性

文档词频矩阵_对论文“从词向量到文档距离”的理解-程序员宅基地

文章浏览阅读184次。文章:From Word Embeddings To Document Distances研究背景在此之前,文档的两种最常见的表述方式是通过袋词(BOW)或词频-逆文档频率(TF-IDF)。但是无法解决近义词之间的距离问题,即是BOW和TF-IDF无法表达词语的含义。由于word2vec的出现,近义词的问题解决了,通过word2vec将词语表示成向量,用两向量的距离表示两词语的距离可以很好的区分“..._文档词频矩阵

Oracle中单引号与双引号的使用及动态拼接_oracle拼接单引号-程序员宅基地

文章浏览阅读1.6k次,点赞9次,收藏13次。Oracle中单引号与双引号的使用及动态拼接。_oracle拼接单引号

c# 将数据导出到EXCEL文件(一)_c#保存数据到excel-程序员宅基地

文章浏览阅读6.4k次,点赞4次,收藏39次。c# 导出到excel 文件_c#保存数据到excel

随便推点

大专计算机组装知识,计算机大专班硬件组装期末复习题-程序员宅基地

文章浏览阅读211次。《微机外设与维修》期末考试样题一、填空题1、显示器的分辨率由和组成。2、计算机常见的外围设备主要有:___________、__________、___________等。3、目前显卡与主板的接口有和。最流行的是接口。4、主板上的一个IDE接口可以接___________个IDE设备,一个称为___________设备,另一个称为___________设备。5、CPU的主频与外频的关系:。6、主板..._当计算机等新兴技术设备新安装的显卡打印机等硬件或外围设备后需要安装什么才

ModuleNotFoundError: No module named ‘OpenGL‘_modulenotfounderror: no module named 'opengl-程序员宅基地

文章浏览阅读1.2w次,点赞8次,收藏16次。ModuleNotFoundError: No module named ‘OpenGL’报错信息ModuleNotFoundError: No module named 'OpenGL'解决办法pip install pyOpenGL -i https://pypi.douban.com/simple== pyOpenGL 指定豆瓣源镜像==_modulenotfounderror: no module named 'opengl

NOIP 2002 过河卒_noip 2002 过河卒)-程序员宅基地

文章浏览阅读886次。如图,A 点有一个过河卒,需要走到目标 B 点。卒行走规则:可以向下、或者向右。同时在棋盘上的任一点有一个对方的马(如上图的C点),该马所在的点和所有跳跃一步可达的点称为对方马的控制点。例如上图 C 点上的马可以控制 9 个点(图中的P1,P2 … P8 和 C)。卒不能通过对方马的控制点。棋盘用坐标表示,A 点(0,0)、B 点(n,m)(n,m 为不超过 20 的整数,并由键盘输入),同样..._noip 2002 过河卒)

mysql 分组后排序 @pre 和@rank_mysql @pre-程序员宅基地

文章浏览阅读1.1k次。数据表employee 如图每个部门的工资排序并有名次## 先(部门,薪水)去重,再 部门(升),薪水(降) 排序SELECT te.DepartmentId, te.Salary, CASE WHEN @pre = DepartmentId THEN @rank:= @rank + 1 WHEN @pre := De..._mysql @pre

office 365 ppt创意方法3(透明文字)_office365网页版ppt艺术字-程序员宅基地

文章浏览阅读352次。效果。1、新建。2、插入文字。3、插入图片。4、相交。1)点选照片。2)按CTRL键+点选文字。5、插入刚刚的照片。6、设置变换。导出gif格式。..._office365网页版ppt艺术字

ping命令将结果输出到文本_将ping结果输出到文本-程序员宅基地

文章浏览阅读5.1k次。ping命令将结果输出到文本_将ping结果输出到文本

推荐文章

热门文章

相关标签