require.js使用方法整理

一、使用原因
1、实现js异步加载，避免网页失去响应；
2、管理模块之间的依赖性，便于代码编写和维护；

二、使用说明

1.加载require.js

加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

2.主模块

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/require.js" data-main="js/main"></script>

(1).config

require.config({
baseUrl: "js/lib",//基目录

shim: {//加载没有采用AMD规范的模块 （例如：jquery插件） ，没有用define()定义的模块方法

　　　　'jquery.scroll': {

　　　　　　deps: ['jquery'],//依赖于jquery

　　　　　　exports: 'jQuery.fn.scroll'//输出名字

　　　　}

　　},

　　　　paths: {//路径

　　　　　　"jquery": ["https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" ，“jquery.min”],
// 远程cdn库没有加载成功，可以加载本地的库

　　　　　　"underscore": "underscore.min"
}

　　});

3.定义模块

define(function (){

　　　　var add = function (x,y){

　　　　　　return x+y;

　　　　};

　　　　return {

　　　　　　add: add
　　　　};

　　});
//如果这个模块还依赖于其他模块

define(['myLib'], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

4.加载模块方法

require(['模块名称'], function ( 输出变量 ){

　　　　//加载成功后执行

　　});

require(["jquery","underscore"],function($, ){
$(function(){
.each([1,2,3],alert);
})
})