本文摘自PHP中文网,作者尚,侵删。
前言:
1、如果你深刻理解并合理运用 layui.define,那么本篇对你来说有点浪费时间了。
2、如果你对于“Javascript 模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么是“Javascript 模块化开发”,这对你理解我后面所说的很重要,当然,也会帮助你更好地理解 Layui 作者想表达的理念。
推荐:layui框架教程
我们在使用 Layui 的时候,经常使用的是
1 |
|
但是,细心的小伙伴会发现 layui 还有一个函数是 layui.define,这个是用来做什么的呢?
以前我们写代码是没有模块化概念的,如下面的代码:
1 2 3 4 5 6 7 8 9 |
|
长期的实践让程序员明白,javascript 模块化是必不可少的。而在实现模块化,每一家都有自己的想法和实现。他们尽可能考虑所有的问题,这也导致使用他们的模块化你需要一个复杂的配置。
layui 采用自身的加载方式,和其他模块化实现相比,她是比较轻量级的。她有2个核心函数 define 和 use 来实现自身的模块化,但是有时候也会给人迷惑。我司小伙伴在使用过程中就问过我,layui 的 define 函数感觉和 use 函数差不多啊,如何做到正确使用?
如 layui 文档所说函数 layui.define,那是用来扩展组件的。而函数 use 是加载使用这个组件的。但是什么样的代码才能算组件呢,在扩展组件页面,我们也可以看到一些优秀的作者分享了他们的成果。但是我们可以看到这些组件都有个共同点,那就是不涉及业务(这不是废话,有业务谁用它)。
所以一旦设计业务,不在是组件了,这时候我们可以换个名称,叫做接口。那么区别函数 define 和 use 就很好理解了。函数define 就是为了定义组件或者接口的,函数 use 就是为了使用那些组件或者接口。如果你写的组件或者接口想让别人使用,那么就使用函数 define,但是如果你的函数只是内务执行,不需要让他人调用,那么就使用函数 use。
到这里,如果你现在很清晰地明白两者的区别,那么在下面的架构一个简单的 layui 项目应该更加明白。
首先,你需要到这里下载一个简单的搭建项目 layui.test.project。
然后用工具打开项目,我们可以清楚地看到文件目录。
相关阅读 >>
更多相关阅读请进入《layui》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者