使用 AMD 加载器整合多种主流 JavaScript 框架

AMD 简要介绍

AMD 是 Asynchronous Module Definition 的简称,即异步模块加载机制。该规范是由 CommonJS 提出的一种异步动态加载 JavaScript 代码的 API 规范。AMD 以简洁优雅的运行方式得到了很多主流 JavaScript 框架的 青睐,主流 JavaScript 开源框架逐渐开始用 AMD 规范来实现对其代码模块的动态加载。在 AMD 日益流行的情况下,开发 过程中的 JavaScript 框架迁移变得更加方便,同时,在一个应用中引入多个具有不同优势和功能特点的 JavaScript 框架 也变得刚加容易。

AMD 工作原理

AMD 的 API 规范非常简洁,仅包含一个名为 define 的函数:

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

其中:

   module-name:模块标识,可以省略。
   array-of-dependencies:所依赖的模块,可以 省略。
   module-factory-or-object:模块的具体实现,或者一个 JavaScript 对象。

第一个 参数 module-name 指的是模块名称标识,该参数在 AMD 加载中没有实际性作用,只做为一个名称标识。如果第一个参数被 省略,那么这个模块就成为了一个匿名模块。

匿名模块最大的优势就是可以降低代码本身和所属模块的耦合程度。 这类模块符合 DRY (Don't repeat yourself) 原则,即模块文件可以放置在任何位置而不需要修改文件内容本身。如 比较熟悉的 Java 类,它的类名和包名必须符合一定的格式,文件名和类名需要一致,文件也必须放置在相应的包路径下。 而在 AMD 加载的 dojo 中,如果一个模块为匿名模块,那么该模块的文件名就是模块标识。

AMD 的优势

匿 名模块的优势

下面来对比一下传统模块加载方式和 AMD 方式,看看匿名模块有什么样的优势:

在 dojo 的 早期版本中,建立一个 dog 类,该类继承自 animal 类。文件结构如下图所示:

图 1

在基类 animal 中有如下声明 :

清单 1

dojo.provide("animal"); // 用于初始化该 js 文件,使之成为 dojo 的模块

在非 AMD 情况下文件名和 provide 中参数必须保 持一致性 ( 即文件名与模块标识最后小数点右边部分保持一致 ),否则 dojo.require 就无法正确初始化调用该模块。

此时,继续引入子类,如 cat 类、tiger 类,为了区别基类与之类,将 animal 基类移到一个独立的文件夹,如下 图:

图 2

时间: 2024-08-22 11:38:08

使用 AMD 加载器整合多种主流 JavaScript 框架的相关文章

AMD加载器实现笔记(一)

代码我是有看过的,基本的原理也都明白,但实际动手去实现却是没有的.因为今年计划的dojo教程<静静的dojo>中,有一章节来专门讲解AMD,不免要把对AMD的研究回炉一下.时隔多日,再回头探索AMD实现原理时,竟抓耳挠腮,苦苦思索不得要领.作为开发人员,深感惭愧.故有此文,记录我在实现一个AMD加载器时的思考总结.   requireJS是所有AMD加载器中,最广为人知的一个.目前的版本更凝聚了几位大牛数年心血,必然不是我这个小虾米一晚上的粗制滥造能够比拟的,所以目前为止这篇文章里的加载器尚不

AMD加载器实现笔记(二)

AMD加载器实现笔记(一)中,我们实现了一个简易的模块加载器.但到目前为止这个加载器还并不能称为AMD加载器,原因很简单,我们还不支持AMD规范中的config配置.这篇文章中我们来添加对config的中baseUrl和packages的支持.API设计如下: require.config({ baseUrl: "./", packages: [{ name: "more", location: "./more" }, { name: "

AMD加载器实现笔记(五)

前几篇文章对AMD规范中的config属性几乎全部支持了,这一节主要是进一步完善.到目前为止我们的加载器还无法处理环形依赖的问题,这一节就是解决环形依赖. 所谓环形依赖,指的是模块A的所有依赖项的依赖中有没有依赖A模块本身的模块.如果有那就说明存在环形依赖.所以检验的方式是利用递归,检查一个模块的依赖的依赖项中有没有依赖A模块,以及依赖项的依赖项的依赖项中有没有A模块,核心代码如下: function checkCircleRef(start, target){ var m = modules[

AMD加载器实现笔记(四)

继续这一系列的内容,到目前为止除了AMD规范中config的map.config参数外,我们已经全部支持其他属性了.这一篇文章中,我们来为增加对map的支持.同样问题,想要增加map的支持首先要知道map的语义. 主要用于解决在两个不同模块集中使用一个模块的不同版本,并且保证两个模块集的交互没有冲突. 假设磁盘有如下文件: 当'some/newmodule'请求'foo'模块时,它将从foo1.2.js总得到'foo1.2'模块:当'some/oldmodule'请求'foo'模块时它将从foo

PHP MVC框架之加载器学习笔记

上节说了MVC的路由原理,这节我们来说说MVC框架的loader,也称为加载器. 虽然不同的框架,加载器的用法不同,但是其原理都是相通的...都是通过单例模式加载文件,而且把已加载的文件cache起来,避免重复加载...因为在开发业务的过程中,常常需要加载不同的模块,不同的类库等,MVC的loader可以帮助我们实现单例模式,更加符合开发需求. 下面我们开始动手,利用其原理,做一个简单的loader. 首先,我们设计的加载器,要满足可以全局使用,无论在controller里还是在model.li

JS加载器如何动态加载外部js文件_javascript技巧

今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var MiniSite=new Object(); /** * 判断浏览器 */ MiniSite.Browser={ ie:/msie/.test(window.navigator.userAgent.toLowerCase()), moz:/gecko/.test(window.navigator.userAgent.toLowerCase()), opera:/opera/.test(windo

概述如何实现一个简单的浏览器端js模块加载器_javascript技巧

在es6之前,js不像其他语言自带成熟的模块化功能,页面只能靠插入一个个script标签来引入自己的或第三方的脚本,并且容易带来命名冲突的问题.js社区做了很多努力,在当时的运行环境中,实现"模块"的效果. 通用的js模块化标准有CommonJS与AMD,前者运用于node环境,后者在浏览器环境中由Require.js等实现.此外还有国内的开源项目Sea.js,遵循CMD规范.(目前随着es6的普及已经停止维护,不论是AMD还是CMD,都将是一段历史了) 浏览器端js加载器 实现一个简

我理解的Android加载器

Android的加载器(loader)是从Android 3.0开始出来的东西.要理解这里需要先理解为什么会出现加载器(也有地方把它说成是装载器)呢? 如果没有加载器... 首先Activity是我们的前端页面展现,数据库是我们的数据持久化地址,那么正常的逻辑就是在展示页面的渲染页面的阶段进行数据库查询.拿到数据以后才展示页面. 但是这个逻辑有一些缺点:   首先是查询数据的逻辑放在了UI生成的同个线程中,这个就意味着在查询数据的时候,UI页面生成的工作被阻塞住了.UI一旦被阻塞用户就会被感知出

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的提升. 它并不是一门新技术,有人认为只有 Chrome 才具备这个功能.也有人认为它是有史以来提升浏览器性能最有效的方法.如果你第一次接触预加载器,也许心中已经有了无数个问号.什么是预加载器?它是如何提升浏览器性能的? 首先需要了解浏览器是如何加载网页的 一个网页的加载依赖于脚本文件.CS