对Layer UI 模块化的用法详解

此文章适合入门的同学查看，之前因为项目的原因，在网上找了一套Layer UI做的后台管理系统模板，完全不懂LayUI里面的JS用法，看了官方文档和其它资料后才明白怎么去实现模块化这个例子，但是还是感觉网上的资料写得不够清晰，我尝试把自己的想法写出来，大家可以一起学习

1.首先从简单的入手

加载所需模块

方法：layui.use([mods], callback)

引用了Layui.js后

往js文件写入

layui.use(['layer'],function(){ [mods]加载的模块，现在加载的是弹出层
 var layer = layui.layer; 弹出层模块
 layer.msg('风继续吹')
})

2.定义模块

方法：layui.define([mods], callback)

layui.define(['layer'], function(exports){
 //do something

 exports('demo', function(){
  alert('Hello World!');
 });
});

3.全局配置

方法：layui.config(options)

layui.config({
 base: 'js/' //你存放新模块的目录，注意，不是layui的模块目录
}).use('index'); //加载入口

来到这一步，也许你还不明白，但是看完以下这个例子，你就会清晰多了

1.新建一个js文件夹和一个index.html，再加上官方下载的layui文件

在js文件夹里面建立index.js(注意这个文件的名称)

目录现在是这样的

1

2.再进行全局配置

在index.html中写

layui.config({
 base:'js/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['index','layer'],function(){ //加载入口 上述的 index 即为你 js/ 目录下的 index.js，看看官方的文件结构，如下图,index.js相当于就成为了新的文件模块（与下文提的模块不一样）
 var layer = layui.layer;
 layer.msg('leslie world');
})

2

不仅可以指定我们的index.js模块文件模块（），还可以引用内置的模块，比如laydate,layer等等

3.自定义模块

在index.js中

layui.define(['layer'],function(exports){ //引用layer模块
 var layer = layui.layer;
 exports('index',function(){ //注意，这里是模块输出的核心，模块名必须和use时的模块名一致，这里的index就是在index.html use的模块
 layer.msg('leslie cheung');
 })
})

现在呢，我们已经定义了新的模块 index,怎么去运行该模块呢

4.最后使用热加载模块layui.use()

继续在index.js写

layui.use(['index'],function(){
 layui.index() //调用index这个自定义模块
})

最后总结一下，通俗易懂点来讲，进行全局配置(layui.config)：创建的这个index.js是我们业务所需要的文件模块，类似于layer,laydate那些结构的；

自定义模块：接着我们发现业务的需求，需要进一步在index.js去写自己的小模块，于是呢通过define自定义模块；

热加载模块：内置模块和自定义模块怎么使用，通过layui.use()去加载

