4. 自定义属性面板（1）基本使用

视频介绍

山海鲸二次开发系列教程：自定义属性面板 大家好，欢迎大家回到山海鲸的二次开发系列教程。

我们前面给大家讲了一个属性的get和set，以及属性的变化之后该如何获取，这些都是针对山海鲸的内置属性的。如果说，我们希望在二开的代码中创建一些自己的属性，我们该怎么做呢？

那么，这就要用到我们的自定义属性面板了。

我们首先来看一下二开文档中的自定义属性面板的基本概念。当我们在extension这个类里面写的任何公开属性，它都会变成一个自定义属性面板。像我们这里的abc，它是一个字符串，那么它就会变成一个输入框。

但是，如果说你不希望它生成属性面板的话，那么就把它定义成私有属性。这个是JS自己的语法，就是加个#即可。当然，我们直接用set、getter，也相当于是公开的，那么它也会生成一个自定义属性面板。

监听变动
我们前面在预定义的内置属性里面，是怎么去监听变动的呢？我们是通过addEventListener，然后optionChange这样一个事件。那么对于我们的自定义属性，我们相对简单一些，我们只需要用onPropertyChanged这样的一个回调函数，就可以去监听它变动了。其中它全参是一个property，这是个字符串类型，它就是直接是你这个属性的名字，它也是个字符串。

自定义属性的种类
我们再看一下自定义属性中一共有多少种自定义属性。我们这里写了12种，这里可能漏掉一种，还有一种是布尔值。这12种有相对简单的，比如说我们今天要讲的数字、字符串还有布尔；也有一些需要我们定义类的，比如说像是向量、下拉、字体、段落、颜色等等。当然还有一些更加复杂的，和我们的软件紧密耦合的，比如组件、数据包括文件等等，调用方式比较复杂的，这个我们会在后面的课程中逐渐去讲。

今天我们先来看一下最简单的3种属性，分别是布尔、字符串和数字。

示例演示
好，我们前面这里再简单的补充一下，就是说我们这边的注释代码中，其实是有相当多的代码的。比如说，我们前面讲的这个addEventListener，它其实是可以直接从这边截注释的。那我们今天的代码，也是可以直接截注释的。

我们这里看到我们有三个，分别是布尔、字符串和数字。我们把它截注释，然后我们回到软件当中，我们刷新一下，就可以看到：这就是字符串的输入，这就是数字的输入，这没有什么，很简单。我们字符上也可以去定义一些英文，比如“hello世界”，或者中文都可以。我们保存一下，我们看一下，这样子它就在里面了。我们内容不仅是内容可以定义成中文，我们这个变量名也可以定义成中文，这样子的话，我们对于一些使用者来说，就会更加友好一些，这样子我们就意思更明确。

好，那我们这个开关该如何调用，就这个开关的值，我们比较简单，就是我们直接在我们先打印一下，我们在这个ready里面去打印一下它，可以看到这个代码提示就可以了。直接list点这个东西，因为它是基本类型，所以它并不是一个类，它直接就是这个类型本身。如果调到这个开关，那么它就是true。保存一下，然后刷新，我们到我们这边看一下，true；如果把它关掉，不用保存，就直接刷新就可以看到是false。为什么这里要点刷新？是因为我们这边是要调用ready方法的，点了刷新之后，它才会再调一次ready方法。

然后我们现在来给大家看一下，我如何用这个开关值，直接去控制这样的一个动画。好，我们只需要把这个动画线截注释，然后if(this.开关)，如果它打开了，那我们就让它动；如果它没有打开，那么我们就让它回来关闭了。我们看一下，这样子的一个代码非常简单，我们只需要去识别一下这个开关就可以了。

好，我们刷新一下。好，这个时候因为它是false，我们打开它，关闭、打开、关闭，这样子就实现了一个非常非常简单的用开关控制这个动画的功能。

但是，我们这样子这个功能完全对吗？其实是有个小瑕疵的。比如说把它移动开，我移动到这里，它就会直接跳回去，这是为什么？因为我们前面讲了，我们update方法是每一帧都会去调用的，所以当我移动开的时候，到这一帧它又会去调用，让它回去，所以这并不是一个很完美的写法。

那，我们怎么才能在开关关闭的那一刹那，把它给跳回来呢？那这个就需要用到我们的onPropertyChanged。我们同样在这里把注释给截掉，截掉之后我们用的就是debug1，我们不是用debug，我们用的是开关。好，当我们这里有开关，并且this.开关 === false的时候，我们再把它放回去。好，这里我们就不开关开的时候我们就动，如果它关的那一刹那那一次，我们就把它放回去。好，我们再刷新一下，我们来看一下。好，我们关闭，放回去