教你用最简单的JS代码，写出自己的模块化开发

之前打算利用成熟的requirejs 模块化开发，后面想了，还得另外引入就太麻烦了，因为我的网站只引入我自己的一个base.js 就够了。不想引入其他的

所以就写了一个简单的，异步JS加载。这个写的很粗糙，这里只是提供大家一个思路，你们也可以写出自己的模块化

首先在一个母版本配置一下文件，和文件所依懒的文件

  /**css样式**/

        $Amd.add("csshome", { path: "/Css/index.min.css", type: "css" });
 
        /**js 文件*/
        $Amd.add("comm", { path: "/Scripts/mall/comm.js", requires: ["data"] });
        $Amd.add("data", { path: "/Scripts/mall/data.js" });
        $Amd.add("home", { path: "/Scripts/mall/home.js", requires: ["csshome", "comm"] }); // home.js 依懒index.min.css 文件和comm.js 文件。当加载home会先加载这两个文件。再加载它
        $Amd.add("jquery", { path: "/Scripts/mall/jquery.js" });
// 然后哪个页面需要调用就，例如我首页，我调用

  $Amd("home", function () {
             

文件加载完成，自动执行
           
        });

// 你也可以这样依懒，home除了要依懒最先定义的，还需要依懒jquery

  $Amd("home",["jquery"], function () {
             

文件加载完成，自动执行
           
        });

       

var $Amd= function (name,m,fn)

    {


        var moduls = $Amd.moduls;
        if (typeof m == "function") {
            fn = m;
            m = [];
        }
        if (typeof fn != "function") {
            fn = function () { }
            m = m || [];
        }
        if (!moduls[name])
        {
            return;
        }
        var mfile = moduls[name],
        config = mfile.config,
        requires = $.unique(config.requires.concat(m)), len = requires.length, iscomplete = $Amd.fn.isComplete;
        if(mfile.isload)
        {          
            if (len > 0) {
                each(requires, function (i, name) {
                    $Amd(name, function () {
                        if (iscomplete(requires)) {
                            fn();
                        }
                    });
                });
            } else {
                fn();
            }


        } else if (!mfile.isstart)
        {
            mfile.isstart = true;
            var element,
            scripts = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
            var notifymess = function () {
                var complete = iscomplete(requires);
                if (complete && $Amd.fn[config.type]) {
                    
                    element = $Amd.fn[config.type](config.path);
                    if (config.charset)
                    {
                        element.charset = config.charset;
                    }
  
                    element.onload = element.onreadystatechange = function () {
                        if (!element.readyState || /loaded|complete/.test(element.readyState)) {
                            element.onload = element.onreadystatechange = null;
                            element = undefined;         
                            mfile.isload = true;
                            fn();                              
                        }                                                
                    }                    
                    scripts.insertBefore(element, scripts.firstChild);                                     
                }
            }


            if (len > 0)
            {             
                each(requires, function (i, name) {                  
                    $Amd(name, function () {
                        notifymess();
                    });                  
                });
            }else
            {
                notifymess();
            }
          
        } else {
            setTimeout(function () {
                $Amd(name, m, fn);
            }, 100);
        }
    }
    $Amd.fn = {
        config:{
            type:"js",
            path: "",
            charset:"",
            requires:[]
        },
        "js":function(path)
        {
            var element = document.createElement("script");
            element.setAttribute("type", "text/javascript");
            element.setAttribute("async", true);
            element.setAttribute("src",path);
            return element;
        },
        "css":function(path)
        {
            var element = document.createElement("link");
            element.setAttribute("rel", "stylesheet");
            element.setAttribute("href", path);
            return element;
        },
        isComplete: function (requires)
        {
            var complete = true, moduls=$Amd.moduls,len=requires.length;
            for (var i = 0; i < len; i++) {
                if (!moduls[requires[i]].isload) {
                    complete = false;
                    break;
                }
            }
            return complete;
        }
    };
    $Amd.moduls = {};
    $Amd.add = function (name, config)
    {
        if ($Amd.moduls.hasOwnProperty(name)) {
            return;
        }
        config = extend(true, {}, $Amd.fn.config, config);
        $Amd.moduls[name] = {
            config: config, isload: false,isstart:false
        };
    }