目前WEB2.0的apps开发中，一个常见的任务就是通过服务端脚本（或者链接）传递变量给JavaScript，从而影响客户端脚本的执行。
不足为奇，有以下几个方法可以实现这个需求。我们来看看它们的优缺点：
- 在模版中嵌入脚本
- 通过URLs传递变量
- 使用配置脚本
1、在模版中嵌入脚本
这是传递变量最简单的方法，嵌入你的js代码在模版或视图文件，或者任何你想从服务端脚本输出的内容。
下面是一个php示例
1 2 3 4 5 6 7 8 9 10 11 12 | <code><html>
<head>
<script type="text/javascript">
function onload() {
alert('Value from PHP: <?php echo $valueFromPhp; ?>');
}
</script>
</head>
<body onload="onload()">
You'll get an alert with a value from PHP when this page loads
</body>
</html></code> |
示例展示了一个非常简单的函数，只是用来alert一个变量的值。
只要脚本不复杂，用这种方法非常简单，不需要任何js技巧。然而，这种方法不是可复用的代码，因为代码嵌在模版里，你想用在其他地方，只有复制粘贴，复制粘贴….（出现大量重复代码，是非常糟糕滴事情 ^__^）
2、通过URLs传递变量
许多服务端脚本通过 GET 或 POST 变量传值给脚本。但是，由于JavaScript的限制，没办法读取POST数据使用。并且也没有任何内置的方法让你很容易的获得GET数据，但，它是可以实现滴。
由于JavaScript可以看到当前网页的完整网址，你可以创建一个脚本从网址中手动解析你想得到的变量。
下面是个简单的从URL中提取参数的函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function getQueryParameters() { var query = window.location.href.split('?')[1]; //query won't be set if ? isn't in the URL if(!query) { return { }; } var params = query.split('&'); var pairs = {}; for(var i = 0, len = params.length; i < len; i++) { var pair = params[i].split('='); pairs[pair[0]] = pair[1]; } return pairs; } |
使用上面的函数，你将获得一个js对象，包含URL中的每一个GET参数。和php中的$_GET非常相似。
使用这种js解析URL的好处是你可以做个独立的页面而不需要服务器端的语言设置任何参数。
3、使用配置脚本
这是最先进的方法。有点像第一种方法，因为你需要嵌入一些代码在你的模版中。
有两种类型的配置：
- 使用全局变量，在配置参数的代码中定义一些变量，并…
- 通过方法调用配置，
如果你用过dojo，你可能熟悉第一种风格，在dojo中，你可以通过创建一个djConfig变量配置一些设置。
第一种方法更容易使用，你的代码将尝试读取用来设置的全局变量，如果它已经定义了。然后这种方法不是没有问题，如你所知，全局变量不是什么好事，它肯定影响其他脚本或者被意外的发生变化。
第二种方法，你需要更多的思考你的js代码，但是它让你的js代码更容易复用和更佳灵活。
基本思想就是让你的代码成为js对象，并允许它创建新的对象实例或通过下面的方式调用对象的函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var configurableObject = { someFunc: function() { /* does something */ }, setOptions: function(config) { /* save configurations from config here */ } }; configurableObject.setOptions({ foo: 'bar', baz: 'asd' }); //Or like this: var newableObject = function(config) { /* save configurations from config here */ }; newableObject.prototype = { someFunc: function() { /* does something */ } }; var o = new newableObject({ foo: 'bar', baz: 'asd' }); |
这种方法主要是可以让你的js代码放在一个独立的文件中。在你需要使用的页面包含进来，设置了你所需要的配置。这种代码更容易复用和维护，你可以在任何地方使用它而不依赖于URLs中的变量或全局变量。。。
结论
使用三种方法你可以做相当多的事。第一种方法最简单，适合快速搞定某些事，但是它不够整洁。第二种方法介于第一种和第三种之间，但是它可重复利用性受到了限制。如果你需要重复利用代码，第三种方法最好，但它也是最复杂滴。
