将数据从服务器端传递到 YUI 3 JavaScript 应用程序

Question

我正在努力将我的应用程序从 YUI 2 重写为 YUI 3。

有时我需要 JavaScript 环境中数据库中的一些数据。第一个选择是在 JavaScript 中分配一些全局变量，但是全局变量不好，所以我在 YUI 2 中做了以下操作：

app.js

YAHOO.namespace('MyApp');

    YAHOO.MyApp = function() {

    var currencyRates;
    var userInfo;

    /*
    here a lot of code with event listeners and dom manipulations which uses currencyRates and userInfo variables
    */

    return {
        initCurrencyRates: function(newRates) { currencyRates = newRates; },
        initUserInfo: function(newUserInfo) { userInfo = newUserInfo; },
    }

}();

PHP

<?php
$currencyRates = array('EUR' : 1.3245, 'GBP': 1.4322, 'RUB': 0.02334); //actually it comes from database
print '<script>YAHOO.MyApp.initCurrencyRates(' . json_encode($currencyRates) . ')</script>';

$userInfo = array('Name' => 'Jhon', 'ID' => 10); //actually it comes from database
print '<script>YAHOO.MyApp.initUserInfo(' . json_encode($userInfo) . ')</script>';

?>

正如你所看到的，我使用“公共方法” YAHOO.MyApp.initUserInfo 和 YAHOO.MyApp.initCurrencyRates 将数据传递到 JavaScript 代码中。

现在我要使用 YUI 3 重写它：

app.js

YUI().use('node', 'event', function(Y) {

    var currencyRates;
    var userInfo;

    /*
    here a lot of code with event listeners and dom manipulations which uses currencyRates and userInfo variables
    */

})

PHP

<?php
$currencyRates = array('EUR' : 1.3245, 'GBP': 1.4322, 'RUB': 0.02334); //actually it comes from database
print '<script>???</script>';
?>

如何在我的 YUI 3 JavaScript 代码中提供“公共方法”？ 或者在 JavaScript 应用程序代码中传递数据并提供全局变量的另一种解决方案是什么？

Answer 1

您有几个选择：

1）YUI 沙箱内的代码可以访问沙箱外的变量，因此只需将数据存储在某处并在沙箱代码内引用它即可。这只适用于数据，不适用于调用方法。

请注意，这不涉及任何类型的通知，因此由 YUI 沙箱中的代码来了解数据何时可用。

// PHP
print '<script>YUI.namespace('Env.MyApp.data').currencyRates = ' . json_encode($currencyRates) . ';</script>';

// YUI (inside the YUI().use() callback)
var currencyData = YUI.Env.MyApp.data.currencyData;

从技术上讲，通过这种方法，您可以将数据放在全球可访问的任何地方，并且它会起作用。

2) 使用共享的全局 EventTarget Y.Global（又名 YUI.Env.globalEvents）来广播沙箱内的事件订阅接收到的消息。

这允许您对向页面添加数据做出响应，但如果 PHP 在构建页面标记时生成货币数据，则该功能不起作用，因为这是失败的竞争条件。

// PHP
print "<script>YUI.Env.globalEvents.fire('myapp:data', { currencyRates: " . json_encode($currencyRates) . " });</script>";

// YUI
Y.Global.on('myapp:data', function (e) {
    // the data is in e.currencyRates
});

3) 如果数据打算静态传递，并且 PHP 在 YUI() 调用之前的页面组装期间添加它，只需将其包装在模块中并 use() 即可。

// PHP
print "<script>YUI.add('myapp-currency-rates', function (Y) { Y.namespace('MyApp.data').currencyRates = " . json_encode($currencyRates) . "; });</script>";

// YUI
YUI().use('myapp-currency-rates', … function (Y) {
    // the data is in Y.MyApp.data.currencyRates
});

根据数据传输的时间以及页面与传递数据的 php 之间的关系，您还有其他选择。本周请访问 freenode 上的 #yui，会有很多人帮助您找到最佳解决方案。