AMD 模块

AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。

AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载。它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合。目前它已经被很多项目所接纳,包括jQuery(1.7)。

RequireJS

RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范。

jQuery 对AMD的支持

jQuery 1.7 开始支持将 jQuery 注册为一个AMD异步模块。有很多兼容的脚本加载器(包括 RequireJS 和 curl)都可以用一个异步模块格式来加载模块,这也就表示不需要太多 hack 就能让一切运行起来。可以看看jQuery 1.7 中的源码:

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}

其工作的原理是,所使用的脚本加载器通过指定一个属性,即 define.amd.jQuery 为 true,来标明自己可以支持多个 jQuery 版本。如果有兴趣了解特定的实现细节的话,我们可以将 jQuery 注册为一个具名模块,因为可能会有这样的风险,即它可能被与其它使用了 AMD 的 define() 方法的文件拼合在一起,而没有使用一个合适的、理解匿名 AMD 模块定义的拼合脚本。

高版本的jQuery (1.11.1) 去掉了define.amd.jQuery判断:

    if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
});
}

Require.js中使用jQuery

Require.js中使用jQuery非常方便,简单配置就可以了,例如:

    // 简单的配置
require.config({ // RequireJS 通过一个相对的路径 baseUrl来加载所有代码。baseUrl通常被设置成data-main属性指定脚本的同级目录。
baseUrl: "./js", // 第三方脚本模块的别名,jquery比libs/jquery-1.11.1.min.js简洁明了;
paths: { "jquery": "libs/jquery-1.11.1.min.js" } }); // 开始使用jQuery 模块
require(["jquery"], function ($) { //你的代码
//这里直接可以使用jquery的方法,比如:$( "#result" ).html( "Hello World!" ); });

Require.js中使用jQuery 插件

虽然jQuery的支持AMD的API, 这并不意味着jQuery插件也是和AMD兼容的。

一般的jQuery 插件格式:

    (function ($) {
$.fn.m​​yPlugin = function () {
//你自己的插件代码
};
})(jQuery);

不过我们稍微修改一下就可以使用Require.js加载一个jQuery插件:

    ;(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD模式
define([ "jquery" ], factory);
} else {
// 全局模式
factory(jQuery);
}
}(function ($) {
$.fn.jqueryPlugin = function () {
//插件代码
};
}));

Require.js中使用jQuery UI组件

Require.js中使用jQuery UI组件也类似的,只要改造一下jQuery Widget Factory 代码就可以了,并且感觉jQuery UI的依赖关系加载就可以了。例如:

    ;(function (widgetFactory) {

        if (typeof define === "function" && define.amd) {
// AMD模式
define("jquery.ui.widget", ["jquery"], function () { widgetFactory(window.jQuery); });
} else {
// 全局模式
widgetFactory(window.jQuery);
}
}
(function ($, undefined) { // jQuery Widget Factory 代码 }));

转载地址:http://www.css88.com/archives/4826

jQuery 对AMD的支持(Require.js中如何使用jQuery)的更多相关文章

  1. js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 for循环

    js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 $(".progressName").each(f ...

  2. JS 模块化 - 03 AMD 规范与 Require JS

    1 AMD 规范介绍 AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载. AMD 规范由 Common JS 规范演进而来, ...

  3. 遵循amd规范的require.js(适合浏览器端)

    1. 下载require.js 2. 引用 html <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. Require.js中的路径在IDEA中的最佳实践

    本文主要讲述require.js在IDEA中路径智能感知的办法和探索中遇到的问题. 测试使用的目录结构:一种典型的thinkphp 6的目录结构,如下图. 现在我通过在 vue-a.js 中运用不同的 ...

  5. undercore & Backbone对AMD的支持(Require.js中如何使用undercore & Backbone)

    RequireJS填补了前端模块化开发的空缺,RequireJS遵循AMD(异步模块定义,Asynchronous Module Definition)规范,越来越多的框架支持AMD,像最近的jQue ...

  6. jquery.validate 验证(支持前台js验证通过,然后ajax后台数据校验)二

      jquery.validate  为啥 源码 里面 规定 dataType: "json" 呢 因为 他配套的 是  messages  下面 的 remote  属性 验证失 ...

  7. js中onload和jQuery中的ready区别

    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. ------>不能写多个(如果有多个,只会执行一个) $(document).ready()是DOM结构绘制完毕后 ...

  8. Javascript模块化编程:AMD规范及require.js用法【转】 - loheonly的笔记 - 前端网(W3Cfuns)

    http://www.w3cfuns.com/blog-5425789-5399326.html

  9. jQuery.js引入时要在其他js文件之前,否则js中无法识别jQuery的语法

随机推荐

  1. CentOS7设置固定IP

    在安装完CentOS7后,当我每次启动CentOS并使用SecureCRT链接时,都发现CentOS的IP总是在变,这就很苦恼了,总不能每次链接的时候都先查一下虚拟机的IP吧,所以打算把它设置成固定I ...

  2. Mybatis优缺点

    优点:SQL写在XML中,便于统一管理和优化 提供映射标签,支持对象和数据库的orm字段关系映射 可以对SQL进行优化      缺点: SQL工作量大 mybagtis移植姓不好 不支持级联

  3. mybatis 中的 xml 配置文件中 ‘<’、 ‘>’ 处理

    mybatis 中的 xml 配置文件中 '<'. '>' 处理 1.使用转义字符将 '<'. '>' 替换掉. 描述 字符 转义字符 小于号 < < 大于号 &g ...

  4. python 实现wav的波形显示(时域和频域)

    音频处理中,经常要看一下啊频域图是什么样子的,这里自己写了一个小程序,可以完美的同步显示时域和频域图,直接上代码: #wave data -xlxw #import import wave as we ...

  5. python之找最后一个人

    题目大概是:有10个人围成一圈,从第一个人数,数到3的人出局,问最后一个人是谁? 围成一圈,那就是无限循环,直至最后一个人,我们可以把10个人看做一个列表,每循环一次就把除3为0的数去除,下次再次循环 ...

  6. (转)python异步编程--回调模型(selectors模块)

    原文:https://www.cnblogs.com/zzzlw/p/9384308.html#top 目录 0. 参考地址 1. 前言 2. 核心类 3. SelectSelector核心函数代码分 ...

  7. (转载)java内存模型

    java并发采用的是共享内存模型,线程之间的通信对程序员来说是透明的,内存可见性问题很容易困扰着java程序员,今天我们就来揭开java内存模型的神秘面纱. 在揭开面纱之前,我们需要认识几个基础概念: ...

  8. Android--UI之DatePicker、TimePicker...

    前言 这一篇博客分别讲解Android平台下,关于日期和时间的几个相关控件.包括DatePicker(日期选择控件).TimePicker(时间选择控件).DatePickerDialog(日期选择对 ...

  9. socket的阻塞与非阻塞,同步与异步

    同步/异步主要针对C端: 同步:      所谓同步,就是在c端发出一个功能调用时,在没有得到结果之前,该调用就不返回.也就是必须一件一件事做,等前一件做完了才能做下一件事. 例如普通B/S模式(同步 ...

  10. Spring Boot 系列(九)数据层-集成Spring-data-jpa

    实际开发中,不可避免地会对数据进行反复的增删改查操作,然而这部分工作是十分繁琐枯燥的.那么,随即而生的ORM框架就能很好的解决这个问题. 我们常用的ORM框架有:Hibernate.Mybatis.J ...