JavaScript 模块机制

前言

项目之前使用AngularJs，Angular前端框架。换工做以后新项目使用jQuery，又感受回到原始时代。时代虽然倒回去了，可是思想不能也跟着倒回去。所以根据AngularJs编程风格封装一个简单的模块机制来写jQuery代码。

模块机制

大多数模块依赖加载器/管理器，本质上都是将这种模块定义封装进一个有好的API。在此，只是简单作了一下模块封装。

var Module = (function() {
    var modules = {};
    
    function controller(name, deps, impl) {
        for (var i = 0, len = deps.length; i < len; i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply(impl, deps);
    }

    function get(name) {
        return modules[name];
    }

    return {
        controller: controller,
        get: get
    }
})()

如何使用

Module.controller('hello', [], function() {
    function hello(who) {
        return 'hello ' + who;
    }
    return {
        hello: hello
    }
})
Module.controller('upperCase', ['hello'], function() {
    var who = 'dwyane wade';

    function awesome() {
        console.log(hello.hello(who).toUpperCase());
    }

    return {
        awesome: awesome
    }
})

var hello = Module.get('hello');
var upperCase = Module.get('upperCase');
console.log(hello.hello('dwyane wade'));
upperCase.awesome();

后记

ES6中引入了Class，Module。就不须要咱们过多的了解模块化机制以及设计模式思想就能很好的管理代码，可是深刻的去学习设计模式对总体框架把控仍是有很大地帮助的。