首页 > 代码库 > backbone与require的共存问题解决

backbone与require的共存问题解决

2024-07-05 19:15:18   228人阅读

如果向下面那样直接列出script标签可能会出现错误，
 
    <script type="text/javascript" src="http://www.mamicode.com/dep/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/dep/underscore-1.6.0.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/dep/backbone-1.1.2.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/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啊

 


联系
我们