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

我正在将我的申请从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; },
    }

}();

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

?>

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

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

?>

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

如何在YUI 3 JavaScript代码中提供“公共方法”？

---

或者，在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;

//PHP
打印“YUI.namespace（'Env.MyApp.data'）。currencyRates=”。json_编码（$currencyRates）；
//YUI（在YUI（）.use（）回调中）
var currencyData=YUI.Env.MyApp.data.currencyData；

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

2） 使用共享的全局事件目标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
});

//PHP
打印“YUI.Env.globalEvents.fire（'myapp:data'，{currencyRates:.json_encode（$currencyRates）。”}）；”；
//尤伊
Y.Global.on（'myapp:data'，函数（e）{
//数据是以e.currencyRates表示的
});

3） 如果数据是静态传递的，并且PHP在调用YUI（）之前的页面组装过程中添加了数据，那么只需将其包装在模块中并使用（）即可

//PHP
打印“YUI.add（'myapp-currency-rates'，function（Y）{Y.namespace（'myapp.data'）.currencyRates=“.json_encode（$currencyRates）。”；}）；”；
//尤伊
YUI（）.使用（'myapp-currency-rates'，…函数（Y）{
//数据位于Y.MyApp.data.currencyRates中
});

---

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

您有几个选择：

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;

//PHP
打印“YUI.namespace（'Env.MyApp.data'）。currencyRates=”。json_编码（$currencyRates）；
//YUI（在YUI（）.use（）回调中）
var currencyData=YUI.Env.MyApp.data.currencyData；

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

2） 使用共享的全局事件目标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
});

//PHP
打印“YUI.Env.globalEvents.fire（'myapp:data'，{currencyRates:.json_encode（$currencyRates）。”}）；”；
//尤伊
Y.Global.on（'myapp:data'，函数（e）{
//数据是以e.currencyRates表示的
});

3） 如果数据是静态传递的，并且PHP在调用YUI（）之前的页面组装过程中添加了数据，那么只需将其包装在模块中并使用（）即可

//PHP
打印“YUI.add（'myapp-currency-rates'，function（Y）{Y.namespace（'myapp.data'）.currencyRates=“.json_encode（$currencyRates）。”；}）；”；
//尤伊
YUI（）.使用（'myapp-currency-rates'，…函数（Y）{
//数据位于Y.MyApp.data.currencyRates中
});

---

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

在过去几天中，我对yui 3进行了大量了解，发现选项2（火灾事件）将非常有用！但您提到，如果出现reca条件，则会失败。如果我在另一个YUI（）中点火是否可以。使用（“…”，…）？最好将页面上的YUI实例数保持在最小值。使用模块，而不是执行

YUI（）。再次使用…

。在过去的几天里，我对yui3做了很多了解，发现选项2（火灾事件）是有用的！但您提到，如果出现reca条件，则会失败。如果我在另一个YUI（）中点火是否可以。使用（“…”，…）？最好将页面上的YUI实例数保持在最小值。使用模块而不是执行

YUI（）。再次使用…

。