展开

关键词

动手实现一个AMD模块加载器(二)

在上一篇文章中,我们已经基本完成了模块加载器的基本功能,接下来来完成一下路径解析的问题。 我们再优化一下,我们完全可以在define中将name替换为一个绝对路径,同时在主模块加载依赖的时候,将依赖替换为绝对路径即可,因此我们可以在定义模块的时候就将这个这个路径替换好。 不过这个时候我们需要明白的是,在定义模块的时候是一个类似单词,而声明依赖的时候则有可能含有路径,如何在模块声明的时候正确解析路径呢? 很明显我们可以使用一个变量来做这个事情,这个变量存储着所有模块名和依赖这个模块时的声明。 那么我们就应该在use方法加载模块的时候将这些变量名添加到这个变量名之下,之后再define中进行转化,那么最后我们的整个代码如下: (function(root){ var modMap = {}

21720

动手实现一个AMD模块加载器(一)

在Node.js中,process对象是一个全局对象,可以直接在Node.js的REPL环境中访问该对象。该process对象有用的主要属性有

39920
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    动手实现一个AMD模块加载器(三)

    在上一篇文章中,我们的AMD模块加载器基本已经能够使用了,但是还不够,因为我们没有允许匿名模块,以及没有依赖等情况。 实际上在amd的规范中规定的就是define函数的前两个参数是可选的,当没有id(模块名)的时候也就意味着不会有模块依赖于这个模块。 ,是否为匿名模块,这是一个比较简单的工作,修改define函数如下: function define(name, deps, callback) { if(! 此时我们的一个简单的amd模块加载器就这样写完了,删除console增加注释就可以比较好的使用了,最后整理一下代码如下: (function(root){ var modMap = {}; var arguments, 0)); }) }); } else if(modMap[name].status === 'loading') { // 模块正在加载

    17620

    模块化-CommonJs、AMD、CMD

    然而,这并不适合在浏览器环境,同步意味着阻塞加载,浏览器资源是异步加载的,鉴于浏览器的情况,为了解决上述同步加载问题,实现异步加载依赖模块,因此有了AMD、CMD解决方案。 AMD (Asynchronous Module Definition) AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。AMD规范是异步加载模块,允许指定回调函数。 AMD的异步加载解决了阻塞加载、性能问题,模块之间的依赖关系也能清楚的显示出来。 总结 CommonJS 模块输出的是一个值的拷贝,CommonJS 模块是运行时加载,CommonJS规范主要用于服务端编程,加载模块是同步的,同步意味着阻塞加载,浏览器资源是异步加载的,因此有了AMD AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。AMD规范在浏览器环境中异步加载模块,而且可以并行加载多个模块

    9830

    Javascript AMD模块化规范-备用

    AMD是”Asynchronous Module Definition”的缩写,意思是”异步模块定义”。 模块定义 define(id?, dependencies? AMD规范兼容Modules/Wrappings。 require( "beta" ).verb(); } }); 模块加载 require([module], callback) AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块,所有模块加载完成之后的回调函数。 其中: [module]:是一个数组,里面的成员就是要加载模块; callback:是模块加载完成之后的回调函数。

    2910

    Nodejs模块加载流程

    12210

    Python 重新加载模块

    简述 在进行模块化编程时,经常会遇到这样一种场景: 编写了一个 Python 模块,并用 import my_module 的形式进行导入。 模块仅被导入一次 出于效率原因(导入必须找到文件,将其编译成字节码,并且运行代码),Python shell 在每次会话中,只对每个模块导入一次。 也就是说,模块仅被导入了一次。 重新加载模块 倘若,更改了已经在 Python shell 中导入的模块,然后重新导入该模块,Python 会认为“我已经导入了该模块,不需要再次读取该文件”,所以更改将无效。 对于更复杂的情况,重新加载被编辑的模块也需要重新加载其依赖/导入的模块(因为它们必须作为被编辑模块初始化的一部分进行初始化),所以 IPython 的 autoreload 扩展很有用。

    1.1K10

    JavaScript模块循环加载

    这意味着,模块加载机制必须考虑”循环加载”的情况。 本文介绍JavaScript语言如何处理”循环加载”。目前,最常见的两种模块格式CommonJS和ES6,处理方法是不一样的,返回的结果也不一样。 一、CommonJS模块加载原理 介绍ES6如何处理”循环加载”之前,先介绍目前最流行的CommonJS模块格式的加载原理。 CommonJS的一个模块,就是一个脚本文件。 二、CommonJS模块的循环加载 CommonJS模块的重要特性是加载时执行,即脚本代码在require的时候,就会全部执行。 exports.done = true; 三、ES6模块的循环加载 ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时,不会去执行模块,而是只生成一个引用。 $ babel-node m2.js bar baz 上面代码表明,ES6模块不会缓存运行结果,而是动态地去被加载模块取值,以及变量总是绑定其所在的模块

    22340

    模块化之AMD、CMD、UMD、commonJS

    AMD(Asynchronous Module Definition): CommonJS出来之后,由于是同步,浏览器并不适合,我们不可能等所有都加载完成才显示页面。于是AMD规范就出来了。 AMD是requireJS推广过程的规范产出,支持异步,所以AMD也是通过require加载模块目前主要有两个Javascript库实现了AMD规范:require.js和curl.js。 AMD异步加载,commonJS同步加载,而UMD就是判断环境,有nodejs模块(require)就使用commonJS,有AMD模块(define)就使用AMD。 最后总结一下: CommonJS:同步加载,适用于服务器,node、webpack使用; AMD:异步加载,浏览器使用,实现的requireJS想兼容服务器和浏览器,预加载。 CMD:异步加载,专注于浏览器,实现的是seaJS,玉伯大神提出的,使用时加载。 UMD:AMD和commonJS的结合,可以服务端使用也可以浏览器使用。

    28940

    Javascript模块化编程(二):AMD规范

    考虑到Javascript模块现在还没有官方规范,这一点就更重要了。 目前,通行的Javascript模块规范共有两种:CommonJS和AMD。我主要介绍AMD,但是要先从CommonJS讲起。 node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。    因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。 十、AMD AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块模块加载不影响它后面语句的运行。 AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:   require([module], callback); 第一个参数[module],是一个数组,里面的成员就是要加载模块

    48260

    Javascript模块化编程(二):AMD规范

    考虑到Javascript模块现在还没有官方规范,这一点就更重要了。 目前,通行的Javascript模块规范共有两种:CommonJS和AMD。 node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。    因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。 十、AMD AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块模块加载不影响它后面语句的运行。 AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:   require([module], callback); 第一个参数[module],是一个数组,里面的成员就是要加载模块

    55980

    详解Node模块加载机制

    Node.js 中,模块加载过程分为 5 步: ? 路径解析(Resolution):根据模块标识找出对应模块(入口)文件的绝对路径 加载(Loading):如果是 JSON 或 JS 文件,就把文件内容读入内存。 Module实例,模块文件执行完后,该实例仍然保留,模块导出的东西依附于Module实例存在 模块加载的所有工作都是由module原生模块来完成的,包括Module. _load()负责加载模块、管理缓存,具体如下: Module. 知道了模块加载机制,在一些需要扩展篡改加载逻辑的场景很有用,比如用来实现虚拟模块模块别名等 虚拟模块 比如,VS Code 插件通过require('vscode')来访问插件 API: // The

    54041

    Webpack 加载模块的规则

    Webpack 支持 CommonJS 规范 定义的加载规则。 加载规则 路径以 . 或 .. 打头,加载相对路径的模块。. 表示当前目录,.. 表示上层目录。 require('. /foo.js') 将加载当前文件所在目录的 foo.js 的文件。 路径以 / 打头,加载绝对路径的模块。 如 require('/xx/foo.js') 将加载文件路径是 /xx/foo.js 的文件。不建议用这种模式来加载模块。 路径不以上面的内容打头。则会这样查找: Node.js 的原生模块。 (注:在浏览器环境中不存在这些模块。) 在 Webpack 中的配置的目录或模块的别名。 当前文件目录的 node_modules。 上层目录的 node_modules。 /config'),会尝试加载 config.js, config.vue, config.json。

    42430

    node模块加载层级优化

    模块加载痛点 大家也或多或少的了解node模块加载机制,最为粗浅的表述就是依次从当前目录向上级查询node_modules目录,若发现依赖则加载。 直接引用模块名 直接引用模块名,说到底就是直接引用node_modules目录中的依赖,类似引用node默认加载的那些模块,如http,event模块。 那么,在猜想的基础上我们可以尝试修改该数组下可否影响本模块加载依赖的顺序,如果成功自然美丽,如若不成功需寻找更为恰当的解决方案。 深入源码探究 笔者摘出了与模块(依赖)加载相关的代码: // 初始化全局的依赖加载路径 Module._initPaths = function() { ... Module.globalPaths = modulePaths.slice(0); }; // @params: request为加载模块名 // @params: parent为当前模块(即加载依赖的模块

    60180

    读懂CommonJS的模块加载

    .js 解析为JavaScript 文本文件 .json解析JSON对象 .node解析为二进制插件模块 首次加载后的模块会缓存在require.cache之中,所以多次加载require,得到的对象是同一个 而ES6的模块加载,已经有浏览器支持了这个特性,因此ES6可以用于浏览器,如果遇到不支持ES6语法的浏览器,可以选择转译成ES5。 nodejs是CommonJS的亲儿子,所以有些ES6的特性并不支持,比如ES6对于模块的关键字import和export,如果大家在nodejs环境下运行,就等着大红的报错吧~** 加载差异 除了语法上的差异 ,而且这个标签默认是异步加载,也就是页面全部加载完成之后再执行,没有这个标签的话代码不然无法运行哦。 导入的对象可以随意修改,相当于只是导入模块中的一个副本。 如果想要深入研究,大家可以参考下阮老师的ES6入门——Module 的加载实现。

    25430

    JS模块加载框架 SeaJS

    SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制,兼容所有主流浏览器 SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载 ,让开发可以专注于代码本身的逻辑 上手示例 html中加载初始化模块init.js,init 中调用 module1 模块,同时 module1 模块调用 module2 模块 ? 模块的定义 SeaJS中使用“define”函数定义一个模块 define(id?, deps? ,他有三个参数: 1)require 模块加载函数,用于记载依赖模块 2)exports 接口点,将数据或方法定义在其上则将其暴露给外部调用 3)module 模块的元数据,存储了模块的元信息(module.id 模块的ID、module.dependencies 此模块依赖的所有模块的ID列表、module.exports 与exports指向同一个对象) 模块的寻址 (1)绝对地址——给出js文件的绝对路径

    71950

    JavaScript 模块的循环加载

    这意味着,模块加载机制必须考虑"循环加载"的情况。 本文介绍JavaScript语言如何处理"循环加载"。目前,最常见的两种模块格式CommonJS和ES6,处理方法是不一样的,返回的结果也不一样。 一、CommonJS模块加载原理 介绍ES6如何处理"循环加载"之前,先介绍目前最流行的CommonJS模块格式的加载原理。 CommonJS的一个模块,就是一个脚本文件。 二、CommonJS模块的循环加载 CommonJS模块的重要特性是加载时执行,即脚本代码在require的时候,就会全部执行。 exports.done = true; 三、ES6模块的循环加载 ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时,不会去执行模块,而是只生成一个引用。 $ babel-node m2.js bar baz 上面代码表明,ES6模块不会缓存运行结果,而是动态地去被加载模块取值,以及变量总是绑定其所在的模块

    40950

    相关产品

    • 弹性容器服务 EKS

      弹性容器服务 EKS

      弹性容器服务(EKS)是腾讯云容器服务推出的无须用户购买节点即可部署工作负载的服务模式。弹性容器服务 EKS 兼容原生 Kubernetes,支持使用原生方式购买、管理资源,并扩展支持腾讯云的存储、网络等产品,开箱即用。弹性容器服务 EKS 按容器真实使用的资源量计费,腾讯云保证用户容器的安全隔离。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券