requirejs 基础

引用

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

主模块

// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　// some code here
});

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　// some code here
});

模块的加载

require.config({
　　paths: {
　　　　"jquery": "jquery.min",
　　　　"underscore": "underscore.min",
　　　　"backbone": "backbone.min"
　　}
});

require.config({
　　baseUrl: "js/lib",
　　paths: {
　　　　"jquery": "jquery.min",
　　　　"underscore": "underscore.min",
　　　　"backbone": "backbone.min"
　　}
});

require.config({
　　paths: {
　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　}
});

AMD模块的写法

// math.js
define(function (){
　　var add = function (x,y){
　　　　return x+y;
　　};
　　return {
　　　　add: add
　　};
});

// main.js
require(['math'], function (math){
　　alert(math.add(1,1));
});

define(['myLib'], function(myLib){
　　function foo(){
　　　　myLib.doSomething();
　　}
　　return {
　　　　foo : foo
　　};
});

加载非规范的模块

require.config({
　　shim: {
　　　　'underscore':{
　　　　　　exports: '_'
　　　　},
　　　　'backbone': {
　　　　　　deps: ['underscore', 'jquery'],
　　　　　　exports: 'Backbone'
　　　　}
　　}
});

//Jquery插件
shim: {
　　'jquery.scroll': {
　　　　deps: ['jquery'],
　　　　exports: 'jQuery.fn.scroll'
　　}
}

require.js插件

//domready插件，可以让回调函数在页面DOM结构加载完成后再运行
require(['domready!'], function (doc){
　　// called once the DOM is ready
});

//text和image插件，则是允许require.js加载文本和图片文件
define([
　　'text!review.txt',
　　'image!cat.jpg'
　　],
　　function(review,cat){
　　　　console.log(review);
　　　　document.body.appendChild(cat);
　　}
);

api

require.js的诞生，就是为了解决这两个问题：

1. 实现js文件的异步加载，避免网页失去响应。
2. 管理模块之间的依赖性，便于代码的编写和维护。

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

不能加type="javascript"？？？

data-main属性的作用是，指定网页程序的主模块。

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    //...
});

require.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。

require.config({
    //baseUrl: "http://apps.bdimg.com/libs",//基目录
    //配置那些不在baseUrl下的模块，这个指定的path假定是baseUrl的相对路径，若是以/开头的话就不是了
    paths: {
        "jquery": "http://apps.bdimg.com/libs/jquery/2.1.4/jquery",
        "underscore": "http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min",
        "backbone": "http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone-min",
        //"math":"math"
    },
    //加载非规范的模块
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'], //表明该模块的依赖性
            exports: 'Backbone' //输出的变量名,表明这个模块外部调用时的名称
        }
    }
});

math.js

define(["jquery"], function ($) {
    //依赖于jquery的写法
    var add = function (x, y) {

        return x + y;

    };
    return {

        add: add
    };
});

使用math

require(['math'], function (math) {
    alert(math.add(1, 1));
});

require.js加载的模块，采用AMD规范

插件