AMD规范:简单而优雅的动态载入JavaScript代码

React-AMD标准、动态加载资源的Web APP如何做服务器端渲染 背景介绍 需要做服务器端渲染的app是:可以点击添加组件,保存以后生成一个独立的web app。就是一个生成web app的web app。因为不一定每个组件都被添加到用户创建的web app中,所以,组件的资源是动态加载的,只有选择某个组件的时候,才会去加载这个组件的资源。前端资源使用AMD标准进行加载。 困难点 首先说明,这里不分析SSR中常见的问题,比如路由匹配、css loader处... 阅读详情

本文翻译自http://www.sitepen.com/blog/2010/11/04/requirejsamd-module-forms/,并加入部分自己的解释。

CommonJS 提出了一种用于同步或异步动态加载JavaScript代码的API规范,非常简单却很优雅,称之为AMD(Modules/AsynchronousDefinition)。RequireJS和NodeJS的Nodules已经实现了这个API,而Dojo也将马上完全支持(Dojo1.6)。规范本身非常简单,甚至只包含了一个API:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

通过参数的排列组合,这个简单的API可以从容应对各种各样的应用场景,如下所述。

 

匿名模块

在这种场景下,无需输入模块名,即省略第一个参数,仅包含后两个参数:依赖模块的列表以及回调函数,例如一个简单的匿名模块可以用如下代码定义:

define(["math"], function(math){
  return {
    addTen: function(x){
      return math.add(x, 10);
    }
  };
});
在这里,第一个参数表示依赖的模块列表,即math模块。一旦所有依赖的模块被载入完成,那么第三个参数定义的回调函数将被执行,依赖模块的引用作为参数传递给回调函数。

