YangHaiquan/requirejsdemo

公司某项目中使用ruquired.js进行javascript模块化管理，写一个例子，整理下笔记。

Javascript模块化

Javascript模块化三种写法 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

AMD规范

1、定义模块

采用特定的define()函数来定义

2、加载模块

采用require()语句加载模块require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。例如：

  require(['math'], function (math) {

    math.add(2, 3);

  });

math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。

require.js实现了AMD规范。

require.js例子

我的Github地址：https://github.com/oldmaimai/requirejsdemo

定义模块A，moduleA.js

/*
function fun1(){
  alert("it works");
}

fun1();
*/

/*
示例1：使用普通方式创建模块：使用了块作用域来申明function防止污染全局变量
*/
/*
(function(){
  var add = function (x,y){
    return x+y;
  };
  return {
    add: add
  };
})()
*/

define(function (){
  var add = function (x,y){
    return x+y;
  };
  return {
    add: add
  };
});

定义模块B，moduleB.js

/*
实例2：使用AMD规范创建模块：define方式来创建模块,同时，该模块还依赖moduleA
*/
define(['moduleA'], function(moduleA){
  function add(x, y){
        return moduleA.add(x, y);
  }
  return {
     add : add
  };
});

模块使用方式1：

直接引用require.js，用require的方式加载


<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
		    // 本地加载方式1
            require(["moduleA"]);
			
			// 本地加载方式2
			require(["moduleB"],function(mb){
			    alert(mb.add(1, 1));
			})
        </script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

模块使用方式2

异步加载requires.js，使用主模块方式，我们项目中使用这种

首先定义主模块main.js

//主模块依赖jquery、moduleB这2个模块
alert("主模块加载成功!");
require(['jquery-1.10.2', 'moduleB'], function ($, b){
    // some code here
		alert(b.add(2, 2));
  });

html使用main

<!DOCTYPE html>
<html>
    <head>
	    <!--
		1.async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。	
        2.data-main属性的作用是，指定网页程序的主模块。这个文件会第一个被require.js加载。
		  由于require.js默认的文件后缀名是js，所以可以把main.js简写成main
		-->
        <script src="require.js" defer async="true" data-main="main"></script>
    </head>
    <body>
      <span>本例子展示了1、如何定义模块 2、如何引入模块</span>
    </body>
</html>

YangHaiquan / requirejsdemo