ruquireJS入门

由于近期找工作需要，这两天通过requireJS官网的学习，本人对其有了基本的了解，下面说说这两天学习所得，讲的不好请大家谅解，我也是菜鸟现在。

相信大家在接触模块化JS前，对于javascript文件的应用都是通过很多个script标签来添加引用的，例如：

　　 <script src="1.js"></script>

　　 <script src="2.js"></script>

　　 <script src="3.js"></script> 　

　　 <script src="4.js"></script>

这样的写法存在着很大的弊端。其一，在加载页面的时候，如果需要加载的javascript文件很多时，会造成浏览器停止页面渲染（即页面堵塞），页面的响应时间延长，引起十分不友好的用户体验；其二，javascript文件之间会存在依赖关系，这就需要我们必须严格保证其加载的顺序（例如jquery.js的加载必须在基于jquery开发的模块之前），被依赖模块必须在依赖模块之前加载，所以随着加载模块（这里的一般将一个js文件当成一个模块）的增多，其依赖关系就会越来越复杂，这大大的增加了项目开发、升级及维护的难度。

RequireJS是一个Javascript的模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更简单自然。而通过模块化加载不仅能使上述的两个弊端迎刃而解，还可以以文件为单位将功能模块化并实现功能复用。

下面我们一起来学习requireJS的使用：

　　以实现图片轮播为例，目录结构如下：

　　　　requierJs

　　　　----css

　　　　　　---style.css

　　　　----imgs

　　　　----js

　　　　　　---jquery-1.8.3.min.js

　　　　　　---lb.js

　　　　　　---mian.js

　　　　----index.html

　　　　----require.js



　　（1）先使用<script data-main="js/main" src="require.js"></script>加载模块化。data-main属性的作用是，指定网页程序的主模块。在项目中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

在data-main指定的主文件中，可以通过require.config来配置　　　　　　　　　　　　　

　　　　　//配置　　　　

　　　　require.config({

　　　　 baseUrl: 'js',
　　　　 paths:{
　　　　 jquery:"jquery-1.8.3.min"
　　　　}
　　　　});
　　其中通过baseUrl来设置文件的路径，jquery: "query-1.8.3.min"前是定义的别名，后跟的是引用的js。这个例子是假设这些js文件都在同级目录下。

　　 （2）模块定义，require.js加载的模块，采用AMD（基于模块的异步加载 JavaScript 代码的机制）规范。也就是说，模块必须按照AMD的规定来写。如果模块存在依赖，那么可以直接定义在define()函数之中。如果模块间存在依赖关系那么定义方法如下：　　

//lb模块定义,依赖jquery模块
define(['jquery'], function($) {
var imgs=$(".lb img");//获取图片
var txt=$(".tm span");//文字
var sel=$(".bn li");//小圆点
var len=imgs.length;
var timer = null;
//延时切换图片
function startTime(){
timer = setInterval(function(){
tplb(index);
index++;
if(index==len)
{
index=0;
}
},3000);
}
//停止延时切换
function stopTime(){
if(timer){
clearInterval(timer);
}
}
function tplb(n){
txt.eq(n).fadeIn(10).siblings("span").fadeOut(10);
imgs.eq(n).fadeIn(20).siblings("img").fadeOut(20);
sel.eq(n).css("list-style-image","url('imgs/b.jpg')").siblings("li").css("list-style-image","url('imgs/a.jpg')");
}
txt.eq(0).fadeIn(10).siblings("span").fadeOut(10);//初始化
imgs.eq(0).fadeIn(10).siblings("img").fadeOut(10);
sel.eq(0).css("list-style-image","url('imgs/b.jpg')").siblings("li").css("list-style-image","url('imgs/a.jpg')");
//鼠标一上小圆点切换
function mouseSwitch(){
sel.mouseover(function(){
index=$(this).index("li");
tplb(index);
});
}
//当鼠标移动到图片上是，停止切换
function up(){
imgs.mouseover(function(){
stopTime();
});
}
//当鼠标离开时，开启切换
function leave() {
imgs.mouseleave(function(){
startTime();
});
}
return{
startTime:startTime,
mouseSwitch:mouseSwitch,
up:up,
leave:leave
}
});
(3)在main模块中使用requireJS加载使用的模块方法，如项目调用图片轮播实现的方法：

//加载
require(['lb'], function(lb) {
lb.startTime();
lb.mouseSwitch();
lb.up();
lb.leave();
});

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['lb']，即主模块依赖这一个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

项目下载地址：http://pan.baidu.com/s/1ntEDKAd