JavaScript模块化:requirejs按需同步加载(一)

前言

nodejs的require看上去和使用上去十分的优雅,所以兴趣之余,也想去尝试实现以下;
线上案例 : http://test1.ecoder.cc/loadSyn
源码:https://github.com/backsen/loadSyn
难登大雅,大神勿喷

准备开始

千里之行始于足下,一切都得从准备工作开始,那就是创建一个空文件夹:loadSyn

mkdir loadSyn

选择一款自己熟悉的编辑器

正式开始

在根目录下创建loader.js文件

(function(window){
    
    
    var allModules = window.allModules =  {},
    
    loadScript  = function(src , module){
        
        var ajax = new XMLHttpRequest;
                
        try{
            
            ajax.onload = function(){
            
                if(ajax.status == 200){
                    
                    var importsArrs = ajax.responseText.match(/imports\((.*)\)/gm) || [];
                    
                    var devs = [];
                    
                    for(var i = 0 , len = importsArrs.length; i < len; i++){
                        
                        devs.push(importsArrs[i].replace(/imports\((.*)\)/g , "$1"));
                        
                    }
                    
                    module['devs'] = devs;
                    
                    var currentPath = module.src;
                    
                    var scriptCode = ajax.responseText.replace(/imports\((.*)\)/gm , `imports($1 , currentPath)`);
                    
                    
                    var callBack = new Function("module" , "exports" , "imports" , "currentPath" ,`
                        imports.route = module.src;
                        ${scriptCode};
                        module = module;
                        module.exports = !exports.isExports ? exports : module.exports;
                        return module;
                    `);
                                        
                    module = callBack(module , {isExports : true} , imports , currentPath);
                    
                    delete callBack;
                    
                    module.loaded = true;   
                    
                }else if(ajax.status == 404 && src.indexOf("index.js") == -1){
                                        
                    src = src.substr(0 , src.lastIndexOf(".js")) + "/index.js";
                    
                    module['src'] = src;
                    
                    module.exports = loadScript(src, module);
                                        
                }else{
                    
                    module.exports = `${ajax.status} -- ${ajax.statusText}`;
                    
                }
                
                
            }
            
            ajax.onerror = function(){
                
                return false;
                
            }
            
            ajax.open("GET" , src , false);
            
            ajax.send(null);
            
            return module.exports;
    
            
            
        }catch(e){
            
            console.error(e);
            
        }
    
        return module.exports;
        
    },
    
    src = "/",
    
    getSrc = function(path , src , after){
        
        
        var rootPath = location.origin + location.pathname.substr(0 , location.pathname.lastIndexOf("/")) + "/" ,
            currentPath = path ? path.substr(0 , path.lastIndexOf("/")) + "/" : rootPath, url = currentPath;
        
        
        if( /^\.\//.test(src)){
            
            url = currentPath;
            src = src.replace("./" , "");
            
        }else if(/^(http|https):\/\//.test(src)){
            
            url = "";
            
        }else if(/^\.\.\//.test(src)){
            
            url = currentPath;
            
        }else{
            
            url = rootPath;
                        
            var paths = loader.config.paths || {} , 
            
            isModule = true;
        
            for(var name in paths){
                
                var srcPath = src.split("/");
                
                if(srcPath[0] == name){
                    
                    isModule = false;
                    
                    if(srcPath[0] != paths[name]){
                        
                        srcPath[0] = paths[name];
                    
                        src = srcPath.join("/");
                        
                    }
                    
                    
                }
                
                
            }
            
            if(isModule && src != "loader.config.js") src = "modules/" + src;

            
        }
        
        url += src;
                
        
        if(url[url.length - 1] == "/") url += "index.js";
        
        if((!after || after == "js") && url.lastIndexOf(".js") == -1) url += "." + after || ".js";
                
        
        return url;
        
    },
    
    imports = function(moduleUrl , currentPath){
        
        
        var type = getFileType(moduleUrl) || "js";
        
        var src = getSrc(currentPath || imports.route , moduleUrl , type);
        
        if(allModules[src] && allModules[src]['loaded']){
            return allModules[src].exports;
        }
        
        var module = allModules[src] = {
            loaded : false,
            name : moduleUrl,
            src : src,
            exports :{},

        }
                
        var myLoaders = loader.config.loaders;
        
        if(myLoaders && myLoaders[type] && type != "js"){
            
            return imports(myLoaders[type] + "/")(module.src, module);
            
        }else{
            
            return loadScript(module.src, module);
        }
        
            
    },
    
    getFileType = function(url){
        
        var type = "" , types = loader.config['fileTypes'] || ["js" , "json" , "css" , "html"];
        
        for(var i = 0 , len = types.length; i <len; i++){
            
            if(new RegExp("\." + types[i] + "$" , "gim").test(url)){
                
                type = types[i];
                
            }
            
        }
        
        return type;        
        
    },
        
    bootloader = function(){
            
        var config = imports("loader.config.js");
        
        
        loader.loaders = {};
        
        for(var name in config){
            
            loader.config[name] = config[name];
            
            
        }
        
        loader.config['loaders'] = loader.config['loaders'] || {};
        
        for(var name in loader.config.loaders){
            loader.loaders[name] = imports(loader.config.loaders[name] + "/");
        }           
        
        
        if(config['main']){
            imports.route = "";
            imports(config.main);
        }
        
                
    },
    
    loader = {
        
        config : {
            loaders : {
                "json" : "json-loader",
                "js" : "js-loader"
            },
            fileTypes : ["js" , "json" , "css" , "html"]
        },
        
        loaders : {},
        
        bootloader : bootloader     
    };
    
    imports.route = "/";
    
    loader.bootloader();
    
    window.imports = imports;
    
    
})(window)

在根目录下创建index.html文件

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

</head>
<body>
    <div id = "main">
                
        <app-root></app-root>
        
        
    </div>
    

    
    
    <script src="loader.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

在根目录下创建loader.config.js

exports = {
    
    main : "./src/main.js",
    
    paths : {
        
        "datas" : "/datas",
        "assets" : "/src/assets"
        
    },
    
    fileTypes : ["js" , "json" , "css" , "html" , "jpg" , "png" , "gif"],
    
    loaders : {
        
        "json" : "json-loader",
        "js" : "js-loader",
        "html" : "url-loader",
        "css" : "url-loader"    ,
        "jpg" : "img-loader",
        "png" : "img-loader",
        "gif" : "img-loader"
    }
    
}

在根目录下创建src目录,并且在src目录下创建一个main.js

console.log('holle wolrd')

现在的loadSyn目录下应该会像这样:

目录

本章结束

这一章就这么多了,可以去看github上的源码,下一章会说说loaders

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 10,932评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,604评论 7 110
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,316评论 2 71
  • 1. 新建一个文件夹,命名为 webpack-cli , webpack-cli 就是你的项目名,项目名建议使用小...
    鲁大师666阅读 1,395评论 1 3
  • 最近微信朋友圈内被同一个问题霸屏了,那就是快过年了,要回家了,可是我除了想回到娘家,哪里都不想去,包括自己现在的家...
    小左十三阅读 302评论 0 1