Question

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

将它注入打开Javascript应用程序的基本模板？专门为此目的的API请求？

很想听别人用过的解决方案。谢谢！

Answer 1

您可以在<script>中呈现body代码，定义模块并以您喜欢的任何方式将您的网址放在那里。
之后，您可以在模块中使用它（.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);
});

DEMO

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

在您的布局中：

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

DEMO

在Javascript应用程序中维护服务器端API URL

1 个答案: