backbone与require的共存问题解决

如果向下面那样直接列出script标签可能会出现错误，

 

    <script type="text/javascript" src="/dep/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/dep/underscore-1.6.0.min.js"></script>
    <script type="text/javascript" src="/dep/backbone-1.1.2.js"></script>
    <script type="text/javascript" src="/dep/require-2.1.11.min.js"></script>

　　

原因有两点：

1、backbone中有define等关键字

2、js的加载与执行顺序是无序的，所以有可能require先加载执行使backbone

 

解决方案：

第一步：配置require.config

 

        require.config({
            baseUrl: '/src/',
            paths:{
                underscore: '/dep/underscore-1.6.0.min',
                jquery: '/dep/jquery-1.11.1.min',
                backbone: '/dep/backbone-1.1.2.min'
            },
            shim: {
                'backbone': {
                    deps: [
                        'underscore',
                        'jquery'
                    ]
                }
            }
        });

 

第二部：require入口模块 

        require(['enter'], function(main){
            main.enter();
        });

最后一步：在入口模块中依赖backbone

define(['backbone'], function (backbone) {

    // 异步加载某模块，可在此处做一些路由处理
    var enter = function(model){
        model = model||'helloWorld';
        window.require([model], function(helloWorld){

            var $container = $('#main');
            helloWorld.init($container);
        });
    };

    return {
        enter: enter
    };
});

说明：

 

1、以后的业务模块中就不需要依赖backbone了，因为非模块加载已经全局化

2、在其他模块中使用时是Backbone，大写的B啊