将需要配置移动到外部文件

时间:2014-05-30 07:57:27

标签: javascript requirejs

现在在我的标题中我已经得到了这段代码:

<script src="/js/libs/requirejs/requirejs.min.js"></script>
<script>
    require.config({
        baseUrl: "/js/libs",
        paths: {
            jquery: "jquery/jquery-1.11.1.min",
            jqueryUi: "jquery-ui/mapa/js/jquery-ui-1.10.4.custom.min",
            portal: "../dev/portal"
        },
        shim: {
            "jqueryUi": {
                export:"ui" ,
                deps: ['jquery']
            }
        }
    });
    require( ["portal"], function(portal) {
            portal.config={'var': 'value'};
            portal.init();
        }
    );
</script>

我想以正确的方式使用data-main attr:

<script data-main="/js/build/req-init" src="/js/libs/requirejs/requirejs.min.js"></script>
<script>
    require( ["portal"], function(portal) {
            portal.config={'var': 'value'};
            portal.init();
        }
    );
</script>

并将所有require.config移至该文件(/js/build/req-init.js)。

问题是它在根目录中搜索potral.js文件,因为尚未加载数据主文件而且它不知道路径。如何延迟执行require(["portal"])? 由于portal.init(),我需要在HTML中使用portal.config - 变量将使用php定义。

2 个答案:

答案 0 :(得分:2)

我在html5应用程序中应用了不同的模式,将requireJS配置移动到外部文件。

目录结构

{webroot}/
   html/
   js/
      apps/
          conf.js
          main.js
      libs/
          jquery-1.11.1.min.js
          ...

<强> ../ JS /应用程序/ conf.js

var require = {
    baseUrl: "../js",
    paths: {
        app:      "../js/app",
        libs:     "../js/libs",
        jquery:   "libs/jquery/jquery-1.11.1.min",
        jqueryUi: "libs/jquery-ui/mapa/js/jquery-ui-1.10.4.custom.min",
        portal:   "../dev/portal"
    },
    shim: {
        "jqueryUi": {
            export:"ui" ,
            deps: ['jquery']
        }
    }
});

<强> ../ JS /应用程序/ main.js

require( ["portal"], function(portal) {
        portal.config={'var': 'value'};
        portal.init();
    }
);

在html中

<scrip src="/js/app/conf.js"></script>
<script data-main="app/main" src="/js/libs/requirejs/requirejs.min.js"></script>

答案 1 :(得分:2)

诀窍是以稍微不同的格式使用您的配置并在主脚本之前加载它。这是加载&#34;外部&#34;真正可靠的唯一方法。在所有情况下配置:

config.js:

var require = {
    baseUrl: "/js/libs",
    paths: {
        jquery: "jquery/jquery-1.11.1.min",
        jqueryUi: "jquery-ui/mapa/js/jquery-ui-1.10.4.custom.min",
        portal: "../dev/portal"
    },
    shim: {
        "jqueryUi": {
            export:"ui" ,
            deps: ['jquery']
        }
    }
};

REQ-init.js

require( ["portal"], function(portal) {
  portal.config={'var': 'value'};
  portal.init();
});

HTML:

<script type="text/javascript" src="config.js"></script>
<script data-main="/js/build/req-init" src="/js/libs/requirejs/requirejs.min.js"></script>

http://requirejs.org/docs/api.html#config

进一步优化(因为我看到你有一个构建文件夹)我会将config.js与requirejs.min.js(在require之前配置)连接起来以丢失请求