通过页面JS实现UI引擎前端页面组件交互

初始页面JS面板

图1 页面JS面板

“页面JS”面板是UI引擎实现前端页面组件交互、事件处理及逻辑复用的核心载体。它主要用于协调页面组件与后台接口的通信，编排事件流程，并响应各种用户操作，从而实现页面所需的功能与交互效果。同一页面内的所有自定义函数（方法）均统一存储在对应页面的JS面板中，可被组件事件绑定、页面生命周期调用等开发场景直接调用，实现逻辑的集中管理与复用。

此外，该面板还具备智能代码补全能力：在编写代码时，键入特定字符后，界面将会自动给出代码提示，可辅助快速构建代码，有效提升开发效率。

图2 智能代码补全

约束与限制

使用“页面JS”功能需遵循以下规则，避免出现语法错误或功能异常：

• 能力要求：页面JS需手动编写JavaScript代码，使用者需具备编写JS编程能力。
• 函数定义规范：仅支持使用“function”关键字声明函数（声明式函数），不支持“const/let”等变量关键字定义的函数表达式（如“const fn = () => {}”）。
• 代码作用域限制：面板内不可在函数外部定义变量，也不支持使用“import”语句引入外部资源。
• 上下文访问规则：访问页面状态（state）、应用状态（store）及同级函数时，必须通过“this”关键字调用（如“this.state.name”、“this.otherFn()”）。

页面JS中状态变量的使用

在页面JS开发中，状态变量的修改通常需依据业务逻辑或服务端返回数据进行。UI引擎将状态变量划分为“页面状态变量”和“应用状态变量”两类，两者的适用范围和使用方式有所不同，具体差异请参见了解UI引擎状态管理。

状态变量的读写操作均需在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引擎资源管理。

页面生命周期方法创建与使用

在前端项目开发中，UI引擎提供统一的方法管理机制，支持在组件事件和页面生命周期两种场景下灵活调用。两种应用模式共享相同的创建流程，仅在触发机制上存在差异。

示例对比：

• 组件事件绑定

  假设需要为一个按钮绑定单击事件：

  // 定义方法
  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 事件包含多个参数方法示例

• 使用ES6的剩余参数语法

  通过剩余参数语法（...args），可以捕获所有传递的参数并以数组形式存储，从而灵活处理多个参数。

• 增加方法的形参数量

  根据组件事件的实际参数数量，手动扩展方法的形参列表，以便逐一接收每个参数。

页面JS面板可拖动调节宽度

页面JS面板的默认宽度可能无法满足代码编写的实际需求，为提升开发体验，您可以根据实际需要手动调整面板宽度，最大支持调整至约1000px。具体操作步骤如下：

1. 将鼠标悬停在页面JS面板的右侧边框上。当鼠标指针变为图4所示的双向箭头样式时，面板右侧的边框会同步高亮显示为蓝色，表明已进入可调节状态。
   图4 调整面板宽度
   

2. 按住鼠标左键不松开，左右移动鼠标以拖动边框，从而设置所需的面板宽度。
3. 松开鼠标左键，宽度设置完成。

页面JS面板常用快捷键

为提升代码编写效率，页面JS面板内置了多项编辑快捷键，具体如下：