简单实现LayUi框架的模块化功能

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

前言

有一个UI框架,可能有的人比较熟悉,有的人只是听说过,它叫Layui,这个ui框架底层用的是jQuery和类似AMD的模块化方式,和类似bootstrap的样式命名. 用法上直接下载压缩包就可以使用,不需要打包工具. 就是这样一个看似古老的UI框架却也吸引着很多开发使用. 我们公司的很多项目就是基于它去做的后台管理系统. 今天偶然打开LayUI的官网,发现弹出一个重要公告,大致意思是LayUI也即将退出历史舞台了. 不由得有点唏嘘. 那么今天我们就做一个简易的类似LayUI的模块化写法.

LayUI的用法

定义模块

layui.define(function(exports){
  //do something
  exports('demo', {
      msg: 'Hello Demo'
  });
});

加载模块

layui.use(['demo'], function(demo){
    console.log(demo) // {msg: 'Hello Demo'}
});

实现

var layui = (function () {
    var modules = {}
    function _export(name, data) {
        modules[name] = data
    }
    function define(fn) {
        fn.call(fn, _export)
    }
    function use(deps, fn) {
        for (var i = 0; i < deps.length; i++) {
            deps[i] = modules[deps[i]]
        }
        fn.apply(fn, deps)
    }
    return {
        define,
        use
    }
}())
layui.define(function(exports){
  //do something
  exports('demo', {
      msg: 'Hello Demo'
  });
});
layui.use(['demo'], function(demo){
    console.log(demo) // {msg: 'Hello Demo'}
});

下面讲解一下实现的原理. 首先把一个闭包的自执行函数赋值给变量layui,这样的做法,目的是可以让闭包里的变量modules可以缓存下来, 并且是私有的. 对外暴露出来define和use方法,在use方法里边第一个参数是依赖的数据的key, 第二个参数是执行的函数, 我们先把依赖的数组的key转成真正的依赖的函数,然后再用apply把依赖的函数放到执行的函数里边. 然后我们在use里边就可以按照依赖的函数名顺序,在执行函数依次写上. 也就是这样:

layui.use(['demo'], function(demo){
    console.log(demo) // {msg: 'Hello Demo'}
});

至于define方法就比较简单了. 我们在函数里边写了一个私有的函数_export, 这个函数接收一个name,一个数据. 然后把这个方法也按照use一样通过call,放进入到define的执行函数fn中, 然后我们就能像这样来使用它了:

layui.define(function(exports){
  //do something
  exports('demo', {
      msg: 'Hello Demo'
  });
});

结语

哎, 感觉LayUI还是有一些情怀在里边的. 最后引用上LayUI的重要公告中的一句话作为一个结语吧. 晚安了. 各位!

过去五年，layui 有幸被应用在不计其数的 Web 平台，在前端工程化迅速席来的浪潮中，我们仍然感受到一丝来自于 jQuery 的余晖，这是一种带有热量的冰冷（反之亦可）。使命已达，便纵有万般遗憾，更与何人说？！