RequireJS

除开官方文档外这篇博客挺好的 https://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/
一般看完会有个疑问 define和require 区别是什么
define总共有三步参考http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html
Loads the specified dependencies
Calls the callback function
Registers the return value from the callback function as the module
require就是前2个，也就是说require不注册新模块，只是用别的模块。

使用上来说 define定义了一个模块只要在被其他东东引用它的时候才会被执行 require就不一样类似于函数的调用

来一个最基本的

<!DOCTYPE html>
<html>
<head>
    <title>My Sample Project</title>
    <!-- data-main 属性告诉 require.js 在 require.js  加载之后异步加载 js/main2.js -->
    <!--这个main2.js是主要文件  它依赖于各种其他模块 -->
    <!--PS　这里隐式说明了baseUrl是js这个文件夹   PS  最新版requirejs已经不再支持data-main这样的方式 且入口文件要用require的方式-->
    <script data-main="js/main2" src="js/require.js"></script>
    <script type="text/javascript" src='js/ano.js'></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>

PS:data-main中的文件时异步加载的所以开始解析ano.js的时候 main2不一定加载完成了

这是main2

console.log('main2');
//require([moduleID,...],function(...){});
//指定模块的时候  无需指定.js后缀  因为默认是加载js文件
//并且这里在加载模块的时候 默认根据baseUrl + paths的方式
//baseUrl已经在index.html中指定
//一般情况下  moduleID就是文件名
//如果是以 .js结尾  /  "http"开头 将会以index.html文件为baseUrl

//依赖一个原始的库  //比如jQuery
require(["jQuery2.1.1"],function($){
  console.log($);//undefined //这是为什么呢？ 因为jquery模块名字必须是jquery  这里模块名字是jQuery2.1.1  //所以似乎只有把文件名改为 jquery 才能用 (因为依赖的这里就是填写路径)
});


require(["jquery"],function($){
  console.log($); //ok
});

//但是这样的规定太限制不是嘛
//当然最常见的办法是使用config来配置路径  但是模块名还是jquery
//所以我们需要一个配置 这样jQuery的库的文件名就比较随意了
require.config({
    paths: {
        'jquery': './jQuery2.1.1'
    }
});
require(["jquery"],function($){
  console.log($);
});

//我就是想改模块名怎么办呢？
//参考http://www.zfanw.com/blog/require-js.html

require.config({
    paths: {
        'jquery2': './jQuery2.1.1'
    },
    shim: {
        'jquery2': {
            exports: '$'
        }
    }
});
//在config中为jQuery库设置了模块名
require(["jquery2"],function($){
  console.log('after shim jQuery2.1.1=============');
  console.log($);
});



//依赖一个define的模块
//[]中是模块的文件路径  不可以写后缀  写了后缀的话 表示是相对于html文件所在路径
//PS  ./表示当前目录 可以省去  所以没必要写为./lib/zepto
//zepto.js中定义的模块名也应该是lib/zepto  //所以建议最好不写模块名 让requireJS来帮我们做
//否则虽然zepto虽然被加载  但是回调函数参数得不到值
//PS 这个函数在所依赖的模块加载完成之前不会执行
require(['lib/zepto'], function ($) {
    console.log('zepto=============================');
    console.log($);
});

//PS define会在require之前执行
//PS 一个JS中只能有一个define


// define(["lib/zepto"],function($){
//   console.log('zepto===def==========');
//   console.log($);
// });



//带有模块名字的define
//如果该文件是index中data-main中引用的文件  而且还想使用define来定义一个非匿名模块的话
//模块的名字要和文件名相同
//否则不执行模块
define('main2',["jquery"],function($){
  console.log('my jquery===========');
  console.log($);
});

//PS Require JS 会自动根据文件名（不含后缀名，即不含 ".js"）来给定义的模块命名

//你肯定会想  这样的话 define 和 require有什么区别
//define总共有三步  参考http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html
// Loads the specified dependencies
// Calls the callback function
// Registers the return value from the callback function as the module
//require就是前2个

再看看一个完整的例子

require.config({
  baseUrl: "./js",
  paths: {
      "common": "../common",
      "jquery":"../commonLib/jquery2.1.1"  //实际路径是 bathUrl + paths 配置的路径
  }
});

//define中碰到了jquery 实际上依赖的就是 上面配置的路径  即js/../commonLib/jquery2.1.1
//PS  jquery这个模块的名字必须是 jquery(全小写)  
define(['jquery',"helper/util", 'common/common1/common11'],function( $,util, common11){
    console.log('main1');
  console.log($);
  util.getName();
  common11.getName();
});

['xx'] 方括号中的内容实际上就是文件路径只不过对于jQuery 这个值必须是jquery 也就算是说jquery文件路径必须是
baseUrl/jquery 也就是js/jquery.js 不过一般jquery都不会直接在js下
本例子中jquery在和js同级目录下的commonLib中因为我前面有个config 所以会依照config中的路径去寻找

模块应该在怎么写呢？

define(['lib/jquery','lib/zepto'],function($,$$){
  console.log($); //undefined jquery默认模块名字只能是jquery  所以必须通过path 将模块名jquery映射为jquery文件实际路径
  console.log($$);
    console.log('helper util');
  return {
    getName:function(){
      console.log('helper util');
    }
  }
});

这个模块将被上面的文件引用上面定义了baseUrl是js 因此该模块依赖的文件实际路径是 js/lib/zepto
很惊讶！竟然不写模块名，因为可以省略。因为模块名也要和路径一致，所以可以省略。
要加的话也一定是 helper/util