js与AMD模块加载

目的:

了解AMD规范与CMD规范,写一个模块加载器雏形。

基本概念:

AMD是异步模块定义规范,而CMD是通用模块定义规范。其他的还有CommonJS Modules规范。

对于具体的规范,可以参考:

https://github.com/amdjs/amdjs-api/wiki/AMD AMD规范

https://github.com/seajs/seajs/issues/242 CMD规范

http://www.zhihu.com/question/20351507/answer/14859415 玉伯对于AMD和CMD规范的回答

无论是哪一种规范,都是为了解决前端模块依赖与加载的问题。

与后台语言不同的地方是,js并无法做到阻塞的模块/文件加载,这是我们需要这些模块加载、依赖管理工具的重要原因之一。

需求分析:

根据规范,我们需要实现require和define两个接口,define接口用于定义模块(并加载依赖),require接口用来加载模块并回调。

我们将实现简化的接口:

define
    define(deps, definition):依赖数组 与 模块定义函数
    define(definition):模块定义函数(模块无依赖)

require
    require(deps, callback):依赖数组 与 完成回调
    require(moduleId):传入模块id,获得模块实例(模块需提前通过define或require完成加载)

接下来我们进一步分析下任务:

代码(模块)状态:
未加载 -> 加载中 -> 加载完毕,等待依赖解决 -> 依赖完成,模块加载完成 ( -> 初次使用,执行模块定义生成模块实例)
非模块代码无依赖,加载后直接跳到完成状态,并且无模块定义无法生成模块实例

模块的加载时间线:
开始加载,添加加载完成的回调 -> 加载完成,执行define函数,注册模块依赖与模块定义 -> 执行代码加载完成回调(从这里拿到代码的url,或者说是模块ID),解析模块

我们需要在几个情况下分析依赖是否满足:
代码加载完成时以及模块依赖满足,状态为完成时

依赖满足的条件:
所有依赖的模块状态为完成

  

// define回调传入依赖模块 // 压缩问题

// function.toString依赖分析

// browserify, webpack

// es6模块,观察会阻塞式加载吗?

时间: 2024-11-24 16:39:20

js与AMD模块加载的相关文章

Sea.js 是一个模块加载器

1 模块定义define define(function(require,exports,module){ //require 引入需要的模块如jquery等 //var $ = require('./jquery'); //exports可以把方法或属性暴露给外部 exports.name = 'hi'; exports.hi = function(){ alert('hello'); } //module提供了模块信息 }); 2 使用定义好的模块seajs.use <!doctype ht

JavaScript AMD 模块加载器原理与实现

关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.

require.js模块加载js

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升. requirejs能带来什么好处 官方对requirejs的描述: RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it

模块加载规范对比

一.commonJS模块加载规范 CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作.由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用.浏览器端一般采用AMD模块加载方式或者ES6的模块加载标准. 模块导出方法(为防止混淆,建议一律采用module.exports而非exports): 模块导入方法:利用require //文件a.js module.exports

自研模块加载器(一) 模块系统概述与自定义模块规范书写规定

模块系统概述 CommonJs/AMD/CMD/ES6 Modules 什么是模块化? 模块化就是把系统分离成独立的功能的方法,需要什么功能,就加载什么功能 当一个系统越来越复杂时候,我们会遇到这些问题 1. 命名冲突 2. 文件依赖 使用模块化开发可以避免以上问题,并提升开发效率 1. 可维护性 2. 可复用性 在生产角度,模块化是一种生产方式,这种生产方式效率高,维护成本低. 模块化开发演变 1. 全局函数 早期开发中,将重复的代码封装成函数,将多个函数放在一个文件中. 缺点: 污染全局变量

*模块加载器、Node.js、NPM、Webpack基础汇总

--------------------------------NODE应用中的Node.js command prompt和Node.js--------------------------------------- ·安装node.js后,有两个可启动应用:黑色的Node.js command prompt和绿色的Node.js ·黑色的Node.js command prompt就和cmd DOS控制台一样,输入node -v后,若出现node的版本号,则表示当前node环境安装OK. ·

JS模块加载器加载原理是怎么样的?

路人一: 原理一:id即路径 原则.通常我们的入口是这样的: require( [ 'a', 'b' ], callback ) .这里的 'a'.'b' 都是 ModuleId.通过 id 和路径的对应原则,加载器才能知道需要加载的 js 的路径.在这个例子里,就是 baseUrl + 'a.js' 和 baseUrl + 'b.js'. 但 id 和 path 的对应关系并不是永远那么简单,比如在 AMD 规范里就可以通过配置 Paths 来给特定的 id 指配 path. 原理二:crea

如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 1 <script src="1.js"></script> 2 <script src="2.js"></script> 3 <script src="3.js">

关于前端JS模块加载器实现的一些细节

最近工作需要,实现一个特定环境的模块加载方案,实现过程中有一些技术细节不解,便参考 了一些项目的api设计约定与实现,记录下来备忘. 本文不探讨为什么实现模块化,以及模块化相关的规范,直接考虑一些技术实现原理. 1.简单实现模块化 一开始我想如果我的代码只有一个文件,那几行不就实现了吗 main.js var modules = {} var define = function(id,factory){ moudles[id] = factory } var require = function