spz-script 脚本

用来写异步 JavaScript 代码。

布局

logic

何时使用

需要用 JavaScript 来实现特殊逻辑时。
需要对数据做处理时。

代码演示

基本用法

脚本默认会放入 Web Worker 中异步执行，不会影响页面其他内容加载。

在脚本中，导出函数才可以被外部使用。导出函数需要用 exportFunction 来导出，它的第一个参数是一个字符串，表示导出函数的名字；第二个参数是导出脚本的哪个函数。

下面的例子中，我们使用自定义脚本来实现输入多个信息，使用一个 spz-render 来渲染输入的信息。

Input： Email: Username: Age:

<spz-script layout="logic" id="custom-script" @setAge="info-result.toggleClass(class='age-class', force=true);">
  const data = {
    email: '',
    username: '',
    age: '',
  };

  function setEmail(event) {
    data.email = event.value;
    return Promise.resolve({});
  }

  function setUsername(event) {
    data.username = event.value;
    return Promise.resolve({});
  }

  function setAge(event) {
    data.age = event.value;
    return Promise.resolve({});
  }

  function getData() {
    return Promise.resolve(data);
  }

  exportFunction('setEmail', setEmail);
  exportFunction('setUsername', setUsername);
  exportFunction('setAge', setAge);
  exportFunction('getData', getData);
</spz-script>

<div class="info-input-wrapper">
  <label>Input：</label>
  <label>
    Email: <input type="text" name="email" @input-debounced="custom-script.execute(func='setEmail', params=event);info-result.render;">
  </label>
  <label>
    Username: <input type="text" name="username" @input-debounced="custom-script.execute(func='setUsername', params=event);info-result.render;">
  </label>
  <label>
    Age: <input type="number" name="age" @input-debounced="custom-script.execute(func='setAge', params=event);info-result.render;">
  </label>
</div>

<spz-render src="spz-script:custom-script.getData" layout="container" id="info-result">
  <template>
    <div class="info-result-wrapper">
      <p>Input Result：</p>
      <div>
        <p>Email: <span>${data.email}</span></p>
        <p>Username: <span>${data.username}</span></p>
        <p>Age: <span>${data.age}</span></p>
      </div>
    </div>
  </template>
</spz-render>

属性

属性名	说明	类型	默认值	是否必需
scope	元素ID，指定某个元素作为Web Worker的执行上下文。当 `spz-script` 脚本中 DOM 操作只涉及一小块整体的元素时，可以设置这一块区域作为执行上下文，其他区域元素不可访问，这有利于提升脚本执行速度	string	`html元素`	否
type	当值为`application/javascript`时，作为普通脚本执行；否则，脚本放入 Web Worker 中异步执行	string	-	否

方法

execute

执行脚本内的函数。

参数名	说明	类型	是否必需
func	要执行的函数名	string	是
params	要传递的参数	Object \| Array \| string	否

事件

[functionName]

当使用 execute 执行函数时，会自动触发与该函数同名的事件。