require笔札

基于学习的开始，以下内容全部摘录RequireJS中文网，先熟悉一下api。

1，加载Javascript文件

RequiresJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。

可以用它来加速、优化代码，但其主要的目的还是为了代码的模块化。它鼓励在使用脚本时以

module ID替代URL地址。

RequireJS以一个相对于baseURL的地址来加载所有的代码。页面顶层<script>标签含有一个

特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到于该属

性相一致的目录。下列示例中展示了baseUrl的设置：

<!--This sets the baseUrl to the "scripts" directory, and loads a 
script that will have a module Id of "mian" -->
<script data-main="scripts/main.js" src="scripts/requires.js"></script>

　　baseUrl亦可以通过RequireJS config手动设置。如果没有显式指定config及data-main,则

默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。

 

　　RequireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上再加".js"后缀，

RequireJS在进行module ID到path的解析时会自动补上后缀。你可以通过paths config设置

一组脚本，这些有助于我们在使用脚本时码更少的字。

　　有时候你想避开"baseUrl + paths" 的解析过程，而是直接指定加载某一个目录下的脚本。

此时可以这样做：如果一个module ID 符号下述规则之一，其ID解析会避开常规的"baseUrl + 

paths" 配置，而是直接将其加载为一个相对于当前的HTML文档的脚本：

1，以 ".js" 结束；

2，以 "/" 开始；

3，包含URL 协议，如"http:" or "https"。

 

一般来说，最好还是使用baseUrl及"paths" config去设置 module ID。它会给你带来额外的

灵活性，如便于脚本的重命名、重定位等。同时，为了避免凌乱的配置，最好不要使用多级嵌套

的目录层次来组织代码，而是要么将所有的脚本都放置到baseUrl中，要么分置为项目库/第三方

库的一个扁平结构，如下：

    .  www/

　　　　　 ．index.html

　　　　　 .js/

　　　　　　　　. app/

　　　　　　　　　　.sub.js

　　　　　　　　.lib/

　　　　　　　　　　.jquery.js

　　　　　　　　　　.canvas.js

　　　　　　　　.app.js

　　index.html:

　　

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

　　app.js:

　　

requirejs.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.
    */
    patch: {
        app: '../app'
    }
}

//Start the main app logic.
requirejs(['jquery','canvas','app/sub']);

function( $, canvas, sub ){
    
});

 

理想状况下，每个加载的脚本都是通过define()来定义的一个模块； 但有些“浏览器全局变量注入”型的传统/遗留库

并没有使用define()来定义他们的依赖关系，你必须为此使用 shim config 来指明它们的关系。如果你没有指明依赖

关系，加载可能报错。这是因为基于速度的原因，RequireJS会异步地以无序的形式加载这些库。

 

 data-main 入口点

require.js 在加载的时候回检察data-main属性：

<!--when require.js loads it will inject another script tag 
(with async attribute) for script/main.js-->
<script data-main="scripts/main" src="scripts/require.js"></script>

　　你可以在data-main指向的脚本中设置模板加载选项，然后加载第一个应用模块。注意：你在

main.js中所设置的脚本时异步加载的。所以如果你在页面中配置了其他JS加载，则不能保证它们

所依赖的JS已经加载成功。