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。就不須要咱們過多的瞭解模塊化機制以及設計模式思想就能很好的管理代碼，可是深刻的去學習設計模式對總體框架把控仍是有很大地幫助的。