浅谈layui中使用函数layui.define的方法

前言:

1、如果你深刻理解并合理运用 layui.define,那么本篇对你来说有点浪费时间了。

2、如果你对于“Javascript 模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么是“Javascript 模块化开发”,这对你理解我后面所说的很重要,当然,也会帮助你更好地理解 Layui 作者想表达的理念。

步入正题,在 Layui 文档的首页,我们可以看到这样一句话:

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架

我们在使用 Layui 的时候,经常使用的是

layui.use([], function(){})

但是,细心的小伙伴会发现 layui 还有一个函数是 layui.define,这个是用来做什么的呢?

以前我们写代码是没有模块化概念的,如下面的代码:

function entry(type) {
  if (type === 1) { handle1() }
  else if (type === 2) { handle2() }
  else { handleall() }
}

function handle1(){}
function handle2(){}
function handleall(){}

长期的实践让程序员明白,javascript 模块化是必不可少的。而在实现模块化,每一家都有自己的想法和实现。他们尽可能考虑所有的问题,这也导致使用他们的模块化你需要一个复杂的配置。

layui 采用自身的加载方式,和其他模块化实现相比,她是比较轻量级的。她有2个核心函数 define 和 use 来实现自身的模块化,但是有时候也会给人迷惑。我司小伙伴在使用过程中就问过我,layui 的 define 函数感觉和 use 函数差不多啊,如何做到正确使用?

如 layui 文档所说函数 layui.define,那是用来扩展组件的。而函数 use 是加载使用这个组件的。但是什么样的代码才能算组件呢,在扩展组件页面,我们也可以看到一些优秀的作者分享了他们的成果。但是我们可以看到这些组件都有个共同点,那就是不涉及业务(这不是废话,有业务谁用它)。

所以一旦设计业务,不在是组件了,这时候我们可以换个名称,叫做接口。那么区别函数 define 和 use 就很好理解了。函数define 就是为了定义组件或者接口的,函数 use 就是为了使用那些组件或者接口。如果你写的组件或者接口想让别人使用,那么就使用函数 define,但是如果你的函数只是内务执行,不需要让他人调用,那么就使用函数 use。

到这里,如果你现在很清晰地明白两者的区别,那么在下面的架构一个简单的 layui 项目应该更加明白。

首先,你需要到这里下载一个简单的搭建项目 layui.test.project

然后用工具打开项目,我们可以清楚地看到文件目录。

1.png

这里就运用到了大量的 layui.define,展示在 index.single.html,这里面我们配置了 layui 的cdn,配置了全局的 layui 参数,最后是我们所运用的业务脚本。

打开 layui.config.js,可以很清楚看到内容,这里面我本人定义了 2 个组件(注意这个称呼),它们是没有任何业务上的逻辑。所以我放在了 lib 文件夹,它是用了存放一些非业务公共的组件。因为会大量使用,所以我提前配置完毕。

而后我们会来到入口脚本 main.single.js,这里面使用了 layui 自身的模块 jquery,form,也使用了我刚刚定义的模块 logger 和 more,因为我不会导出给他人使用,所以使用的函数use 。而在其内部,我做了简单的测试逻辑。

题外话:如果你偏向单页模式,需要自己实现,就目前我知道仅仅一个就是 page.js ,当然layui 官方的单页模板也是自带这样的功能的。在编写单页逻辑时,建议新建一个脚本 layui.router.js,在将这个接口导出,最后在main.single.js 里调用,这样后期维护也会简单。

接下来,你可能会发现还有 api,const,utils 在这里根本没用到,他们是做什么的呢。

api 故名思意就是为了提供与后台接口的处理,因为 layui 自带了 jquery,那么在与后台接口调用上我们采用 jquery.ajax,回调函数有时候是一些初学者的噩梦,所以我们采用 jquery的 deffer 对象,可以链式调用。

这里我没有封装 jquery.ajax 的,这样错误处理,token 携带没有统一的处理,无形会加载工作量,所以你需要补充封装 jquery.ajax 的接口才行,这里可以再次定义一个组件 layui.ajax.js

const 存放常量,这里配置了一个返回接口的关键字 response.js,当然这是为了模拟,如果前后台商量好,也可以直接在项目写死。

utils 存放工具类,我们常用的转换时间,转换url 都是可以写在这里的。

这 3 个文件夹是为了辅助其他业务页面而配置的,所以基本全部使用懒加载调用,它们以函数 define 开始,最后导出一个接口名,给外部调用。不同于lib 需要预先配置,在使用他们的时候,需要自己重新配置,这里以 utils 加载为例:

layui.extend({
  utils: '/path/to/utils/index'
}).use(['utils'], function(){
  var utils = layui.utils
  // ...
})

注意: 如果你使用ftl,jsp,apsx这些由后台渲染的页面引擎,应该会有一个公共的头部,那么刚刚的全局配置 layui 文件 layui.config.js,你可以在公共的头部加入。


推荐文章
浅谈layui时间控件闪退问题的解决方案

项目上线,发现后台管理系统layui的子页面出现时间控件闪退的问题,根本选取不到时间。其原因是:如果出现页面找到多个节点,只有第一个节点能正常使用后面的节点都会闪退,可以理解为目前laydate不支持

layui框架中常见表单排版:水平+垂直排版

平常我们经常用到的表单排版方式常见的有两种,layui文档中已经给出垂直的排版方式,来源:https://www.layui.com/doc/element/form.html。我们做后台的时候也会用

layui input只读属性是什么?

layuiinput只读属性是什么?layuiinput只读属性是readonly。readonly属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

layui中怎么设置select下拉框自动选中某项?

1、需求场景分析用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。2、Layui的select

layui兼不兼容ie8?

layui兼不兼容ie8?layui兼容ie8,layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。layui(谐音:类UI)是一款采用自身模块规范

详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

layui如何自定义字体图标?(图文介绍)

layui的图标取自于阿里巴巴的矢量图标库Iconfont第一步,通过浏览器打开http://iconfont.cn/,访问阿里巴巴矢量图标库。第二步,通过右上角的用户图标,授权登陆一个账号,在此我选

layui的优缺点是什么?

layui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实上layu

浅谈layui数据表格隐藏列的方法

在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test' ,url:'${pag

详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui时间控件清空之后无法正常使用怎么办?

解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择。共有两种解决方式:方式一(layui1.x):html代码: js代码:varstart={ istime:tru

如何使用webpack打包layui?(实践)

总的来说打包webpack打包layui要解决几个问题:1、解决引入layui-src报错的问题2、layui插件的打包方式3、解决打包后样式不生效的问题解决上面几个问题,基本就能成功打包了首先安装l

浅谈Layui的时间选择框

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

layui怎么隐藏表格行?

layui数据表格隐藏列在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test'

layui调用弹层的方法

两种调用方法:1、引用独立的layer.js文件引入好layer.js后,直接用即可 layer.msg('hello'); 2、调用layui中的layer模块layui.use('layer',

layui动态表格之合并单元格

需求:下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的:①第一步:再生成表格后调用此方法,以合并重复的单元格done:function(res,curr,count){ merge(

如何用layui实现图片上传?

layui上传功能的实现:一、前往官网下载layui的框架打开html文件,引用其中的layui.css和layui.js二、调用前端的html代码,设置id值。 上传图片   layui

layui如何抓取表单数据?

注意事项:1、layui中提交按钮是基于“监听”机制实现的。2、form.on()的调用需置于layui.use的回调函数中。3、末尾的'returnfalse'不可或缺,以确保不会触发页面刷新。注意