（三）用less+gulp+requireJs 搭建项目（requireJs）

首先我想说下我在写js时经常遇到的问题，尤其是很大的项目：

1.我一般会把各个功能分块写在各个js文件中：

比如弹出框：

dialog.js

$(document).ready(function(){
   var dialog={
       error_dialog:function(){
           //.....
       }
   }
})

然后在需要的文件中调用

b.js

dialog.error_dialog();

此时会出现如下错误

2.我们经常会在页面上看到这种情况：

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<script type="text/javascript" src="js/b.js"></script>
<script type="text/javascript" src="js/cjs"></script>
<script type="text/javascript" src="js/e.js"></script>
<script type="text/javascript" src="js/ds.js"></script>
<script type="text/javascript" src="js/gsdag.js"></script>
<script type="text/javascript" src="js/wer.js"></script>
<script type="text/javascript" src="js/fa.js"></script>
<script type="text/javascript" src="js/gsd.js"></script>

作为一个完美主义者，你受得了吗？而且这样写会极大降低加载速度

3.如果js加载过慢，会阻塞页面加载

对于以上问题，requireJs是个很好的帮手！！

1.requireJS异步加载模块，不会阻塞页面渲染

2.requireJs实现模块依赖，极大提升开发速度

下面就来试试吧：

1.去官网下载require.js

2.新建入口文件main.js

在页面引入:

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

main.js

require.config({
    baseUrl:'js',
    paths: {
        "jquery": "jquery-1.11.3.min",
        "dialog": "dialog",
        "moduleB": "b"
    }

});


require(['dialog', 'moduleB', 'jquery'], function (dialog, moduleB, $){

});

require()：requireJs基于AMD规范，所以要用require（）来加载依赖。

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

默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。

require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

require.config():可以对模块进行配置。

define():require要求加载的模块必须按照AMD规范

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

:

dialog.js

define(function($_){

       return {
            error_dialog:function(){
                //.....
                console.log($("div").text());
            }
        }

})

b.js

define(function(){
    dialog.error_dialog();
}())

页面运行后会出现以下错误：

因为dialog.js是依赖jquery的，b.js依赖dialog.js;

所以修改整个文件为：

dialog.js

define(["jquery"],function($_){

       return {
            error_dialog:function(){
                //.....
                alert($("div").text());
            }
        }

})

b.js

define(["jquery","dialog"],function($_,dialog){
    console.log(dialog.error_dialog())
})

运行index.html,成功！！

补充：

如果加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

　require.config({
　　　　shim: {

　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

另

require.js还提供一系列插件，实现一些特定的功能。

domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

　require(['domready!'], function (doc){
　　　　// called once the DOM is ready
　　});

注：本文在介绍requireJs的require(),config(),define()功能时,由于语言组织能力较差，摘抄于阮一峰大神的博客！！！！

哈哈~~~见谅