模块治理的简朴完成体式格局

Keep It Simple，Stupid

Q&A

1. 为何会有这个东西？

轻易构造你的代码，进步项目的可维护性。一个项目的可维护性高不高，也表现一个顺序员的程度，在现在愈来愈庞杂的前端项目，这一点尤为重要。

2. 为何不必requirejs，seajs等

它们功能强大，然则文件体积是个题目，别的另有就是营业有时候能够没那末庞杂，正如开首所说的：keep it simple

3. 以下的完成从哪里来的？

这些自创了requirejs,seajs,commonjs等的完成，用于实在的项目，稳固运转，结果不错。

4. 实用场景

• 挪动端页面，将js注入到html页面，如许就不必斟酌模块加载的题目，从而节省了许多的代码，在完成上也更加的简朴。

• 如果是多文件加载的话，须要手动实行文件加载递次，那末实在最好用库来举行依靠治理会好一点。

完成1

(function(global){
    var modules = {};
    var define = function (id,factory) {
        if(!modules[id]){
            modules[id] = {
                id : id,
                factory : factory
            };
        }
    };
    var require = function (id) {
        var module = modules[id];
        if(!module){
            return;
        }

        if(!module.exports){
            module.exports = {};
            module.factory.call(module.exports,require,module.exports,module);
        }

        return module.exports;
    }

    global.define = define;
    global.require = require;
})(this);

运用示例

define('Hello',function(require,exports,module){
    function sayHello() {
        console.log('hello modules');
    }
    module.exports = {
        sayHello : sayHello
    }
});

var Hello = require('Hello');
Hello.sayHello();

完成2

function Module(main,factory){
    var modules = {};
    factory(function(id,factory){
        modules[id] = {
            id : id,
            factory : factory,
        }
    });

    var require = function (id) {
        var module = modules[id];
        if(!module){
            return;
        }

        if(!module.exports){
            module.exports = {};
            module.factory.call(module.exports,require,module.exports,module);
        }
        return module.exports;
    }

    window.require = require;
    return require(main);
}

运用示例

Module('main',function(define){
    define('Hello',function(require,exports,module){
        function sayHello () {
            console.log('hello');
        }
        
        //有用的写法
        module.exports = {
            sayHello : syaHello;
        }

        //或许
        exports.sayHello = sayHello;
    });
    //mian，顺序进口
    define('main',function(require,exports,module){
        var Hello = require('Hello');
        Hello.sayHello();
    });
});

完成3

别的一种作风的模块治理

(function(global) {
    var exports = {}; //存储模块暴露的接口
    var modules = {}; // 
    global.define = function (id,factory) {
        modules[id] = factory;
    }
    global.require = function (id) {
        if(exports[id])return exports[id];
        else return (exports = modules[id]());
    }
})(this);

运用示例

define('Hello',function(require,exports,module){
    function sayHello() {
        console.log('hello modules');
    }
    //暴露的接口
    return {
        sayHello : sayHello
    };
});

var Hello = require('Hello');
Hello.sayHello();

实践

有了浅易的模块化治理以后，在项目中，我们就能够采用如许的构造

— proj

-- html
    -- index.html
-- css
-- js
    -- common
        -- module1.js（通用模块1）
        -- module2.js（通用模块2）
    -- page
        -- index.js（页面逻辑）
    -- lib
        -- moduler.js 模块治理库

合营前端构建东西（wepack，grunt，gulp等等），就能够构建一个挪动端的页面。

总结

现在的框架异常地多，而且越做越巨大。框架一般斟酌通用性，关于字斟句酌的项目来讲，能够有时候也要本身着手去完成一些症结的点，而进修的泉源就是这些牛逼的框架。