Zh/Dota 2 Workshop Tools/Panorama/Javascript:zn-cn

Pnorama将Javascript作为编程语言之一以便动态地相应用户输入和游戏事件。客户端上执行的Javascript代码可以和服务器上的代码进行沟通（需要在LUA内执行）。

JS代码API

PanoramaJS的API基本上是大部分Scaleform和ActionScript的API扩展。 

API记录在这里:Dota 2 Workshop_Tools/Panorama/Javascript/API

工作流程

连接起代码

通过'scripts'代码块，Panorama中的XML文件可以参考JS文件。也可以直接在'script' 内包含行内格式的JS代码（只适用于少量代码）。

<root>
	<scripts>
		<!--
			This is a reference to a script file located here:
			content/dota_addons/ADDON_NAME/scripts/custom_game/my_script_name.js
		-->
		<include src="file://{resources}/scripts/custom_game/my_script_name.js" />
	</scripts>
	<script>
		// This is an inline Javascript (XML experts: Panorama automatically wraps your script block inside a CDATA section.)
		$.Msg( "Hello, world!" );
	</script>
	<Panel>
		<!-- (Panel hierarchy goes here.) -->
	</Panel>
</root>

（上述代码会被自动编译到如下目录：game/dota_addons/ADDON_NAME/scripts/custom_game/my_script_name.vjs_c 。也可以用资源编译器手动编译）。

重新加载行为

当板被重新加载的时候，与其相关的JS代码也会被重新执行。重新执行的结果一般都是正常的，不过有些时候也会很奇怪。在一个复杂的UI中进行迭代的时候，最好确保你的代码在重新加载的时候不会出现错误。过期的已登记回调会被自动忽略，所以重新登记它们是不会出错的。不过，当你在动态地创建板时，最好考虑一下这些板在之前的重载时是不是已经创建过了。一点点细心的检查可以大大地加快你的迭代速度。

Panels

创建板

代码的强大功能之一，是它能够动态地创建很多板元素。什么叫动态?看下面这个例子：假设一个多队伍记分板要为每个队伍创建一个子板元素，相应地每个队伍的板又要为每个玩家创建一个子版元素，那么UI就可以“动态”地适应玩家数量和队伍数量，只需要一个XML/CSS/JS 代码来创建一个“例子”。

var parentPanel = $.GetContextPanel(); // the root panel of the current XML context
var newChildPanel = $.CreatePanel( "Panel", parentPanel, "ChildPanelID" );
newChildPanel.BLoadLayout( "file://{resources}/layout/custom_game/new_panel.xml", false, false );

从JS代码中获取CSS属性

很多CSS属性，都可以通过MyPanel.style.property来获取。因为两种语言的语法不同，所以JS代码中的名称和CSS代码中的对应名称是不一样的（在网页设计中也是如此）。不过就算不同，它们也很好认：连字符格式的词语转变成驼峰式（或者相反）即可。比如说，CSS中的background-color相当于JS中的 style.backgroundColor。

$ (dollar符号)

$ global object包含了一些重要的全局常规。

类JQuery选择

在用JQuery的时候，你会发现有些板使用了$( "#PanelID" )这样的代码。但是注意，这种用法目前有着明显的限制,即只能使用单一ID来索引板，而如果没有找到板的话，函数会返回一个null值而不是一个空选，这有可能造成意外的JS代码错误(而且剩下的代码都无法执行了)。

$( "#MyLabel" ).text = "hello";

Msg

For simple logging, use $.Msg() - it supports all Javascript types and any number of arguments. (It will print all the arguments consecutively on a single line.)

// This will print: Hello {"who":"world"}!
$.Msg( "Hello ", { "who": "world" }, "!" );

获取内容板

$.GetContextPanel()会返回当前正在运行的“内容板”（和其他语言内的“this”和“self”很像）。这是加载这段代码的XML文件内的“根”板元素。

<root>
	<script>
		$.GetContextPanel().SetHasClass( "context_panel", true ); // after this it will have both "context_panel" and "root_panel" classes
	</script>
	<Panel class="root_panel">
		<Label text="Hi" />
	</Panel>
</root>

游戏内API

游戏内事件

Javascript可以登记一些函数，在游戏事件被触发的时候响应事件。可以响应的事件包括引擎内置事件和新的Custom Game Events。

    function OnFoo( data ) { $.Msg( "foo_event: ", data ); }
    var handle = GameEvents.Subscribe( "foo_event_name", OnFoo );
    GameEvents.Unsubscribe( handle );

自定义网络传输表

自定义网络传输表用来从服务器向客户端传输一些持续状态。 另见:See: Dota 2 Workshop Tools/Custom Nettables

Best Practices and Javascript Gotchas

"use strict"

我们的JS代码范例使用了["use strict"]功能来增加代码d安全性、稳定性和清晰性。

奇怪的匿名函数That Weird Anonymous Function Thing (IIFE)

在我们的JS代码范例中，你可能会发现很多地方都用到了[Immediately-invoked Function Expression (IIFE)]模式。 In our example Javascript, you may see use of the [Immediately-invoked Function Expression (IIFE)] pattern.

(function () {
	$.Msg( "The panel associated with this javascript just got loaded or reloaded!" );
})();

三等号

如果你对C-系列语言很熟悉的话，你可能会惊奇地发现JS代码里有两种“等于”操作符：“==”和“===”。

更多信息请参阅：[here]或自行于网络搜索。

变量捕获

If you're coming to Javascript from another language, you should know that nested functions capture their enclosing scope by reference, which can lead to unexpected results:

var closures_bad = [];
var closures_good = [];
function create()
{
	for (var i = 0; i < 5; i++)
	{
		closures_bad[i] = function()
		{
			$.Msg( "i = ", i );
		};
		closures_good[i] = (function( j ){return function()
		{
			$.Msg( "i = ", j );
		}}(i));
	}
}

function run()
{
	// prints "5 5 5 5 5" because loop variable 'i' is captured by reference above
	for (var k = 0; k < 5; k++)
	{
		closures_bad[k]();
	}
	// prints "0 1 2 3 4" because each value of loop 'i' is captured by a different function parameter 'j'
	for (var k = 0; k < 5; k++)
	{
		closures_good[k]();
	}
}

create();
run();

Misc

Parnoma中的JS代码由Google V8 Javascript引擎处理执行。