require.js結合項目的使用心得

1.首先引入require.js

2.配置config.js文件

var $cdn_url=/'''/''/;----->指定文件一個共用的路徑

require.config({

    baseUrl: $cdn_url + 'cc/v2/publish/',----->設置一個基本路經，方便找到該路徑下的其餘文件，不用每次都輸入相同路徑
    // urlArgs: "bust=" +  (new Date()).getTime(),---->能夠加個時間戳
    paths: {
        'jquery': $cdn_url + 'assets/libs/jquery',---->jquery.js對應的路徑  不須要加.js，require可本身識別
        'datepicker': $cdn_url + 'assets/plugins/datepicker/js/datepicker'---->datepicker.js的路徑
    },

    shim: {
        'underscore': {
            exports: '_'
        },
        'datepicker':{
            deps: ['jquery'],
            exports:'datepicker'
        },
         'daterangepicker':{
            deps: ['jquery','moment'],
            exports:'daterangepicker'
        },
        'mobiscroll':{
            deps: ['jquery'],
            exports:'mobiscroll'
        },
        'select2': {
            exports: 'select2'
        },
        'pagination': {
            deps: ['jquery'],
            exports: 'pagination'
        },
        'calendar': {
            deps: ['jquery'],
            exports: 'calendar'
        },
        'tip': {
            deps: ['jquery'],
            exports: 'tip'
        },
        'dialog': {
            deps: ['jquery'],
            exports: 'dialog'
        },
        'uploader': {
            deps: ['jquery'],
            exports: 'uploader'
        },
        'cropper': {
            deps: ['jquery'],
            exports: 'cropper'
        },
        'jcrop': {
            deps: ['jquery'],
            exports: 'jcrop'
        },
        'validate': {
            deps: ['jquery'],
            exports: 'validate'
        },
        'fancybox': {
            deps: ['jquery'],
            exports: 'fancybox'
        }
    }
});
3.在html文件引入這兩個js文件

<script src="libs/require.js"></script>
<script src="common/js/config.min.js"></script>

4.在js文件使用require

require([
 "jquery",
 "echarts2",
 "dateRangePick",
 "tip",
 $cdn_url+"js/localData.min.js",
 
 $cdn_url+"js/selector.min.js"],function () {
 //這裏可使用你引入的js組件
　　　　　　$('.xxx').html();

}
也能夠定義一個xx.js，其實就是定義一個模塊：

define(
    ['jquery',
        'avalon',
        'echarts/echarts',
        'common/js/fun.min',
        'dialog',
        'echarts/chart/line',
        'echarts/chart/pie',
        'echarts/chart/bar',
        'select2',
        'tip',
        'calendar',
        'areapicker',
        'pagination',], function
        ($,
         avalon,
         echarts,
         Fn) {
　　　　return {

　　　　　　function1:function(option1){},

　　　　　　table:function(option2){},
　　　　　　}

     }
在頁面中使用的時候，就能夠經過require把這個模塊引入到頁面中使用
例如：
<script type="text/javascript">
require(['common/js/fun.min', 'common/js/chart.min', 'js/xx.min', 'echarts/echarts', 'select2', 'echarts/chart/line',], function(Fn, chart, dataCenter, echarts){

    // 視圖  把xx.min.js中的return出來的對象定義名字叫dataCenter。這樣一下就可使用這個對象中的方法table

    var upTable = dataCenter.table({
        selector: '.js-detail', // 表格選擇器
        url: 'xxx', // 更新表格URL
        vm: vmTable, // 表格avalon視圖對象
    });
</script>