前言

之前通过一篇文章简单介绍了avalon这个前端框架，作为这款框架的使用者，在了解过它所带来的好处之后，那必然会对它是如何实现的产生好奇感。那这次就一起来研究下它的代码，也通过这次机会来更深入了解它本身的实现方式和设计思想。

好，我们进入主题，以官方2.16为分析对象。

打开avalon之后，首先我们看到avalon的源码，开始是这样着的：

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["avalon"] = factory();
    else
        root["avalon"] = factory();
})(this,function(){})

这里必须了解一种基本结构-自调用匿名函数，什么叫自调用匿名函数呢？ 在第一个括号内创建一个匿名函数，在第二个括号内执行，也可以看做在加载完之后立即调用，这样可以减少全局变量的污染，只暴露出avalon这个变量给外界，尽量避免变量冲突。

其中返回avalon这个对象也加入对CommonJs Modules 和AMD的自适应，this在这里充当一个全局对象的作用。

让我们接下来看看这一段代码：

function() {
    return (function(modules) { // webpackBootstrap
        // The module cache
        var installedModules = {};

        // The require function
        function __webpack_require__(moduleId) {

            // Check if module is in cache
            if(installedModules[moduleId])
                return installedModules[moduleId].exports;

            // Create a new module (and put it into the cache)
            var module = installedModules[moduleId] = {
                exports: {},
                id: moduleId,
                loaded: false
            };

            // Execute the module function
            modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

            // Flag the module as loaded
            module.loaded = true;

            // Return the exports of the module
            return module.exports;
        }


        // expose the modules object (__webpack_modules__)
        __webpack_require__.m = modules;

        // expose the module cache
        __webpack_require__.c = installedModules;

        // __webpack_public_path__
        __webpack_require__.p = "";

        // Load entry module and return exports
        return __webpack_require__(0);
    })(modules)
｝

这段代码是紧跟在this之后，并作为一个工厂方法生产avalon对象，这里又使用到了一个匿名函数，avalon各个模块则作为匿名函数的参数传入,匿名函数中，有两个变量 installedMoudules,webpackrequire_。

installedMoudules作为一个加载记录，作者有这样一个很好的描述(cache),作为一个加载缓存，可避免多次加载。

webpackrequire_ 则作为一个加载器，负责加载各个模块的内容。

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

这一部分使用了call，限定了模块的作用域，在代码段中我们可以看出module.exports都是为空对象，目的是为了建立一个完全空白的环境，让各个模块不受其他外部环境的影响。

好了，这一章就先写到这里，下一篇将会继续分析avalon的各个模块的实现。

原创文章，才疏学浅，文中若有不正之处，万望告知。