layui项目中使用函数define的方法详解

edu83

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

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

我们在使用 Layui 的时候，经常使用的是layui.use([], function(){})

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

1.   layui.use(['carousel','jquery','element'],function(){
   
2.     var carousel = layui.carousel,$ = layui.$;
   
3.     //建造实例
   
4.     carousel.render({
   
5.       elem: '#yr0'
   
6.       ,width: '100%' //设置容器宽度
   
7.       ,arrow: 'always'
   
8.       ,height:'auto'
   
9.       //,anim: 'updown' //切换动画方式
   
10.     });
    
11. 
    
12.      var imgH = $('.imgbox div.layui-this').outerHeight();
    
13.     $('.imgH').css('height',imgH+'px')
    
14.     window.onresize = function () {
    
15.       var imgH = $('.imgbox div.layui-this').outerHeight();
    
16.       $('.imgH').css('height',imgH+'px')
    
17.     };

复制代码

长期的实践让程序员明白，javascript 模块化是必不可少的。而在实现模块化，每一家都有自己的想法和实现。他们尽可能考虑所有的问题，这也导致使用他们的模块化你需要一个复杂的配置。layui 采用自身的加载方式，和其他模块化实现相比，她是比较轻量级的。她有2个核心函数 define 和 use 来实现自身的模块化，但是有时候也会给人迷惑。layui 的 define 函数感觉和 use 函数差不多啊，如何做到正确使用？如 layui 文档所说函数 layui.define，那是用来扩展组件的。而函数 use 是加载使用这个组件的。但是什么样的代码才能算组件呢，在扩展组件页面，我们也可以看到一些优秀的作者分享了他们的成果。

所以一旦设计业务，不在是组件了，这时候我们可以换个名称，叫做接口。那么区别函数 define 和 use 就很好理解了。函数define 就是为了定义组件或者接口的，函数 use 就是为了使用那些组件或者接口。如果你写的组件或者接口想让别人使用，那么就使用函数 define，但是如果你的函数只是内务执行，不需要让他人调用，那么就使用函数 use。如果你现在很清晰地明白两者的区别，那么在下面的架构一个简单的 layui 项目应该更加明白。