资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/简单实现 JavaScript 模块加载

简单实现 JavaScript 模块加载

tigerZH / 1919人阅读

摘要：语言官方未实现命名空间，我们定义一个函数以实现命名空间。函数的使用如我们可以这样实现对象保存着所有已加载的模块每一个模块实例都有属性作为时查找的标识符，属性作为对外暴露的对象，属性表示是否加载完。将函数传入，来支持模块内引用其他模块。

JavaScript语言官方未实现命名空间，我们定义一个define函数以实现命名空间。define函数的使用如：

</>复制代码 
  1. define(function(exports, module, require) {
  2.     const $ = require("http://path/to/defined-jquery");
  3.     $(function(){
  4.         // dom ready!!!
  5.     });
  6. });

我们可以这样实现：

</>复制代码 
  1. (function(global) {
  2.     "use strict";
  3.     var errMsg = Math.random().toString(32).substr(2);
  4.     // rootModule 对象保存着所有已加载的模块
  5.     var rootModule = {};
  6.     // 每一个模块实例都有id属性作为require时查找的标识符，
  7.     // exports属性作为对外暴露的对象，loaded属性表示是否加载完。
  8.     function ModuleCtor(id) {
  9.         if (!this || this.__proto__ !== ModuleCtor.prototype) {
  10.             return new ModuleCtor(id);
  11.         }
  12.         this.id = id;
  13.         this.exports = {};
  14.         this.loaded = !1;
  15.     }
  16.     function define(id, fn) {
  17.         // 手动赋值模块id，兼容一个script里有多个define。
  18.         if (typeof id === "function") {
  19.             fn = id;
  20.             id = document.currentScript
  21.                 ? document.currentScript.src
  22.                 : Math.random()
  23.                       .toString(32)
  24.                       .substr(2);
  25.         }
  26.         if (typeof id !== "string") {
  27.             id = "" + id;
  28.         }
  29.         var module = ModuleCtor(id);
  30.         exec();
  31.         function __require__(src) {
  32.             // 如果依赖已经加载过直接返回module.exports，
  33.             // 如果没有加载过则通过jsonp加载，并且抛出一个异常来打断原函数执行，在子模块加载完毕后重新执行原函数模拟异步代码阻塞同步执行。
  34.             if (rootModule[src] && rootModule[src].__proto__ === ModuleCtor.prototype) {
  35.                 return rootModule[src].exports;
  36.             }
  37.             loadScript(src, function() {
  38.                 exec();
  39.             });
  40.             throw new Error(errMsg);
  41.         }
  42.         function exec() {
  43.             // 将__require__函数传入fn，来支持模块内引用其他模块。
  44.             try {
  45.                 fn.call(module.exports, module.exports, module, __require__);
  46.                 module.loaded = !0;
  47.                 rootModule[id] = module;
  48.             } catch (err) {
  49.                 if (err.message !== errMsg) {
  50.                     throw err;
  51.                 }
  52.             }
  53.         }
  54.     }
  55.     function loadScript(src, callback) {
  56.         var script = document.createElement("script");
  57.         script.src = src;
  58.         script.onload = function() {
  59.             callback && callback(src);
  60.         };
  61.         document.body.appendChild(script);
  62.         return script;
  63.     }
  64.     // 暴露define给全局
  65.     global.define = define;
  66. })(window);

这个模块加载的实现有很多不足，如果模块内有很多require时会被执行很多次，所以最好子模块内都是函数不要有自己的状态。seajs的依赖解决方法是，调用函数的toString方法来获得函数字面量，然后在parse出模块依赖，先加载依赖，每一个依赖加载完成后都emit一个事件，当所有依赖都加载完毕后，才执行factory函数，factory函数只执行一次，但是模块加载的顺序和require的顺序基本没有关系（并发请求，谁都有可能先到）。

