脚本定义

JS 能力

• 默认已开启支持 TS 类型声明
• 整体可使用的 JS 语法和能力与 AIP 标准规范一致，限制包括：不支持异步函数、提供了沙盒、不支持 window 全局变量等。详细可参考标准规范中的元概念章节

SFC 脚本

非必须：如未用到脚本，脚本（script 标签内容）部分可为空，不设置 script 标签

SFC 的脚本部分分为两部分，JS 文件导入和 export default 默认导出结构体

导入

导入（import）支持两种形式的导入：导入函数和导入组件

导入函数

导入函数语法与 ES Module 一致，文件指向路径支持 JS 或 TS 文件路径。

基本使用方式：

import { log } from './a.js
import * as a from './a.js'
import { log } from './a'
import * as a from './a.ts'

导入组件

导入组件必须提供完整文件名，且文件后缀需为 aip

基本使用方式：

import Component from './a.aip';

并在 SFC 脚本中默认导出部分声明组件：

components: {
    Component: Component;
}

导出

默认导出结构体包含 components、state、init、effect、methods 这几个属性。

components 自定义组件

• 支持引用其他文件定义的组件，并通过传入的属性通信
• 内部组件可直接访问到外部组件的 state

state

当前组件的状态管理对象，如模版属性中的状态声明所示，支持在模版中直接引用名称，不需要加 state 前缀

init

特殊函数，需要声明在 SFC 导出部分顶层。是当前组件的生命周期方法，页面初始化完成时调用，挂载在当前根节点的 aip-init 上。

如果需要监听 state 值的变化，需要在 init 中声明 $watch 魔法值。

基本使用方法：

export default {
    state: {
        a: 1,
    },
    init() {
        let b = 1;
        this.$watch('a', value => {
            console.log(value + b);
        });
    },
};

effect

特殊函数，声明在 SFC 导出部分顶层。是当前组件的生命周期方法，页面状态更新时调用，挂载在当前根节点的 aip-effect 上

基本使用方式：

export default {
    effect() {
        console.log('effect');
    },
};

methods

• 支持在模版中的事件中调用，或在模版中的生命周期、执行函数返回结果等场景使用
• 在模版中使用直接使用 methods 中声明的方法

在函数或 state 中使用

例如如下样例：

<template aip>
    <div>{{value}}</div>
</template>
<script>
    export default {
        state: {
            value: ''
        },
        init() {
            this.initValue(10)
        }
        methods: {
            initValue(value) {
                this.value = value || 0
            }
        }
    }
</script>

生成的 AIP 标准页面结果为：

<!-- 编译结果 -->
<div
    aip-state="(() => {return { value: '', initValue(value) {this.value = value || 0;}, init() {this.initValue(10);} };})()"
    aip-init="init()"
>
    {{ value }}
</div>

在事件中使用

不推荐：默认可不需要显式调用，也即：仅声明使用到的函数名，不包含函数调用

使用事件对象（$event）时，注意需在模版部分事件调用时声明 $event，且在 methods 部分定义相应参数

<template aip>
    <aip-button (click)="onClick($event)">btn</aip-button>
</template>
<script>
    export default {
        methods: {
            onClick($event) {
                console.log($event);
            },
        },
    };
</script>

复杂的使用方式

例如引用外部文件，声明作用域变量

<!-- entry.aip -->
<template>
    <div>{{value}}</div>
</template>
<script>
    import { afterInit } from './utils.js';
    let a = 1;

    export default {
        state: {
            value: '',
        },
        methods: {
            initValue(value) {
                this.value = value || a;
                afterInit();
            },
        },
    };
</script>

// utils.js
let a = 2;
let afterInit = () => {
    a = 2;
    console.log(a);
};
export { afterInit };

生成的 AIP 标准页面结果为：

<!-- 编译结果 -->
<div
    aip-state="(() => {var a = 2;var afterInit = () => {a = 2;console.log(a);};var a2 = 1;return {value: '', initValue(value) {this.value = value || a2;afterInit();}};})();"
>
    {{value}}
</div>

this 本地变量、方法访问

• 支持访问到外层 state、全局魔法值、当前 state 中的值和 methods 中的方法
• 外部 state 和 AIP 魔法值看作当前作用域内注入变量，需通过 this 访问
• 不可在 state 中使用 this 引用变量
• 当变量命名重复时，内层变量会遮蔽外层变量

基本使用方式：

export default {
    state: {
        a: 1,
    },
    // 生命周期方法
    init() {
        this.a = 2;
    },
    effect() {
        console.log(this.a);
    },
};