requireJS的基本使用
一、总结
一句话总结：
requireJS是js端模块化开发，主要是实现js的异步加载，和管理模块之间的依赖关系，便于代码的编写和维护
1、页面加载的js文件过多的缺点是什么？
|||-begin
为了提高代码的复用度，开发人员会按照功能把大量的js代码分成若干文件，这样在多个页面就可以使用同一个文件了
|||-end
1、网站加载js时会停止其它资源加载，并停止页面渲染（就是我们常说的白屏现象）
2、加载过多的js文件可能造成浏览器假死（浏览器一直在加载，不能进行页面操作）
3、假如文件有依赖关系，就是使用B.js需要先加载A.js，那我们还要小心翼翼的去引入js，不过这么多文件，鬼理得清依赖关系啊
2、网站的功能日益强大，js文件越来越多是必然的的事情，如何解决？
模块化开发：比如requireJS
3、js模块化 开发规范 分类？
1、服务器端（CommonJS）：如Node.js
2、客户端（AMD、CMD）：如requireJS 和 seaJS
4、什么是requireJS？
1、RequireJS是一个【JavaScript文件或者模块的加载器】。它可以提高JavaScript文件的加载速度，避免不必要的堵塞。
2、requireJS采用【异步方式加载模块】，可以简单理解为【加载js文件的一个工具】
3、requireJS是客户端模块化开发的一种规范，用于解决加载过多js文件导致浏览器白屏及假死及js文件引入的依赖关系的。
5、requireJS的作用？
1、实现js的异步加载
2、管理模块之间的依赖关系，便于代码的编写和维护
6、require.config方法中的baseUrl、paths、shim分别代表什么？
属性1：baseUrl:指定统一的路径
属性2：paths:每个模块的路径
属性3：shim:定义非AMD
require.config({ baseUrl: '../resource/app', paths: { 'hd': 'hd', 'css': '../lib/css.min', 'jquery': '../lib/jquery.min', 'angular': '../lib/angular.min', 'bootstrap': '../lib/bootstrap.min', }, shim: { 'hd': { // exports: 'modal', init: function () { return { modal: modal, success: success, } } }, //houdunren.com 'bootstrap': { 'deps': ['jquery', 'css!../css/bootstrap.min.css', 'css!../css/font-awesome.min.css'] } } });
二、requireJS的基本使用
参考或转自：【模块化开发】------requireJS的基本使用------【凡尘】
http://www.mamicode.com/info-detail-2285125.html
前言
为了提高代码的复用度，开发人员会按照功能把大量的js代码分成若干文件，这样在多个页面就可以使用同一个文件了。，下面是某个网站的js引用情况
虽然代码的复用度提升了，但是缺点也体现了出来
缺点：
1、网站加载js时会停止其它资源加载，并停止页面渲染（就是我们常说的白屏现象）
2、加载过多的js文件可能造成浏览器假死（浏览器一直在加载，不能进行页面操作）
3、假如文件有依赖关系，就是使用B.js需要先加载A.js，那我们还要小心翼翼的去引入js，不过这么多文件，鬼理得清依赖关系啊
额 。。。容许我懵逼片刻，那怎么办呢，网站的功能日益强大，js文件越来越多是必然的的事情，于是出现了模块化开发
模块化开发
001、模块化分类
目前js模块化 开发规范 分为两种
1、服务器端（CommonJS） 如Node.js
2、客户端（AMD、CMD） 如：requireJS 和 seaJS
002、什么是requireJS
1、RequireJS是一个JavaScript文件或者模块的加载器。它可以提高JavaScript文件的加载速度，避免不必要的堵塞。
2、requireJS采用异步方式加载模块，可以简单理解为加载js文件的一个工具
3、requireJS是客户端模块化开发的一种规范，用于解决加载过多js文件导致浏览器白屏及假死及js文件引入的依赖关系的。
4、requireJS的作用：
1、实现js的异步加载
2、管理模块之间的依赖关系，便于代码的编写和维护
003、require的基本使用
第一步：加载requirejs
<script src="require.js"></script>
第二步：异步加载require.js
<script src="require.js" defer async="true"></script>
//async属性表明这个文件需要异步加载， IE不支持该属性，只支持defer所以把defer也写上
第三步：加载入口文件
<script src="require.js" data-main="js/index" defer async="true"/><script>
data-main：用于加载入口文件（当require加载完毕后，需要引进主模块js文件）
第四步：使用require.config方法配置各个模块所加载的路径
require.config方法:
参数是一个对象:对象中有3个属性
属性1：baseUrl:指定统一的路径
属性2：paths:每个模块的路径
属性3：shim:定义非AMD
require.config({ //指定根路径js文件夹 baseUrl:"js", //每个文件路径 paths:{ "jquery":"lib/jquery-1.11.3", "layer":"plug/layer", "swiper":"plug/swiper.min", "banner":"list/banner", "alert":"list/alert" }, //非AMD文件的模块 shim:{ } })
第五步：AMD规范定义模块
AMD规范：
因为require是采用AMD规范，因为必须要按照AMD的规定来编写。也就是所有的模块必须采用define()函数来定义
define函数有2个参数：
第一个参数是需要依赖的模块，如果不依赖就不用书写 必须是一个数组
第二参数是书写的模块内容
//以下定义了一个swiper的轮播图
define(["jquery","swiper"],function(){ function init(){ new Swiper (‘.swiper-container‘, { direction: ‘horizontal‘, loop: true, autoplay : 3000, speed:300, pagination: ‘.swiper-pagination‘, // 如果需要前进后退按钮 nextButton: ‘.swiper-button-next‘, prevButton: ‘.swiper-button-prev‘, }) } return { init:init } })
第六步：入口的核心文件
require:接受2个参数
1、第一个参数是数组,表示依赖的模块
2、第二个参数是回调函数
require(["config"],function(){ require(["jquery","layer","swiper","banner","alert"],function($,layer,swiper,banner,alert){ banner.init() alert.init() }) })
第一步加载配置文件
第二步加载所需要的模块
第七步：如果遇到非AMD规范的模块
shim:{
模块名:{
deps:[""],//所依赖的模块
exports:模块名//导出模块的名称
}
}