好了，以上就是我个人的理解，如有错误，欢迎指出。希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Layui自定义模块的使用方法详解

    layui是一个极其不错的前端UI框架.是后端程序员的福音.总之如果你是一个后端开发者.如果你苦于你的界面"惨不忍睹".选择layui来开发是个极好的选择. 之前的项目也有使用过layui.只是没有过多的关注其框架本身.对于项目上.拿来即用即可! 为什么要自定义模块呢?好处很多.比如可以大量重用代码...... 我也是一个极其懒惰的人.总是想办法让代码可重用 根据layui官方的文档说明.首先第一步是要确定你要扩展的模块名称 我现在做的是登录功能.因此我的扩展模块名叫 login 使用

  • 对Layer UI 模块化的用法详解

    此文章适合入门的同学查看,之前因为项目的原因,在网上找了一套Layer UI做的后台管理系统模板,完全不懂LayUI里面的JS用法,看了官方文档和其它资料后才明白怎么去实现模块化这个例子,但是还是感觉网上的资料写得不够清晰,我尝试把自己的想法写出来,大家可以一起学习 1.首先从简单的入手 加载所需模块 方法:layui.use([mods], callback) 引用了Layui.js后 往js文件写入 layui.use(['layer'],function(){ [mods]加载的模块,现在

  • Require.js的基本用法详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能: ②:require.js要求js脚本必须要实现模块化,即文件化:而require.js的作用之一就是加载js模块,也就是js文件. ③:require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery,Angul

  • NodeJS加密解密及node-rsa加密解密用法详解

    要用nodejs开发接口,实现远程调用,如果裸奔太危险了,就在网上找了一下nodejs的加密,感觉node-rsa挺不错的,下面来总结一下简单的rsa加密解密用法 初始化环境 新建一个文件夹 node-rsa-demo , 终端进入,运行下面命令初始化 cd node-rsa-demo npm init # 一路回车即可 npm install --save node-rsa 生成公钥私钥 在 node-rsa-demo 下新建一个文件 index.js 写上如下代码 var NodeRSA =

  • Android Studio 3.6中新的视图绑定工具ViewBinding 用法详解

    前言 我们在Android开发的过程中总是需要获取XML布局中的ViewId,以便给其赋值进行显示,早期我们只能使用 findViewById 这个API,会导致很多的模版代码出现.2013年左右Android界大神 Jake Wharton开源了Butter Knife框架,通过Bind("viewid")方式方便开发者获取ViewId.近两年由于谷歌对Kotlin的支持,我们开始使用 Android Kotlin extensions. 在文件中导入布局文件直接引用viewId.无

  • 基于Tensorflow一维卷积用法详解

    我就废话不多说了,大家还是直接看代码吧! import tensorflow as tf import numpy as np input = tf.constant(1,shape=(64,10,1),dtype=tf.float32,name='input')#shape=(batch,in_width,in_channels) w = tf.constant(3,shape=(3,1,32),dtype=tf.float32,name='w')#shape=(filter_width,in

  • Keras—embedding嵌入层的用法详解

    最近在工作中进行了NLP的内容,使用的还是Keras中embedding的词嵌入来做的. Keras中embedding层做一下介绍. 中文文档地址:https://keras.io/zh/layers/embeddings/ 参数如下: 其中参数重点有input_dim,output_dim,非必选参数input_length. 初始化方法参数设置后面会单独总结一下. demo使用预训练(使用百度百科(word2vec)的语料库)参考 embedding使用的demo参考: def creat

  • Python3爬虫中Selenium的用法详解

    Selenium是一个自动化测试工具,利用它可以驱动浏览器执行特定的动作,如点击.下拉等操作,同时还可以获取浏览器当前呈现的页面的源代码,做到可见即可爬.对于一些JavaScript动态渲染的页面来说,此种抓取方式非常有效.本节中,就让我们来感受一下它的强大之处吧. 1. 准备工作 本节以Chrome为例来讲解Selenium的用法.在开始之前,请确保已经正确安装好了Chrome浏览器并配置好了ChromeDriver.另外,还需要正确安装好Python的Selenium库,详细的安装和配置过程

  • C#中backgroundWorker类的用法详解

    1.在 WinForms 中,有时要执行耗时的操作,在该操作未完成之前操作用户界面,会导致用户界面停止响应.解决的方法就是新开一个线程,把耗时的操作放到线程中执行,这样就可以在用户界面上进行其它操作.新建线程可以用 Thread 类,可以实现多线程同时操作.简单的方法可以通过 BackgroundWorker 类实现. BackgroundWorker 可以用来更新UI界面,但是通常用来Progressbar(进度条)控件 例如更新UI private void Form1_Load(objec

  • C# Invoke,begininvoke的用法详解

    一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解. 首先说下,invoke和begininvoke的使用有两种情况: 1. control中的invoke.begininvoke. 2. delegrate中的invoke.begininvoke. 这两种情况是不同的,我们这里要讲的是第1种.下面我们在来说下.NET中对invoke和begininvoke的官方定义. control.invoke(参数delegate)方

  • Android SurfaceView基础用法详解

    Android SurfaceView基础用法详解

    Android 游戏开发框架核心组件 核心组件介绍 SurfaceView 介绍 SurfaceView 介绍 SurfaceView 就是带 Surface 的 view,它是一个 View,是 View 的子类,所以和其他 View 一样,可以在屏幕上展示东西接收用户输入,具有 View 的生命周期回调函数,如 onMeasure.onLayout.onDraw.onTouchEvent 等 SurfaceView 带有独立的 Surface(独立与 window 的 surface),这可

随机推荐