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>