请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 3514|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
     楼主| 发表于 2019-12-23 21:17:26 | 显示全部楼层 |阅读模式

    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.      var imgH = $('.imgbox div.layui-this').outerHeight();
    12.     $('.imgH').css('height',imgH+'px')
    13.     window.onresize = function () {
    14.       var imgH = $('.imgbox div.layui-this').outerHeight();
    15.       $('.imgH').css('height',imgH+'px')
    16.     };
    复制代码

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

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



    造物之前,必先造人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2020-8-12 05:54 , Processed in 0.257438 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表