项目中如何优雅地使用函数 layui.define

前言:

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

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

我们在使用 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 。而在其内部,我做了简单的测试逻辑。

接下来,你可能会发现还有 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开源吗?layui是免费开源的。layui是一款开源和免费的前端UI框架,可随意使用;不过为了维持发展,在其生态下,也会推出一些基于layui的收费产品,比如:layuiAdmin和layI

浅谈让 layui table 固定列也能监听滚动的方法

目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列

layui的模块是什么意思?

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

layui是什么时候开发的?

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

layui如何刷新当前tab?

layui中可以使用reload()方法刷新当前tab,reload()方法用于刷新当前文档。reload()方法类似于你浏览器上的刷新页面按钮。如果把该方法的参数设置为true,那么无论文档的最后修

layui怎么设置时间选择框?

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

layui同页面如何显示多种时间样式?

Layui时间模块同页面显示多种时间样式layui时间模块主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器等五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。代码如下:

浅谈layui上传文件和数据表格中的一些问题

layui是一款我比较喜欢的框架,它的界面风格和颜色搭配都是让人比较舒服的,所以我非常喜欢使用layui。接下来就是在工作中使用layui遇到了一些比较细节的问题:第一:layui上传文件的问题,第二

如何用layui实现图片上传?

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

laypage组件常见用法总结

laypage的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。核心方法:laypage.render(options)来设置基础参数。一、laypage的常用基

layui如何清除表单数据?

layui清空表单数据的方法:1、调用reset()方法清空functionfomrReset() { document.getElementById("myform").reset(); }2、使用

浅谈layui弹出层(open)的属性

layui.open属性如:打开一个弹出层核心方法varindex=layer.open({ type:2, title:title, maxmin:true, offset:'100px', are

layui表格中怎么显示图片?

layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了1、jsp代码 发布Banner 2、然后是js代码layui.use('table',function()

浅谈Layui的时间选择框

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

layui框架学习之flow组件常见用法总结

该模块包含信息流加载和图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法:一、信息流加载信息流加载的核心方法时flow.load(optio

layui是啥框架?

layui首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面

layui如何支持 es5 写法?方法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

layui如何关闭弹出层?

layui可以使用closeAll关闭弹出层,如果不指向层类型的话,它会销毁掉当前页所有的layer层。我们可以使用下面的方法关闭指定层:layer.closeAll();//疯狂模式,关闭所有层la

layui input只读属性是什么?

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

浅谈layui中的table字段筛选功能

table模块在layui2.0的版本中全新推出,是layui框架最核心的组成之一。本篇文章就来为大家介绍一下layui框架的table模块的字段筛选功能,希望对大家有一定的帮助。先看效果,使用过ex