RequireJS

浏览数：53 / 时间：2015年06月09日

除开官方文档外这篇博客挺好的 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不注册新模块，只是用别的模块。

来一个最基本的

<!DOCTYPE html>
<html>
<head>
    <title>My Sample Project</title>
    <!-- data-main 属性告诉 require.js 在 require.js  加载之后异步加载 js/main2.js -->
    <!--这个main2.js是主要文件  它依赖于各种其他模块 -->
    <!--PS　这里隐式说明了baseUrl是js这个文件夹-->
    <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不一定加载完成了

再看看一个完整的例子

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

RequireJS