RequireJS -Javascript模块化（一、简介）
1、认识RequireJS
RequireJs官网（http://requirejs.org/）的描述：
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
RequireJS是一个用来加载模块的js文件，它是在浏览器端的一个优化设计，同时它能够在其他js环境下使用，比如Rhino和Node，使用类似于RequireJS的js模块加载器能够提升您的代码执行速度和质量
2、使用RequireJS
（1）平时我们引用js的方式
index.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/my/dr.js"></script>
<title></title>
</head> <body>
<p>this is index.html</p>
<script>
console.log("dr.version: "+dr.version);
</script>
</body> </html>
js/my/dr.js
! function(window) {
var dr = {};
dr.version = "v1.0";
window.dr = dr;
}(window);
控制台输出
dr.version: v1.0
（2）引用requirejs的方式
一个简单的例子：
目录结构：
index.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js" data-main="js/main"></script>
<title></title>
</head> <body>
<p>this is index.html</p>
</body> </html>
js/my/dr.js
! function(window) {
var dr = {};
dr.version = "v1.0";
window.dr = dr;
define(function() {
return dr;
});
}(window);
js/main.js
require.config({
baseUrl: "js",
paths: {
dr: "my/dr"
}
})
require(["dr"], function(dr) {
if (dr) {
console.log("dr.js is ready!");
console.log("dr.version: " + dr.version);
}
})
测试，控制台输出：
dr.js is ready!
dr.version: v1.0
1、看下index.html。
在<head>标签中引入了require的js文件，并指明属性 data-main="js/main.js"，这个属性相当于指明了RequireJs的入口，与java中的mian方法相似（这个属性的值可以直接写成"js/main"，require会自动去找js下的main.js文件）。
2、看下RequireJs的“入口”main.js。
require.config()：配置require的基本信息。
baseUrl如果不指定的话，那默认为main.js的文件夹路径，即"js"，我们的代码中写不写baseUrl属性都无所谓，因为我们与main的文件夹路径是一致的；
path：我们要引用的js文件和路径，如果要引用多个js文件，追加即可，但是这里我们引用的js文件中必须符合AMD规范（异步模块加载机制）才可以，简单的说就是必须有define()方法。
require()：两个参数，第一个是数组，里面存放我们要引用的js文件的名称，与上面config方法中的paths中的名称对应，第二个是引用完成后的回调函数，在这个函数中有个参数，这个参数值就是js文件中define()方法的返回值。
3、看下dr.js
! function(window) {
var dr = {};
dr.version = "v1.0";
window.dr = dr;
define(function() {
return dr;
});
}(window);
这个跟之前（1）平时我们引用js的方式相比，多了一个define函数（斜体部分），这个函数返回了dr对象。这样才符合AMD规范，我们在main.js的require()的回调函数中才能得到dr.version的值。
简单的总结下：
1、在我们需要引用的js文件中定义define()方法，返回某个对象。
2、编写main.js方法（当然名字写成什么都可以，只要在index引用RequireJs文件的时候指明属性data-main的值为对应的main.js即可）。编写配置文件（指定baseUrl，paths里面存放我们要引用的js文件，这里js文件都是作为module的方式被require异步加载）
3、在index.html中引入requirejs文件，指明require入口，在页面中使用即可。
下面是我加载两个模块的例子（dr.js和jquery.js），很简单，各位一眼就能看懂的。
目录结构：
（配图有误，后面测试的时候将jquery文件夹修改为了jq）
按照步骤来：
1、在dr.js和jquery.js中编写define()方法。dr.js我们刚刚已经写过了，这里不改动；jquery呢？看下jquery源码：
// Expose jQuery as an AMD module, but only for AMD loaders that
// understand the issues with loading multiple versions of jQuery
// in a page that all might call define(). The loader will indicate
// they have special allowances for multiple jQuery versions by
// specifying define.amd.jQuery = true. Register as a named module,
// since jQuery can be concatenated with other files that may use define,
// but not use a proper concatenation script that understands anonymous
// AMD modules. A named AMD is safest and most robust way to register.
// Lowercase jquery is used because AMD module names are derived from
// file names, and jQuery is normally delivered in a lowercase file name.
// Do this after creating the global so that if an AMD module wants to call
// noConflict to hide this version of jQuery, it will work.
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
已经看到jquery已经写好了，将jQuery做一个异步加载的module实现。
2、编写main.js，在paths中添加jquery的配置，名称为“jquery”，路径是“jq/jquery”，代表着引入"js/jq/"下的jquery.js文件，注意：这里的路径不能写后缀".js"；在require中添加jquery的模块。
require.config({
baseUrl: "js",
paths: {
jquery: "jq/jquery",
dr: "my/dr"
}
})
require(["jquery", "dr"], function($, dr) {
if ($) {
console.info("jquery is ready!");
console.log("jquery version: "+$().jquery);
}
if (dr) {
console.info("dr.js is ready!");
console.log("dr.version: " + dr.version)
}
})
3、index.html，增加一个按钮，用于测试jquery和dr是否正确引入
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js" data-main="js/main.js" async="async" defer="defer"></script>
<title></title>
</head> <body>
<p>this is index.html</p>
<button onclick="getVersion();">获取版本</button>
<script>
function getVersion() {
console.log("index-->jquery version: " + $().jquery);
console.log("index-->dr version: " + dr.version);
}
</script>
</body> </html>
测试：
jquery is ready!
jquery version: 1.9.1
dr.js is ready!
dr.version: v1.0
//点击button按钮时候控制台输出
index-->jquery version: 1.9.1
index-->dr version: v1.0
这里存在一个问题，很大的问题：如果我们把getVersion()的function包装去掉，直接在script中写
console.log("index-->jquery version: " + $().jquery);
或者
console.log("index-->dr version: " + dr.version);
会发生什么呢？
Uncaught ReferenceError: $ is not defined
jquery is ready!
jquery version: 1.9.1
dr.js is ready!
dr.version: v1.0
或者
Uncaught ReferenceError: dr is not defined
jquery is ready!
jquery version: 1.9.1
dr.js is ready!
dr.version: v1.0
问题的根源在于，在requirejs异步加载jquery和dr的时候，index.html的文档流已经读完了，所以发生了错误，之后又异步获取到了require加载jquery和dr完成的回调函数。
RequireJS -Javascript模块化（一、简介）的更多相关文章
- RequireJS -Javascript模块化（二、模块依赖）
上一篇文章中简单介绍了RequireJs的写法和使用,这节试着写下依赖关系 需求描述:我们经常写自己的js,在元素选择器这方面,我们可能会用jquery的$("#id")id选择器 ...
- Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- JavaScript模块化-RequireJs实现AMD规范的简单例子
AMD规范简介 AMD(异步模块定义),是实现JavaScript模块化规范之一,它采用异步方式加载模块,模块的加载不影响后面语句的运行.require.js和curl.js都是实现AMD规范的优秀加 ...
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- Javascript模块化规范
Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结
是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...
- JavaScript模块化---AMD规范
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- 实现一个JavaScript模块化加载器
对任何程序,都存在一个规模的问题,起初我们使用函数来组织不同的模块,但是随着应用规模的不断变大,简单的重构函数并不能顺利的解决问题.尤其对JavaScript程序而言,模块化有助于解决我们在前端开发中 ...
随机推荐
- g2o20160424 CMakeLists.txt
LIB_PREFIX: 设置生成库的前缀 SET(LIB_PREFIX g2o_) # The library prefix SET(LIB_PREFIX g2o_) 变量的默认配置 # defaul ...
- 37LCD-TFTLCD原理与配置
1.TFTLCD驱动原理 简介
- 《Head First Servlets & JSP》-12-Web应用安全
serlvet安全的4大要素 认证.授权.机密性和数据完整性. 容器完成认证和授权的过程 代码中不要有安全信息 大多数Web应用,大多数情况下Web应用的安全约束都应该以声明方式处理,即在部署描述文档 ...
- C语言结构体--位域
有些数据在存储时并不需要占用一个完整的字节,只需要占用一个或几个二进制位即可.比如开关只有通电和断电两种状态,用 0 和 1 表示足以,也就是用一个二进位.正是基于这种考虑,C语言又提供了一种叫做位域 ...
- 原型模式与serializable
写原型模式时课件上有一个实现模式是利用可串行化接口实现,然后就发现那个代码(如下),串行化接口里面没有函数,这种接口被曾为标记接口,implements这个接口后就可以对其进行各种流操作了,其实就是O ...
- sql 简单的定义变量 声明 输出
--定义变量 声明 变量名 数据类型 varchar默认长度为1 --char 当字符不够时 用空格代替 declare @a char(10) --字符串用单引号 set @a ='abcdef' ...
- c# dictionary，list排序
Dictionary Key排序 Dictionary<string, string> dct= new Dictionary<string, string>(); Dicti ...
- inline 内联函数
1.目的: 引入内联函数的目的是为了解决程序中函数调用的效率问题. 函数的引入可以减少程序的目标代码,实现程序代码和数据的共享.但是,函数调用也会带来降低效率的问题,因为调用函数实际上将程序执行顺序转 ...
- 关于Linq对DataTable和List各自的两个集合筛选的相关操作技巧
项目中用到了对两个集合的帅选等操作,简单总结下 1.Linq操作多个Datable 可以通过AsEnumerable()方法对DataTable进行Linq操作 //获取数据表所有数据 DataTab ...
- Java框架之spring 项目 附加之noteresult（status msg data uuid MD5）
1.1创建类 实体类 NoteResult<T> 注意<T> private int status; private String msg; private T dat ...