requirejs——基础

一、requirejs存在的意义：

我们引用外部JS文件通常是这样引用的：

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>

这种方式的弊端在于

1、加载文件是同步加载，即加载完 1.js,再去加载2.js;导致加载时间过长；
2、有些文件不一定需要加载；要根据内容具体内容决定加载哪些文件，传统方式会导致加载无用文件；

　　而requirejs则可以解决这些问题。requirejs对外开放的接口：

1、requirejs/require: requirejs=== require ，用来配置requirejs；在入口模块中加载其他模块。
2、define: 定义一个非入口模块。

requirejs的使用流程：

1、利用define函数定义模块；
2、引用requirejs文件；并通过 data-main 属性指定入口模块，requirejs自动加载入口模块；
2、在入口模块(主模块)中利用require函数加载其他模块。

二、requirejs文件的引用：

　　1、在html中引用的方式如下：

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

　　如上，在<script>标签中不仅指定加载的 require.min.js 文件，还指定了 data-main 属性；

　　2、data-main

　　data-main 不是<script> 标签的属性，是 requirejs 要求提供的属性；其用于指定入口模块文件，模块文件实际就是一个js文件，只是按照requirejs要求的格式来写。

　　在这里表示在加载完 require.min.js 文件后马上加载 JS 目录下的 main.js 文件。因为在requirejs 就是用于管理JS文件的，所以默认模块后缀名就是 ".js"，因此data-main="js/main" 等价于 data-main="js/main.js" 但是我们最好不要加上后缀名，这个后续会说。

三、定义入口模块：

1、关于入口模块：

入口模块就是引用外部js的入口，一个模块可以依赖其他模块；例如上面的 main.js 入口模块文件书写格式为：

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

整个文件内容就是一个 require 函数，参数如下：

第一个参数为数组，表示依赖的模块，如 'moduleA' 表示模块名，在此也表示 moduleA.js 文件。
第二个参数为方法，表示加载完依赖模块之后所执行的方法。每一个依赖的模块都可以传递一个任意类型的参数给当前模块的回调函数；

require函数的作用就是载入其他的模块，并且根据模块返回值作为回调函数的参数；require函数在执行加载依赖模块时，采用异步加载。不会阻塞当前页面的执行。

四、定义其他模块：

使用requirejs时，除了入口模块，还有很多被入口模块所依赖的其他模块，所不同的是入口模块采用require函数定义，其他模块采用define函数定义：

例如 moduleA.js 文件格式如下：

define(["cart"], function(cart) {
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

　　普通模块的定义方式通常是采用 define 函数定义的，其参数如下：

1、数组参数：依赖的其他模块；
2、方法，方法内返回一个object，作为一个参数传给入口模块。

五、requirejs配置信息：

通常 require.config()就写在主模块（main.js）的头部，其作用域是全局的，对所有模块都有影响。格式如下：

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

requirejs(['jquery', 'canvas', 'app/sub'],function   ($,canvas,sub) {
    //some code
});

由于requirejs===require 所以上述代码可以改成如下：

require.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

require(['jquery', 'canvas', 'app/sub'],function   ($,canvas,sub) {
    //some code
});

requirejs是通过使用 require.config() 方法来定义配置信息的。以一个对象为参数，对象主要包括以下信息：

1、baseUrl：所有模块的查找根路径

如：require(['jquery','canvas','app/sub'],function($,canvas,sub) {//some code});中jquery表示的是 js/lib 目录下的jquery模块，即 jquery.js文件。

2、paths：就是一个对象，这个对象的paths属性指定各个模块的加载路径。该路径如果不是以 "/"或者"http"、"https" 开头则其路径是相对于baseUrl而言的,如果没有baseUrl，则是相对于data-main 指定路径而言。

比如 require 函数中的 'app/sub'。表示的是 js/app/sub.js.

用于模块名的path不应含有.js后缀，因为一个path有可能映射到一个目录。路径解析机制会自动在映射模块名到path时添加上.js后缀。


框架比较：http://www.zhihu.com/question/21170137

学习资料：

http://www.3lian.com/edu/2014/02-10/128044.html
http://www.tuicool.com/articles/J3INv2Z

http://www.tiecou.com/2165.html

http://www.cnblogs.com/xing901022/category/658522.html;

http://www.runoob.com/w3cnote/requirejs-tutorial-1.html；

http://www.runoob.com/w3cnote/requirejs-tutorial-2.html

http://requirejs.org/docs/optimization.html;

http://www.ruanyifeng.com/blog/2012/11/require_js.html;

http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html；

http://www.tuicool.com/articles/jam2Anv；

posted @ 2016-01-08 23:37 志在天涯阅读(237) 评论(0) 编辑收藏举报

刷新页面返回顶部