# 通过页面JS实现UI引擎前端页面组件交互
#### 初始页面JS面板
图1页面JS面板   
![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501544732.png "点击放大")
"页面JS"面板是UI引擎实现前端页面组件交互、事件处理及逻辑复用的核心载体。它主要用于协调页面组件与后台接口的通信，编排事件流程，并响应各种用户操作，从而实现页面所需的功能与交互效果。同一页面内的所有自定义函数（方法）均统一存储在对应页面的JS面板中，可被组件事件绑定、页面生命周期调用等开发场景直接调用，实现逻辑的集中管理与复用。
此外，该面板还具备智能代码补全能力：在编写代码时，键入特定字符后，界面将会自动给出代码提示，可辅助快速构建代码，有效提升开发效率。
图2智能代码补全   
![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533420035.png "点击放大")
#### 约束与限制
使用"页面JS"功能需遵循以下规则，避免出现语法错误或功能异常：
- **能力要求：**页面JS需手动编写JavaScript代码，使用者需具备编写JS编程能力。
- **函数定义规范**：仅支持使用"function"关键字声明函数（声明式函数），不支持"const/let"等变量关键字定义的函数表达式（如"const fn = () =\> {}"）。
- **代码作用域限制**：面板内不可在函数外部定义变量，也不支持使用"import"语句引入外部资源。
- **上下文访问规则**：访问页面状态（state）、应用状态（store）及同级函数时，必须通过"this"关键字调用（如"this.state.name"、"this.otherFn()"）。
 
