js进阶教程之模块化开发

做过layui的小伙伴经常看到这样的代码

//定义一个模块
layui.define(['jquery'], function(exports){
	var $ = layui.jquery;
	//模块的具体实现
	var myModule = {
		sayHello: function(){
			console.log('Hello Layui!');
		}
	};
	//输出模块
	exports('myModule', myModule);
});
//使用模块
layui.use(['myModule'], function(){
	var myModule = layui.myModule;
	//调用模块的方法
	myModule.sayHello();
});

这种模块化开发的好处是，可以将大的模块拆分成多个小模块，然后进行调用组装，加下来我们自己来实现一个类似layui的模块化组件开发

	// 自定义模块
   let module = (function () {
   		// 存储模块列表
        let moduleList = []
        // 定义模块， name是模块的名字，  modules是模块的列表， action是模块执行的操作
        function define (name, modules, action) {
            modules.map((m, i) => {
            	// 把具体模块名称替换成之前已经注册好的模块对象
                modules[i] = moduleList[m]
            })
            // 把模块对象传给下一个调用者，下一个就能调用改模块了
            moduleList[name] = action.apply(null, modules)
        }
        return {define}
    })()
	// 定义hd模块，有first和max方法
    module.define('hd', [], function() {
        return {
            first(arr) {
                return arr[0]
            },
            max(arr, key) {
                return arr.sort((a, b) => b[key] - a[key])[0]
            }
        }
    }) 
	// 定义lesson模块，并调用hd模块
    module.define('lesson', ['hd'], function (hd) {
        let data = [
            {name: 'js', price: 199},
            {name: 'mysql', price: 78}
        ]
        console.log(hd.max(data, 'price'))
    })
	// 定义a模块
    module.define('a', [], function () {
        return {
            a: function (){
                console.log('a')
            }
        }
    })
	// 定义b模块
    module.define('b', [], function () {
        return {
            b: function (){
                console.log('b')
            }
        }
    })
	// 定义c模块，并调用 a 和 b模块
    module.define('c', ['a', 'b'], function (a, b) {
        console.log(arguments)
        a.a()
        b.b()
    })