分享一下require js的使用经验，零经验学requirejs

首先，requirejs是什么我就不多说了吧，都是老生常谈了吧。可以看一下阮一峰大佬的文章：http://www.ruanyifeng.com/blog/2012/11/require_js.html；

其优点也是颇多，例如一下几点：

1、实现按需加载，通过requirejs，你可以在需要某个js模块的时候再加载。这样就可以避免在初始化页面的时候，有很多的数据请求和数据传输；

2、避免传统的，一个页面上N多个script 标签而引起的依赖关系错误，这样就起到方便管理模块的作用；

3、防止页面阻塞，起到异步加载的作用；

4、方便管理版本控制问题；（后面会体现出来）；

好了，下面用代码说话吧。

不管我们用哪个工具，得先下载吧，点击这里下载requirejs文件：http://requirejs.org/docs/download.html；

很小，大概18k这样。

requirejs的使用方式也很简单

< script src= "./require.js" data-main= './main.js' > < / script >

大家肯定注意到了，这个data-main的这个属性，这个属性的作用就是指定网页程序的主模块。就是我定义的main.js会第一个被requirejs加载，而由于requirejs的默认文件后缀名就是js ，所以我们这里可以把main.js的后缀去掉。

好，下面看一下我的目录结构。。好吧 ，没有结构，我为了省事就直接都放在一个文件夹下面；

我页面需要用到的文件有：first.js math.js  jquery.js 和 style.css ，requirejs加载css文件的模式和js文件不同，我会在最后说；

通俗的写法我们会在页面写三个script标签来引入这三个文件，三个还好。那要是十三个呢。 岂不是很恶心对吧！那下面我们看一下用requirejs怎么来做，终于可以开始了。。

因为我们main.js作为主模块被加载的， 肯定要先配置main.js里都做了些神马。

require.config({

paths: {

'jquery': [ 'http://libs.baidu.com/jquery/2.0.3/jquery'],

},

urlArgs: 'ver=0.1.2', //版本控制

});

require([ 'jquery', 'math', 'first'], function ($, math) {

console.log($)

})

相信大家看到之后，也会明白一些吧。首先path的作用就是设置模块的ID与路径的映射，这样的话，在后面需要用到的这个模块的时候，只需要用模块的ID代替就好了， 这样是不是很方便，不然的话还要写一长串的东西。当然，引入本地打方法是一样的。

第二个urlArgs参数，我也标出来了，就是为了解决版本控制问题，这样你只需要在这个地方改一下版本号，所有的版本号可以自动升级 ，上图说话；

大家看一下，目前所有的版本号都是0.1.2 ，ok 我升级一下

urlArgs: 'ver=0.1.3'

是不是很6，当然还有其他的一些方法去处理这个版本控制问题，大家可以自己查找。

require([ 'jquery', 'math', 'first'], function ($, math) {

console.log($)

})

这里地方，require接收两个参数，第一个参数是数组，就是你所需要的js模块，第二个是个callback回调，当前页面指定的模块都加在成功之后才会被调用。这样的异步加载模块，浏览器不会失去响应，而且这样也解决了依赖性的问题。有木有~

做到这里我已经很兴奋了。感觉好强大！ok，到这里main.js的 配置差不多就这么多，下面我们看一下js 模块里面是怎么写的。

先看一下math.js的内容：

console.log( 'working')

define( function(){

var sum = function(x,y){

return x+y;

}

return{

sum:sum

}

})

以为requirejs加载模块是按照AMD的规范来写的，所以模块必须采用define()的函数来定义，如果你的模块还依赖其他模块呢，要怎么处理的， 比如我们需要jquery，看一下我们是怎么来做的， 我在first.js里做了这件事，大家看一下：

console.log( 'first Work')

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

var inner = function(){

$( 'span').html( '我是first.js生成的内容')

}

inner()

})

在define的第一个参数中，加入你所需的依赖模块，因为我在main.js中 ，定义好了jquery，所以这里直接引用，这样是不是很方便。看一下效果，

如果不引入jquery， 就会报错

好，到这里应该对require的使用方法有所了解了吧。

我们看一下Network：

所需的js文件都有。到这里就算成功了。

下面说一下requirejs如何加载css文件的：

其实requirejs 本身没有实现这个功能的，但是我们可以借助插件：https://github.com/guybedford/require-css。

require-css

配置如下：

在main.js的config中加入一项

map: {

'*': {

'css': 'css'

}

},

这个css.js文件就是我们刚刚下载的文件。

之后再把我们事先写好的css文件require进来，具体代码如下：

require([ 'jquery', 'math', 'first', 'css!style'], function ($, math) {

console.log($)

})

注意：加载css文件的时候，是通过css！‘url’的形式来加载css文件。我的文件是style.css ，所以引入就是'css!style';

这样，css文件也成功加载进来。

而且版本控制也做好了处理。是不是很方便~ 

到此，requirejs的基本使用方法就是专业，动起来写代码试试吧。。。

是什ok，我目前对requirejs的理解大概就是这样，以后再深入研究一下，如果有说的不对的地方，希望大佬们指正！