#### 页面JS中状态变量的使用
在页面JS开发中，状态变量的修改通常需依据业务逻辑或服务端返回数据进行。UI引擎将状态变量划分为"页面状态变量"和"应用状态变量"两类，两者的适用范围和使用方式有所不同，具体差异请参见[了解UI引擎状态管理](https://support.huaweicloud.com/usermanual-idme/idme_ui_0086.html)。
状态变量的读写操作均需在JS面板中执行，具体语法规则如下：
- **页面状态变量的使用**
  页面状态变量通过"this.state"对象进行访问和修改，分为读取与设置两种操作：
  - 读取页面状态变量
    ```
    // 语法：this.state.状态变量名
    this.state.stateName
    ```
    
  
  - 设置页面状态变量
    ```
    // 语法：this.state.状态变量名 = 目标值
    this.state.stateName = value
    ```
    
   
- **应用状态变量的使用**
  应用状态变量通过"this.stores"对象进行访问和修改，操作方式与页面状态变量一致，也分为读取与设置两种操作：
  - 读取应用状态变量
    ```
    // 语法：this.stores.状态变量名
    this.stores.stateName
    ```
    
  
  - 设置应用状态变量
    ```
    // 语法：this.stores.状态变量名 = 目标值
    this.stores.stateName = value
    ```
    
   
其中，"stateName"为在UI引擎页面设计器的"状态管理"插件面板中定义的具体状态变量名称，"value"为需为状态变量设置的目标值，其类型需与变量定义的类型保持一致。
#### 页面JS中工具类的使用
在页面开发的大多数场景中，工具类（utils）主要在页面JS面板中被调用。通过工具类，可以封装和复用常用的逻辑或功能模块，从而提升代码的可维护性和效率。
在页面JS面板中调用工具类的语法格式如下：
```
this.utils.utilName(...args)
```
其中：
- utilName：需替换为在添加工具时所定义的具体工具名称。
- ...args：表示传递给工具方法的参数，具体参数取决于工具方法的实现。
假设已添加了一个名为"formatDate"的工具方法，用于格式化日期，则可以在页面JS面板中按以下方式调用：
```
const formattedDate = this.utils.formatDate("2023-10-05", "YYYY-MM-DD");
console.log(formattedDate); // 输出：2023-10-05
```
在此示例中，"formatDate"为工具方法的名称，"2023-10-05"和"YYYY-MM-DD"是传递给工具方法的参数。
工具类的定义和管理可在UI引擎页面设计器的"资源管理"插件面板中完成，详情请参见[了解UI引擎资源管理](https://support.huaweicloud.com/usermanual-idme/idme_ui_0091.html)。
#### 页面生命周期方法创建与使用
在前端项目开发中，UI引擎提供统一的方法管理机制，支持在组件事件和页面生命周期两种场景下灵活调用。两种应用模式共享相同的创建流程，仅在触发机制上存在差异。
表1组件事件与页面生命周期对比 
| 场景                                                                          | 操作方式                                                     | 适用场景                      |
|:---|:---|:---|
| [组件事件绑定](https://support.huaweicloud.com/usermanual-idme/idme_ui_0081.html) | 需将自定义方法绑定到组件的具体事件上，通过组件事件的触发实现方法调用。例如：onClick或onChange。  | 适用于需要响应用户交互的场景。           |
| 页面生命周期调用                                                                    | 需将自定义方法直接嵌入页面生命周期函数中，通过生命周期的阶段触发完成方法执行。例如：onLoad或onShow。 | 适用于需要在页面加载或显示时执行初始化逻辑的场景。 |
   
示例对比：
- **组件事件绑定**
  假设需要为一个按钮绑定单击事件：
  ```
  // 定义方法
  function handleButtonClick(event) {
    console.log('按钮被点击了', event);
  }
  // 将方法绑定到按钮的 onClick 事件
  this.bindEvent('buttonId', 'onClick', handleButtonClick);
  ```
  
- **页面生命周期调用**
  假设需要在页面加载时初始化数据：
  ```
  // 定义方法
  function initializePageData() {
    this.state.data = fetchDataFromServer();
  }
  // 在页面生命周期函数中调用方法
  this.onLoad(initializePageData);
  ```
  
 
#### 方法参数
在为页面组件绑定事件方法时，UI引擎会自动在方法中插入一个名为"event"的参数变量。该参数的具体值取决于所绑定组件的事件类型及其参数定义。
如果采用"组件事件绑定"的开发模式，即便定义方法时声明了自定义参数（无论单个或多个），当将方法绑定到组件事件后，原有的参数列表都会被重置，仅保留"event"这一个参数。
默认注入的"event"参数，其取值主要分为以下三种场景：
- **事件无内置参数**：如"click"这类原生浏览器事件，"event"参数对应浏览器原生提供的事件对象。
- **事件含单个内置参数**："event"参数直接映射为该事件自身提供的唯一参数。
- **事件含多个内置参数**："event"参数仅获取事件提供的第一个参数。
当UI组件的事件包含多个参数时，需在方法绑定到组件后对参数进行调整，具体可通过以下两种方式处理：
图3事件包含多个参数方法示例   
![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501620190.png "点击放大")
- **使用ES6的剩余参数语法**
  通过剩余参数语法（...args），可以捕获所有传递的参数并以数组形式存储，从而灵活处理多个参数。
  
- **增加方法的形参数量**
  根据组件事件的实际参数数量，手动扩展方法的形参列表，以便逐一接收每个参数。
  
 
#### 页面JS面板可拖动调节宽度
页面JS面板的默认宽度可能无法满足代码编写的实际需求，为提升开发体验，您可以根据实际需要手动调整面板宽度，最大支持调整至约1000px。具体操作步骤如下：
1. 将鼠标悬停在页面JS面板的右侧边框上。当鼠标指针变为[图4]所示的双向箭头样式时，面板右侧的边框会同步高亮显示为蓝色，表明已进入可调节状态。
   
   图4调整面板宽度   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533428699.png "点击放大")
   
   
2. 按住鼠标左键不松开，左右移动鼠标以拖动边框，从而设置所需的面板宽度。
3. 松开鼠标左键，宽度设置完成。
 
#### 页面JS面板常用快捷键
为提升代码编写效率，页面JS面板内置了多项编辑快捷键，具体如下：
表2页面JS面板快捷键 
| 快捷键             | 功能说明           |
|:---|:---|
| Shift + Alt + F | 格式化代码          |
| Ctrl + F        | 查找内容           |
| Ctrl + G        | 跳转到指定行         |
| Ctrl + C        | 复制             |
| Ctrl + V        | 粘贴             |
| Ctrl + X        | 剪切             |
| Ctrl + /        | 注释/取消当前行       |
| Ctrl + Z        | 撤销操作           |
| Ctrl + Y        | 重做操作（即撤销的反向操作） |