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>