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>

　　

緣由有兩點：

一、backbone中有define等關鍵字

二、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
    };
});

說明：

 

一、之後的業務模塊中就不須要依賴backbone了，由於非模塊加載已經全局化

二、在其餘模塊中使用時是Backbone，大寫的B啊