commonJs原理解析

Flands 发布于2019-08-23 11:56 / 1154人阅读

摘要：同步加载先使用注册文件路径和对应方法之间的映射关系保存在中再使用方法，通过传入的路径去中取出对应的方法使用获取方法的同时，会触发依赖模块中的方法，这样就实现了模块的加载异步加载异步加载异步加载的逻辑匜不复杂，在同步加载的

同步加载

先使用require.register注册文件路径和对应方法之间的映射关系保存在require.modules中

再使用require方法，通过传入的路径去require.modules中取出对应的方法

使用require获取方法的同时，会触发依赖模块中的require方法，这样就实现了模块的加载

index.html





    
    
    
    Document

commonJS.js

function require(path) {
    let mod = require.modules[path];
    mod.exports = {};
    mod.call(window, require, mod, mod.exports);
    return mod.exports;
}

require.modules = {};

require.register = function (path, fn) {
    // 异步加载
    require.modules[path] = fn;
}

hello.js、name.js

//hello.js
require.register("hello.js", function (require, module, exports) {
    let name = require("name.js")
    exports.hello_name = "hello " + name;
    exports.hello_world = "hello world";
})
//name.js
require.register("name.js", function (require, module, exports) {
    module.exports = "shimingw"
})

异步加载

异步加载的逻辑匜不复杂，在同步加载的基础上增加require.ensure方法，预先在modules对象上挂在onload方法

修改require.register方法，增加异步模块注册逻辑，在异步模块注册完成后触发onload，以达到模块异步加载的需求

commonJS_async.js

function require(path) {
    let mod = require.modules[path].method;
    mod.exports = {};
    mod.call(window, require, mod, mod.exports);
    return mod.exports;
}

require.modules = {};

require.register = function (path, fn) {
    // 异步加载
    if (require.modules[path] && require.modules[path].status === "loading") {
        // 异步加载成功
        require.modules[path].status = "loaded"
        require.modules[path].method = fn;
        require.modules[path].onload(require(path));
    } else {
        require.modules[path] = {
            moduleName: path, // 模块Id
            status: "loaded",
            onload: null,
            method: fn
        };
    }
}

require.ensure = function (path, cb) {
    require.modules[path] = {
        moduleName: path, // 模块Id
        status: "loading",
        onload: cb,
        method: null
    };
    var head = document.querySelector("head")
    var script = document.createElement("script");
    script.async = true;
    script.src = path;
    setTimeout(() => {
        head.appendChild(script);
    },5000 );
}

GPU服务器海外云主机 CommonJS 运行原理解析 cdn解析原理 webrtc原理解析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97714.html

最全的前端模块化方案

摘要：模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。顺手写一个省略省略实现此时的对应的形式解析省略执行兼容，模块化语法。模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容 CommonJS AMD 及核心原理实现 CMD 及核心原理实现 UMD 及源码解析 ES6...

antz 2019-08-23 17:07 评论0 收藏0
【Node】前后端模块规范与模块加载原理

摘要：例如指定一些依赖到模块中实现规范的模块化，感兴趣的可以查看的文档。 CommonJS 定义了 module、exports 和 require 模块规范，Node.js 为了实现这个简单的标准，从底层 C/C++ 内建模块到 JavaScript 核心模块，从路径分析、文件定位到编译执行，经历了一系列复杂的过程。简单的了解 Node 模块的原理，有利于我们重新认识基于 Node 搭建的...

jsyzchen 2019-08-23 15:43 评论0 收藏0
解析 Webpack中import、require、按需加载的执行过程

摘要：但是浏览器是不识别这个关键词的所以会对的代码进行解释首先给设定导出的值如果是会直接赋值给如果是其他形式则给的导出的设定一个该的返回值就是导出的结果而对于来说整个执行过程其实过程和是一样的。最近由于一篇分享手淘过年项目中采用到的前端技术的影响,重新研究了一下项目中CSS的架构.本来打算写一篇文章,但是写到一半突然发现自己像在写文档介绍一样,所以后来就放弃了。但是觉得过程中研究的 Web...

caozhijian 2019-08-22 15:14 评论0 收藏0
新鲜出炉的8月前端面试题

摘要：前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题主要考察前端技基础是否扎实，是否能够将前端知识体系串联。前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方式，这类问题没有标准答案。基础题题目的答...

qingshanli1988 2019-08-23 10:47 评论0 收藏0
JavaScript模块化发展

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后前置依赖，这个回调函数才会运行。如果将前面的代码改写成形式，就是下面这样定义了一个文件，该文件依赖模块，当模块加载完毕之后执行回调函数，这里并没有暴露任何变量。模块化是我们日常开发都要用到的基本技能，使用简单且方便，但是很少人能说出来但是的原因及发展过程。现在通过对比不同时期的js的发展，将JavaScript模...

mengbo 2019-08-22 18:05 评论0 收藏0