Question

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

有时我在JavaScript环境中需要来自数据库的一些数据。 Firs选项是在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（）调用之前在页面组装期间添加它，只需将其包装在模块中并使用（）它。

// 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，会有很多人帮你找到最适合你的解决方案。

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

1 个答案: