RequireJS:一款优秀的AMD模块加载器
来源:互联网 发布:个人如何开通淘宝直播 编辑:程序博客网 时间:2024/05/17 08:35
RequireJS概述
RequireJS是一款遵循AMD规范协议的JavaScript模块加载器,
不但能在浏览器端充分利用,同样能在其他的JavaScript运行时环境,
比如Rhino和NodeJS。使用像RequireJS这样的模块加载器能提高代码的质量和开发速度。
RequireJS的兼容性
IE 6+ .......... compatible ✔ Firefox 2+ ..... compatible ✔ Safari 3.2+ .... compatible ✔ Chrome 3+ ...... compatible ✔ Opera 10+ ...... compatible ✔
模块化核心之定义模块
在RequireJS中,通过向全局变量注册define函数来声明一个模块。在定义模块时,我们要遵循一下的规范:
- 一个JavaScrip文件即为一个模块,即一个JavaScrip文件只能定义一个define函数。
- RequireJS最佳实践推荐,定义模块时不要指定模块标识。这样方便后期压缩。
- RequireJS最佳实践推荐推行尽量将代码封装到define函数里面。尽量不要使用shim配置项。
以下代码为定义一个模块的简单示例:
define(['jquery'],function($){ //你的封装的代码 });
上面的代码应该封装到一个JavaScrip文件中,其作用是定义一个模块,而且这个模块依赖于其他的模块,这里是指依赖jquery模块,这个模块在配置里已经被定义,如果没被定义,则有一套默认的查找机制,(ps:后期会专门写一篇相关文章),第二个参数为依赖模块执行后注入的参数,这样在你的代码中就可以肆无忌惮的使用美元($)啦。
模块化核心之加载模块
同定义模块一样,RequireJS提供require这个函数用来加载模块,同样有些规范需要我们遵守,
- 一个JavaScrip文件最好只定义一个require模块入口。
- require一般放在页面的入口出,用来加载其他的模块。
以下代码是require的简单利用:
require(['jquery'],function($){ // todo});
这个示例代码的作用是加载指定jquery模块,并且在回调函数中注入$。(题外话,我一般把一个业务模块为一个入口模块。)
模块化核心之配置文件
RequireJS强大的灵活性是通过配置文件来实现的,通过配置文件你可以简化模块的完整路径,可以切换同一个脚本的多个版本,统一管理脚本,也可以为非模块化的脚本指定shim操作等等。(详细请见http://www.requirejs.org/docs/api.html#config)
RequireJS简单示例
下面我们通过一个简短的例子来窥探一下RequireJS的基本运行流程,并同时加深一下前面理论基础的理解。项目示例的目录结构如下图所示:
每个文件的代码分别如下所示:
- project.html
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>RequireJS简单示例</title> </head> <body> <script src="scripts/require.js" data-main="scripts/main"></script> </body></html>
- main.js
require(["helper/util"], function(util) { // todo});
- util.js
define(function(){ alert("Hello RequireJS!!");});
在project.html中,在script标签中指定了一个data-main属性,那么这个属性是干什么用的呢?它用来指定页面脚本的入口,简单来说就是告诉页面,你在找脚本嘛,沿着这个入口进去就知道了。
通过data-main我们就知道入口脚本的位置,通过这个位置我们就知道了示例中的入口脚本文件所处位置为scripts/main.js,在这个页面中require只调用了一次,和上面说的一样,这个函数的作用是加载指定的依赖模块。
在main.js中,指定了页面加载的模块为helper/util,然后RequireJS就会得出具体的模块路径地址,示例中该模块的地址为:scripts/helper/util.js。然后我们进入到这个页面,发现内部的代码都是通过define函数来包裹的,这也符合上面说的,模块的定义最好是通过define函数包裹起来。
找到这个模块后,加载并调用,然后在页面就会弹出一个Hello RequireJS!!警告框。
http://blog.sina.com.cn/s/blog_164b9a4aa0102wviz.html
http://blog.sina.com.cn/s/blog_16496b2530102xxm3.html
http://blog.sina.com.cn/s/blog_164a8ea2e0102wke1.html
http://blog.sina.com.cn/s/blog_164b9a5d80102x6ac.html
http://blog.sina.com.cn/s/blog_16496b8650102wkpr.html
http://blog.sina.com.cn/s/blog_164ca32ab0102xdr1.html
http://blog.sina.com.cn/s/blog_164ca34390102wev0.html
http://blog.sina.com.cn/s/blog_16496bb380102x63u.html
http://blog.sina.com.cn/s/blog_16496bc680102wt5e.html
http://blog.sina.com.cn/s/blog_164b9aede0102wovk.html
http://blog.sina.com.cn/s/blog_164b9af910102xbqh.html
http://blog.sina.com.cn/s/blog_164b9afe50102xm49.html
- RequireJS:一款优秀的AMD模块加载器
- requirejs中非AMD规范js的加载
- AMD和RequireJS初识 -- 模块加载系列(1)
- requiredJS----AMD模块加载器
- 理解requireJS原理,实现一个简单的模块加载器
- CommonJS,AMD,RequireJS的区别
- CommonJS,AMD,RequireJS的区别
- 基于AMD的模块加载个人总结
- JS加载文件规范,AMD,commonJS,requireJs
- AMD 异步模块加载
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- RequireJS核心--之模块加载
- 模块加载系统(requirejs)
- es6模块加载 nodejs(common.js)模块加载 amd模块加载的区别整理
- CommonJS AMD CMD UMD RequireJS的区别
- 使用CocosStudio导出的资源
- 《计算机网络》知识总结-5.TCP的研究学习思路
- 样本均值的特征与分布
- 实现支持2^n字节对齐分配的malloc和free函数
- nexus私服学习总结
- RequireJS:一款优秀的AMD模块加载器
- 68. Text Justification
- 利用SVN实现增量打包
- Java Web错误页面
- 树状数组入门之POJ 2352 Star
- 欢迎使用CSDN-markdown编辑器
- eclipse F3可以看到class的定义,但是编辑器里有叉叉,refers to type "", 类型不匹配
- swift 关于 CocoaPods引入Alamofire报警告问题
- Unity Shaders——屏幕特效混合模式(Blend mode with screen effects)