requirejs 笔记

index.html

<!doctype html>
<html>
    <head>
        <title>requirejs</title>
        <meta charset="utf-8">
        <script data-main="js/main" src="js/require.js"></script>
    </head>
    <body>

    </body>
</html>

main.js 合并js功能

require.config({
    // baseUrl: 'js/lib', 如果加载的这三个js不和main在一个目录下，就这样配置这个参数，或者直接写网址路径
    paths: {
        underscore: 'underscore.min',
        backbone:'backbone.min',
        jquery: 'jquery-1.9.1.min',
        math :'math'
    },
    /*
        shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输
        出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。
    */
    shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}

　　　　}
/*jQuery的插件可以这样定义
    shim: {

　　　　'jquery.scroll': {

　　　　　　deps: ['jquery'],

　　　　　　exports: 'jQuery.fn.scroll'

　　　　}

　　}
*/

});
 
// require(['jquery'], function($) {
//     alert($().jquery);
// });

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　// some code here
    alert($().jquery);
});
// 如果不依赖其他模块
require(['math'],function(math){
    alert(math.add(1,2))
})
// domready插件，可以让回调函数在页面DOM结构加载完成后再运行。
require(['domready!'], function (doc){

　　　　// called once the DOM is ready

});

/*
    require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，
    上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，
    当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就
    可以使用这些模块。
*/
/* 
    require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块
    都加载成功后，才会运行，解决了依赖性的问题。
 */
/*
    1、data-main属性
    2、require.config方法
    3、require函数 
*/

View Code

math.js 自定的js

// 这种定义 是不依赖其他模块
define(function(){
    var add = function( x , y){
        return x+y ;
    }
    return{
        add : add
    }
});

// 否则 这样定义

// define(['mylib'],function(mylib){
//     function foo(){
// 　　　mylib.doSomething();
// 　}

// return {

// 　　foo : foo

// 　};
// })

View Code