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模块化（一、简介）的更多相关文章

  1. RequireJS -Javascript模块化（二、模块依赖）

    上一篇文章中简单介绍了RequireJs的写法和使用,这节试着写下依赖关系 需求描述:我们经常写自己的js,在元素选择器这方面,我们可能会用jquery的$("#id")id选择器 ...

  2. Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  3. JavaScript模块化-RequireJs实现AMD规范的简单例子

    AMD规范简介 AMD(异步模块定义),是实现JavaScript模块化规范之一,它采用异步方式加载模块,模块的加载不影响后面语句的运行.require.js和curl.js都是实现AMD规范的优秀加 ...

  4. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

  5. Javascript模块化规范

    Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...

  6. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  7. 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结

    是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...

  8. JavaScript模块化---AMD规范

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  9. 实现一个JavaScript模块化加载器

    对任何程序,都存在一个规模的问题,起初我们使用函数来组织不同的模块,但是随着应用规模的不断变大,简单的重构函数并不能顺利的解决问题.尤其对JavaScript程序而言,模块化有助于解决我们在前端开发中 ...

随机推荐

  1. Linux 内核与模块调试

    一.简介 内核开发比用户空间开发更难的一个因素就是内核调试艰难.内核错误往往会导致系统宕机,很难保留出错时的现场.调试内核的关键在于你的对内核的深刻理解.   二.方法总结 1)内核模块相关指令 ht ...

  2. noi.ac day5t1 count

    传送门 分析 首先一个很重要的性质是每个数至少出现一次 所以只有一个数会出现两次 我们只需要求出n+1个数选k个数的方案数再减去重复的部分即可 重复部分于两个相同数中间的距离有关,详见代码 代码 #i ...

  3. poj1769 Minimizing maximizer

    传送门 题目大意 给你m个机器,n个数,每个机器可以给n个数的某一段排序,求最少使用几个机器,保证可以把这个n个数排好序 分析 我们可以想到dpij表示考虑前i个机器让最大的数到达点j至少需要使用多少 ...

  4. 移动应用中的AR开发，5款最受欢迎工具推荐！

      英文原文:Top 5 Tools for Augmented Reality in Mobile Apps 还记得前段时间在网上很火的 3D 小熊不?托它的福,为相当一部分人科普了增强现实(AR) ...

  5. POJ 3411 Paid Roads (状态压缩+BFS)

    题意:有n座城市和m(1<=n,m<=10)条路.现在要从城市1到城市n.有些路是要收费的,从a城市到b城市,如果之前到过c城市,那么只要付P的钱, 如果没有去过就付R的钱.求的是最少要花 ...

  6. IntelliJ Idea 免费激活方法

    文章介绍 文章不错,指的研究一下,idea的联网激活确实有可行性,但是上有政策,下有对策,如何才能保护版权,是一个值得深思的问题. 文章属于转载,文末有文章来源,转载注明出处. 1 激活码激活 到网站 ...

  7. Web性能权威指南 PDF扫描版​

    Web性能权威指南是谷歌公司高性能团队核心成员的权威之作,堪称实战经验与规范解读完美结合的产物.<Web性能权威指南>目标是涵盖Web开发者技术体系中应该掌握的所有网络及性能优化知识.全书 ...

  8. 【java】小技巧和注意事项

    1.字符串反向比较  “abc”.equals(sting) 2.文档注释 /** *注释内容 */ 3.

  9. Eval() 中数据格式化或格式化数据

    <%# Eval("SchoolEnd") == DBNull.Value ? "" : Convert.ToDateTime(Eval("Sc ...

  10. c#写对象来读取TXT文本文件

    本博文让你知道怎样写对象,怎样读取文本文件,怎样根据实际条件判断与获取需要的文本行.参考下面网友的问题,根据源文来看,有些行输出的格式,需要把“,”替换为空格. 第一行还附加入后面的子行每一行的后面, ...