将数据从服务器端传递给YUI3JavaScript应用程序

Pass data from server-side to YUI 3 JavaScript application

本文关键字：YUI3JavaScript 应用程序 数据 服务器端      更新时间：2023-09-26

我正在将我的应用程序从YUI2重写为YUI3。

有时我需要一些来自JavaScript环境中数据库的数据。Firs选项是在JavaScript中分配一些全局变量，但全局变量不好，所以我在YUI2:中做了以下操作

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代码中。

现在我用YUI3:重写它

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>';
?>

如何在YUI3JavaScript代码中提供"公共方法"？或者，在JavaScript应用程序代码中传递数据的另一种解决方案是什么？

您有几个选项：

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，会有很多人帮助您找到最佳解决方案。

相关文章：