jQuery 对AMD的支持(Require.js中如何使用jQuery)
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.myPlugin = 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)相关推荐
- js中onload和jQuery中的ready区别
js中onload和jQuery中的ready区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. ------>不能写多个(如果有多个,只会执行一个) $(do ...
- 在js中如何使用jquery的属性选择器
个人理解: 可以更快捷的改变标签的属性 第一步先创建好需要用的标签: <input type="checkbox" name="newsletter" v ...
- JS中的CommonJS和AMD
参考:https://www.cnblogs.com/moxiaowohuwei/p/8692359.html js中function立即执行函数两种写法: (function (p1, p2) {c ...
- js中innerHTML和innerText jQuery中html()和text()的区别
js中innerHTML和innerText的区别 innerHTML innerHTML 会将标签和标签中的内容否获取回来 innerHTML .innerHTML = '<p>&l ...
- js中的onclick事件和JQuery中的click方法以及on方法事件用法总结
1.onclick是绑定的事件(它是一个事件),注意该事件绑定只是JacaScript中有(js中的),Jquery中并没有此事件,告诉浏览器在鼠标点击时候要做什么 2.click方法(jquery中 ...
- Javascript模块化编程(三):require.js的用法
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
- require.js的基本用法
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- require.js笔记
笔记参考来源:阮一峰 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 浏览器端的模块只能采用"异步加载& ...
- php引入路径配置,require.js的路径配置和css的引入方法详解
这篇文章主要介绍了详解require.js配置路径的用法和css的引入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前 ...
最新文章
- 【USACO】namenum
- 使用【飞桨】实现【手写数字识别】
- Ubuntu下使用Evernote
- LeetCode 257二叉树的所有路径-简单
- kvm中内存过载使用
- springboot 优雅停机_Spring Boot 程序的优雅停机[译文]
- Microsoft Windows Sharepoint Services V3.0 安装图示
- WebRAY网站检查技术支撑平台的实践
- java sybase 驱动_Java连接Sybase数据库
- MATLAB--从正弦波转换为方波(验证傅里叶级数)
- KDE桌面下konsole打开terminal/tab 并执行命令或脚本
- 如何理解移动端设计稿的计算问题(移动端屏幕适配和px转rem)
- Linux date命令-d、--date选项接受的时间描述字符串的格式详解
- oracle 列转行
- 学习ROS初始遇到的各种问题及解决方法
- 知乎视频下载(爬虫)
- vim常用插件安装及使用
- INFLUXDB-influxDB一些查询语法你必须知道
- Qt编写可视化大屏电子看板系统21-数据转曲线
- 二维数组vector初始化c++
热门文章
- pwntools所带的函数使用方法
- 关于loader asyncTaskLoader AsyncTask的理解
- 发送图片微博_微博引流之(实时号养成内幕解析)!
- 使用 graphviz 形象化有向图
- word项目符号或编号bullets and numbering
- 用两个文件a.txt;b.txt.使用linux命令,复制,a.txt文档倒数第十行的记录to b.txt文档
- array_reduce() 与 array_map()
- 下载华为交换机MIB参考文件并使用snmpwalk获取OID信息
- Day1 -Python program
- 37-Invert Binary Tree