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>
 
 
 

posted on 2016-12-13 11:49  myYouth  阅读(1989)  评论(0编辑  收藏  举报

导航