======= 一本正经的分割线 ======
顺便吐槽一下seajs，由于某种原因，我再8102年见到了seajs而我在3000年前没用过。文档始终没有交代require("caonima");是如何打断函数执行的。看了源码发现是用了Function.prototype.toString方法，然后分析依赖并发加载（require函数是没有顺序之分的）。看源码前，我自己为了模拟该行为，通过抛出异常再反复的重新执行也实现了一个文件加载，而且我这个更贱的货还是真的同步引入依赖，更加cmd一些。

附 Webpack 模块加载原理：

</>复制代码 
  1. (function(modulesArr) {
  2.     var rootModule = {};
  3.     function __require__(id) {
  4.         if (rootModule[id]) {
  5.             return rootModule[id].exports;
  6.         }
  7.         var currentModule = modulesArr[id];
  8.         var module = {
  9.             id,
  10.             exports: {}
  11.         };
  12.         currentModule.call(module.exports, module.exports, module, __require__);
  13.         currentModule[id] = module;
  14.         return module.exports;
  15.     }
  16.     return __require__(0);
  17. })([
  18.     function(exports, module, require) {
  19.         var m1 = require(1);
  20.         console.log(m1);
  21.     },
  22.     function(exports, module, require) {
  23.         exports.msg = "Hello World";
  24.         var m2 = require(2);
  25.         m2();
  26.     },
  27.     function(exports, module, require) {
  28.         module.exports = function() {
  29.             var str = "Hello World";
  30.             console.log(str);
  31.             return str;
  32.         };
  33.     }
  34. ]);
云服务器 GPU云服务器 未能加载模块 内核模块加载 python加载模块 amd模块加载

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

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

相关文章

  • 【Node】前后端模块规范与模块加载原理

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

    jsyzchen 评论0 收藏0

  • 前端性能优化（三）——传统 JavaScript 优化的误区

    摘要：二模块化误区加快加载和执行的速度，一直是前端优化的一个热点。结果文件减少，也达到了预期的效果。避免不必要的延迟。最后再根据文件的功能类型，来决定是放在页面的头部还是尾部。 注：本文是纯技术探讨文，无图无笑点，希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了，某种程度上讲，同等水平前端的工资都要比后端高上不少，而圈内的另一项共识则是——网页是公司的脸面！ 几年前，谷歌的一项...

    UsherChen 评论0 收藏0

  • JavaScript模块化编程探索

    摘要：模块化编程，已经成为一个迫切的需求。随着网站功能逐渐丰富，网页中的也变得越来越复杂和臃肿，原有通过标签来导入一个个的文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作模块复用单元测试等等一系列复杂的需求。 随着网站逐渐变成互联网应用程序，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发...

    jayzou 评论0 收藏0

  • Node.js随手笔记（一）：node简介与模块系统

    摘要：模块系统为了让的文件可以相互调用，提供了一个简单的模块系统。但是，没有模块系统。包管理简称，是随同一起安装的包管理工具。输入命令，根据提示配置包的相关信息，生成相应的。以上所描述的模块载入机制均定义在模块之中。 Node.js简介 首先从名字说起，网上查阅资料的时候会发现关于node的写法五花八门，到底哪一种写法最标准呢？遵循官方网站的说法，一直将项目称之为Node或者Node.js。...

    TNFE 评论0 收藏0

  • 浅谈 JavaScript 模块化编程

    摘要：与在模块化编程的世界中，有两个规范不得不提，它们分别是和。所有依赖于某个模块的代码全部移到模块加载语句的回调函数中去。的语句接受两个参数在回调函数中，可以通过变量引用模块。回调函数的返回值就是当前对象的导出值。 JavaScript本身不是一种模块化语言，设计者在创造JavaScript之初应该也没有想到这么一个脚本语言的作用领域会越来越大。以前一个页面的JS代码再多也不会多到哪儿去，...

    wdzgege 评论0 收藏0

发表评论

登陆后可评论

0条评论

tigerZH

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<