如例子中所示,如果模块名被省略不写,那么这是一个匿名模块。通过这种强大的方式,模块的源代码与它的标识可以做到不相关。从而可以在不改变模块代码的情况下移动源码文件的位置。这个技术遵循了基本的DRY(Don't Repeat Yourself)原则,避免了模块标识的多次存储(文件名/路径信息不会在代码中重复)。这不仅使得模块的开发变得更加容易,而且为模块的重用提供了极大的灵活性。

下面我们看如何从一个Web页面载入这个模块。我们假设上面的模块存储在文件adder.js中。使用RequireJS,我们可以用下面方式来载入这个模块:
<script src="require.js"></script>
<script>
require(["adder"], function(adder){
  // ready to use adder
});
</script> 
一旦代码被执行,RequireJS将会自动去调用adder模块所有的依赖模块。载入完毕之后,我们就可以通过回调函数的adder参数来使用前面定义的匿名模块。例子中可以看到,adder.js里存储的是定义的匿名模块,实际上我们可以用任何文件/路径来包含这个模块,为模块的重用提供了方便(Java中的文件名/路径和类名/包的必须一致性实际上就为类级别的重用造成了不便)。require函数用于载入任何一个模块,后面将多次使用。

对于匿名模块的使用有一些注意事项。比如每个文件中只能包含一个匿名模块,而且匿名模块只能被载入器载入,即只能用require来载入。也可以这么理解,实际上匿名模块并不是没有名字,而是在使用时进行命名的模块,例子中就是adder。

数据封装:新的JSON-P

对于一些仅仅提供数据或者独立方法(不依赖于其它模块的方法)的模块,可以简单的用如下方式来定义:
define({
  name:"some data"
});
这个和JSON-P非常像,但是却有一个显著的优点:它使得JSON-P数据可以现在静态文件中,而并不需要动态的回调过程。这也使得内容是可cache的,而且是CDN友好的。

 

封装CommonJS模块

CommonJS也是一套RIA框架,其中的模块可以通过AMD来进行封装,从而可以用define的方式很容易的进行异步装载,在这里我们可以省略前2个参数,仅包含回调函数,但回调函数的第一个参数是require方法,第二个参数是exports对象,它定义了模块本身,回调函数里的require的使用将被自动进行动态加载。例如:
define(function(require, exports){
//math是标准CommonJS模块:
  var math = require("math");
  exports.addTen = function(x){
    return math.add(x, 10);
  };
}); 
需要注意这种形式要求模块载入器扫描require函数。require调用必须写成require(“…”)的形式才能被正确识别从而正常工作。这在一些浏览器不能正常工作(例如默写版本的Opera移动版,以及PS3)。当然,如果在部署前对代码进行了build,这将完全不成问题。你也可以封装CommonJS模块,并手动的指定依赖,这种方式使得我们也可以引用CommonJS变量,从而我们可以包含标准的require和exports变量:
define(["require", "exports", "math"], function(require, exports){
// standard CommonJS module:
  var math = require("math");
  exports.addTen = function(x){
    return math.add(x, 10);
  };
}); 
 

完整的模块定义

一个完整的模块定义包含了模块名,依赖,以及回调函数。这种形式的优点是模块可以包含在另外的文件中,或者可以用script标记载入的地址中。这是build工具自动生成的规范模式,使得多个依赖可以被打包在同一个文件中,这种格式的例子如下:
define("adder", ["math"], function(math){
  return {
    addTen: function(x){
      return math.add(x, 10);
    }
  };
});

最后,我们来看有模块id,但没有模块依赖的情况。这种情况用于你想指定模块id,但是这个模块不依赖于其它模块。这时的参数默认是“require”,“exports”和“module”。从而我们可以这样创建adder模块。
define("adder", function(require, exports){
  exports.addTen = function(x){
      return x + 10;
  };
});
通过这种方式定义的模块可以被RequireJS载入,也可以作为其它模块的依赖被载入,或者直接用require()的形式载入。

综上所述,这种API看似简单,却提供了一种极其灵活的方式来定义模块,适用于各种应用场景,从可被自由移动的匿名模块,到构建后的可被<script>标记载入的模块。当前RequireJS和Dojo实现了这套规范,而JavaScript的Web Server框架NodeJS的Nodules也实现了这个规范。

javascript的动态加载、缓存、更新以及复用(一) 使用范围:   OA、MIS、ERP等信息管理类的项目,暂时不考虑网站。 遇到的问题:   完成一个项目,往往需要引用很多js文件,比如jQuery.js、easyUI等。还有自己写的一些列js文件,那么这些文件如何方便的加载,如果文件有变化如何才能让客户端及时更新缓存?如果能够提高点运行效率,那就更好了。 目标: 1、  可以方便的引用js文件。 2、  尽量使用各种缓存,避免频繁从服务器读取文件。 3、  如果js文件有更新或者增加、减少几个减少js文件,需要客户端能够自动、立刻更新。 4、  Js文件的复用。 页面结构:   一般OA、MIS这一类的项目,大多采用frameset或者if 立即下载

相关推荐

李大勇matlab密码,基于MatlabSimulink的太阳能热水系统仿真研究 沈超.doc

基于MatlabSimulink的太阳能热水系统仿真研究 沈超中国工程热物理学会 工程热力学与能源利用 编号:141090基于Matlab/Simulink的太阳能热水系统仿真研究沈 超1 1 余 鹏1 李洪欣1 魏新利2郑州大学土木工程学院,郑州 450001郑州大学化工与能源学院,郑州 45...

weixin_42298437的博客 1342

AMD和RequireJS----优化Web应用前端(按需动态加载JS)

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。 一、AMD 介绍 前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了,这些

hsany330的专栏 1577

scratch航天梦主题课程作品分享,包含ppt、素材包

而今年多国都将发射探测器尝试登陆月球,2023年或将称为“登月年”,请大家发挥创新思维,以“星辰大海”为创作主题,搜集相关信息 、展开联想,为实现升空 、探测 、取样贡献创意!即使去淘宝买的素材,也要从百度网盘,但素材太多大了或者太多文件,也要充值百度网盘超级会员才能保存,提高下载速度。同学们大家好,今天我们就要开始航天主题-嫦娥五号探月工程系列的编程课程了,不仅可以学习到很多航天知识,了解本次嫦娥五号的发射历程,还能让我们用编程遨游太空呢。即使下载了,也要上传,不是特别方便,尤其是不好查找。

少儿编程吕口口 2483

Javascript模块化编程——使用AMD,CommonJS,ES Harmony

定一个小目标,每周翻译一篇国外优秀博客 原文链接 https://addyosmani.com/writing-modular-js/ 模块化

Daisy花园 956

电力电子课设救星:用Simulink实现Buck变换器双闭环控制(PID调参技巧)

本文是电力电子课程设计的实用指南,详细讲解如何利用Simulink仿真平台实现Buck变换器的电压电流双闭环控制。文章核心聚焦于PID参数整定的实战技巧,提供了从手动调试口诀到MATLAB脚本自动优化的完整方案,旨在帮助学生高效完成课设,深入理解闭环控制原理并生成专业报告。

weixin_29179311的博客 296

实战指南 | Adjust 与 Facebook、Google Ads 自归因配置全流程解析

本文详细解析了Adjust与Facebook、Google Ads自归因配置的全流程,帮助移动应用出海推广者解决广告归因难题。通过自归因功能(SAN),开发者可以获取更准确的数据、简化配置流程并扩大安装来源覆盖,显著提升广告效果监测和ROI计算效率。

weixin_42528780的博客 539

JS模块化加载方式 ,AMD、CMD、CommonJS、ES6四者间的异同

1、异同对比 2、四种模块化加载方式的详说 2.1 AMD AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 步骤如下: 1、引入require.js,并用data-main指定入口的js文件。 2、在入口的js文件内用require.config配制各个模块的路径。 3、define定义js模块文件 4、require引入js模块文件 注意: require([ ],callback)首先异步加载数组内的模块,随后才会去执行callback; 例子如下: index.html &

yiyueqinghui的博客 4832

基于Pixi.js的Live2D看板娘离线加载实战指南

本文详细介绍了基于Pixi.js实现Live2D看板娘离线加载的完整方案,涵盖环境搭建、模型加载、交互功能实现及常见问题解决。通过Pixi.js的硬件加速优势,开发者可在Web和Electron项目中无缝集成离线运行的Live2D模型,提升用户体验并避免网络依赖问题。

weixin_29001423的博客 343

javascript的AMD模式

AMD(Asynchronous Module Definition,异步模块定义)是一种JavaScript模块化开发的规范,它主要应用于浏览器环境,用于解决浏览器端的模块化和异步加载问题。AMD规范由James Burke等人在开发Dojo Toolkit的过程中提出,后来通过RequireJS这样的库得到了广泛推广和应用。

ivan5277的博客 993

基于YOLO26/11/v8算法的Web目标检测系统,人脸表情识别系统,Django+Vue3 的前后端分离,实现摄像头实时识别,YOLO26/YOLO11/v8 + LLM大模型智能分析,科研必备

在人工智能迈向通用化(AGI)的今天,“视觉感知 + 语言理解”的多模态联合是未来的趋势。单纯的检测画框已经无法满足复杂的业务需求,如何让系统“看懂”画面并进行“思考”,是当前视觉项目的重点。我们知道目标检测是计算机视觉中的重要任务,广泛应用于安防监控、自动驾驶、智能家居等领域。因此本项目将 YOLO 目标检测模型(兼容 YOLO26/v11/v8 系列)与 DeepSeek 等顶流大语言模型(LLM) 进行联合,使用 Django (后端) + Vue3 (前端) 技术栈

在职AI算法工程师,擅长计算机视觉,YOLO目标检测、分割等,擅长web、pyqt界面可视化,好内容持续更新中,来这里跟大家一起学习,共同进步 2839

【华为OD机试真题】439、精准核酸检测 | 机试真题+思路参考+代码解析 (C++、Java、Py、C语言、JS)

题目描述 >为了达到新冠疫情精准防控的需要,为了避免全员核酸检测带来的浪费,需要精准圈定可能被感染的人群现在根据传染病流调以及大数据分析,得到了每个人之间在时间、空间上是否存在轨迹的交叉。现在给定一组确诊人品编号(X1 X2 X3.....n)在所有人当中,找出哪些人票要进行核酸检测,输出需要进行核酸检测的人数。(注意:确诊病例自身不需要再做核酸检) >  需要进行核酸检测的人,是病毒传播链条上的所有人员,即有可能通过确诊病例所能传播到的所有人   例如:A是确诊病例,A和B有接触、B和

KJ.JK 1434

有关Javascript的几篇文章,等有空了在读读

为什么80%的码农都做不了架构师?>>> ...

weixin_34151004的博客 58

【天工Godwork精品教程】天工3.1.7安装教程(附Godwork完整版下载地址)

本文讲解天工3.1.7安装过程(附Godwork完整版网盘下载地址)。 一、天工3.1.7安装教程 1. 安装GodWork-AT 3.1.7 2. 安装GodWork-AT 3.1.7补丁 3. 安装GodWork-EOS-Setup-2017B-1231 4. 安装GodWork-EOS补丁 5. 运行godwokr软件 6. 生成ZC码 7. 输入ZC码 8. eos插

智慧空间实验室 5285

Dojo1.6新特性概览

Dojo 1.6正式版发布已近满月,​无论是在功能还是稳定性上,都取得了不小的进步。新引入的AMD规范也让Dojo紧跟Ajax库的规范化的步伐。下面就让我们来看一下Dojo 1.6中又有什么让人眼前一亮的新内容呢?

Dojo中文博客 9888

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

Dojo1.6新特性概览 .

简介: Dojo 1.6正式版发布已近满月,​无论是在功能还是稳定性上,都取得了不小的进步。新引入的AMD规范也让Dojo紧跟Ajax库的规范化的步伐。 下面就让我们来看一下Dojo 1.6中又有什么让人眼前一亮的新内容呢?     1. 概述 Dojo 1.6 支持以下浏览器:     Firefox 3.6 Safari 4/Safari 5 和 C...

qq_30279255的博客 321

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

JavaScript面试大全(二)

为什么80%的码农都做不了架构师?>>> ...

weixin_33738982的博客 114

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

上一篇: Dojo:不容忽视的RIA框架
下一篇: Dojo框架:误解与现实
dojotoolkit
博客等级 码龄16年 1205粉丝 61原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值