require.js的简单使用

全局配置main.js: 

var version = +new Date();
require.config({
    urlArgs: 'v=' + version, 
    // 根路径设置，paths下面全部都是根据baseUrl的路径去设置
    baseUrl: '../addons/ewei_shopv2/static/js/app/',
    paths: {
        // 引入文件的路径
        'jquery': '../dist/jquery/jquery-1.11.1.min',
        'jquery.gcjs': '../dist/jquery/jquery.gcjs',
        'Rx':'../dist/Rx/Rx.min',
        'bridgeSelf':'../dist/bridge/bridge_self',
        'clipboard':'../dist/clipboard.min'

    },
     // 用来配置不兼容的模块，意思是：该模块没有module.exports,
    // jquery就有module.exports输出值
    shim: {
        'foxui':{
             //foxui需要依赖jquery，所以得加deps
            deps:['jquery']
        },
    },
    //map"告诉RequireJS在任何模块之前，都先载入这个模块
    
    waitSeconds: 0
});

　　 

自定义模块:

dist/moduleA.js
define(function() {
   var modal = {};
   modal.init = function(){
       console.log('我是一个独立的模块A');
   }
   return modal;
});

dist/moduleB.js
define(function() {
   var modal = {};
   modal.init = function(){
       console.log('我是一个独立的模块B');
   }
   return modal;
});

dist/moduleC.js
define(['dist/moduleA','dist/moduleB'], function(moduleA,moduleB) {
   var modal = {};
   modal.init = function(){
       console.log('我是引用了moduleA和moduleB的模块C');
       moduleA.init(); //我是一个独立的模块A
       moduleB.init(); //我是一个独立的模块B
   }
   return modal;
});

　　

使用:

 <!--先引入require.js-->
<script src="js/plugin/require.js"></script>
    <!--再引入全局配置-->
<script src="js/main.js"></script>
<script>   
    //用require引入要引入的模块，[]：已经在main.js里面的Paths设置好了的可以直接引用名称,例如jquery和Rx
    //function（），小括号里面对应[]里面值，按顺序在()给变量名
    require(['jquery','Rx','dist/moduleC'],function ($,'Rx','moduleC') {
       moduleC.init();
       /*moduleC.init()运行结果*/
       //我是引用了moduleA和moduleB的模块C
       //我是一个独立的模块A
       //我是一个独立的模块B
       
       console.log($('.rechargeInput').val()); // jquery方法
       Rx.Observable.fromEvent($('#rechargeInput'), 'input'); //rxjs方法
    })
</script>