javascript - 将数据从服务器端传递到 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>';

?>

如您所见，我使用“公共(public)方法”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 代码中提供“公共(public)方法”？或者，在提供全局变量的 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，会有很多人帮助您找到最佳解决方案。