媒介

提到require.js大多数人会说提到模块化开辟，AMD等等，实在require.js并没有这么多庞杂的观点，这里我就愿望消除这些观点，从有用的角度来简朴说一下require.js是干什么的，我们要怎样用它。

1.为何要用require.js

大多数前端开辟者都用过jquery，那末用jquery之前我们起首要把jquery加载进页面，然后在以后的js当中才能够运用$,这内里我们知道了两个原理，一个是我们不能把一切js代码都放到一个文件里，有些东西能够零丁提出来成为一个模块，比方jquery。别的一个原理，一部份js是依靠另一部份js的，比方$依靠jquery文件的载入。实在require.js重要做的事变就是这两点。

当你的js项目充足大，充足庞杂，依靠的库充足多，你完整须要如许一种东西去做这些js的治理，不然你的项目扩展性很差，构造很蹩脚，要找到想修正的处所会很难题。

实在其他许多编程言语都已经在代码里完成了相似的功用，比方这段python

import web

db = web.database(dbn='sqlite', db="todos.db")

很好明白，我们导入了web对象，然后就能够在接下来的代码里运用web.database

2.怎样用require.js？

起首页面要载入require.js，这个没办法用它本身依靠

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

既然运用require这类形式的目标是把文件分割成可明白的小块，那末我们的js文件也要分割成一个一个部份，称之为模块，官方api实例中的目次构造是如许的：

• www/
  • index.html
  • js/
    • app/
      • sub.js
    • lib/
      • jquery.js
      • canvas.js
    • app.js

这里是一个app运用，然则一般页面开辟也能够自创的是这个观点，就是把js依据功用和目标分开放，库文件放到一同，子模块放到一同，进口js再来选择性载入。
这里注重一下，模块化开辟的目标是轻易开辟者明白和进步效力，假如读者以为没有必要完整则不须要硬去这么做，为了运用什么观点或许要领反而增加了开辟本钱的事变不要做。

定义模块

jquery这类的库文件先不提，我们说本身怎样定义一个模块，就是sub.js文件里

//定义对象
define({
    color: "black",
    size: "unisize"
});

//定义要领
define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

假如我们定义的东西内里有依靠，比方用到jquery，我们能够如许

define(["../lib/jquery"], function($) {

        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                $('.cart-color').append(color)
            }
        }
    }
);

思索一下，这里的观点是如许的，第一个参数，数组里的东西是我接下来要依靠的模块，背面的回调函数的参数，顺次就是前面数组里的对象的通报。

挪用模块

还记得上面谁人目次构造吗，我们依旧摘取官网的实例, app.js是项目标进口，内容以下

require.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        app: '../app'
    }
});

// Start the main app logic.
require(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});

require.config 配置文件，这里定义了baseUrl等

接下来我们require挪用，注重这里是挪用，上面是定义define，不过看到代码发明和之前相似，同样是第一个参数是依靠对象的数组，回调里会实行，参数是之前依靠的对象。

3.举个栗子

实践是检验真理的唯一标准，光看他人实践也没用，本身动手做一遍胜读十年书。我本身写了一个简朴的例子，读者假如感兴趣也能够本身写一个

我有一个中心模块，我把他叫做sth，这个模块放在 sth.js 内里，以下

define(function(require){
    var p1 = require('part/part1');
    var p2 = require('part/part2');
    return {
        f1: p1.doSome,
        f2: p2.doOther
    }
})

这内里require了别的两个子模块，part1和part2，并把他们的要领拿出来放到中心块内里而且返回
我们来看下part1，part2长啥样，起首他们都是part1.js 和part2.js文件，require.js里以为你载入的都是js剧本文件，所以一致省略.js

//part1.js
define(function(){
    return {
        doSome: function(){
            console.log('doSome')
        }
    }
})

//part2.js
define(function(){
    return {
        doOther: function(){
            console.log('doOther')
        }
    }
})

然后我们在主文件里，比方index.html,main.js…挪用 sth

require(['sth','check'],function(sth,check){
    if(check.ok){
        sth.f1()
    }else{
        sth.f2()
    }
})

我们假定这里另有别的一个check对象，假如check为真则实行sth.f1
,不然实行sth.f2 想一下，f1，f2现实上是在两个文件内里。

这里只是我虚拟一个假的例子，现实运用中要依据本身的现实需求去设想构想本身的项目，再次提示，不要为了用而用。

末了

好了骚年们，对require.js感兴趣了吗，那就去这里猖獗的看吧
http://requirejs.org/