1

我正在构建一个模块化 javascript 应用程序（RequireJS/Backbone），并且正在寻找一些关于将服务器端 URL 传播到 JS 应用程序以用于客户端模板、API 请求等的最佳实践的建议。

将其注入到启动 Javascript 应用程序的基本模板中？专门为此目的的 API 请求？

很想听听其他人使用过的解决方案。谢谢！

4

1 回答 1

0

您可以在 中呈现一个<script>标签body，定义一个模块并以您喜欢的任何方式将您的 URL 放在那里。
之后，您可以在模块（.js 文件）中使用它。

HTML（例如您的应用程序布局）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inline RequireJS define</title>
    </head>
    <body>
        <h1 id="foo-holder"></h1>
        <a id="sign-up-link" href="#"></a>
        <script>
            // This is rendered by your server-side application:
            define('data/config', function(require, exports, module) {
                exports.Url = {
                    HOME: 'https://mysite.com',
                    SIGN_IN: 'https://mysite.com/sign-in',
                    SIGN_UP: 'https://mysite.com/sign-up',
                    LOG_OUT: 'https://mysite.com/log-out'
                };

                exports.foo = 'bar';
            });
        </script>
    </body>
</html>

JavaScript（在您的模块中的某处）：

// This is somewhere in your JavaScript module
require(['data/config'], function(Config) {
    $('#foo-holder').text(Config.foo);
    $('#sign-up-link')
        .text(Config.Url.SIGN_UP)
        .attr('href', Config.Url.SIGN_UP);
});

演示

另一个技巧可以通过某种属性绑定来完成。

在您的布局中：

<a data-url="HOME" href="#">Home</a>
<a data-url="SIGN_IN" href="#">Sign In</a>
<a data-url="SIGN_UP" href="#">Sign Up</a>
<a data-url="LOG_OUT" href="#">Log Out</a>
<script>
    // This is rendered by your server-side application:
    define('data/config', function(require, exports, module) {
        exports.Url = {
            HOME: 'https://mysite.com',
            SIGN_IN: 'https://mysite.com/sign-in',
            SIGN_UP: 'https://mysite.com/sign-up',
            LOG_OUT: 'https://mysite.com/log-out'
        };

        exports.foo = 'bar';
    });
</script>

在您的 JavaScript 文件中：

// This is somewhere in your JavaScript module
require(['data/config'], function(Config) {
    $('a[data-url]').each(function() {
        var $a,
            urlConstant,
            url;
        $a = $(this);
        urlConstant = $a.data('url');
        url = Config.Url[urlConstant];
        if(url) {
            $a.attr('href', url);
        }
    });
});

演示

于 2013-05-11T02:13:58.177 回答