支付寶小程序框架 SJS·介紹

SJS（safe/subset javascript）是小程序一套自定義腳本語言，可以在 AXML 中使用其構(gòu)建頁面結(jié)構(gòu)。 SJS 是 JavaScript 語言的子集，與 JavaScript 是不同的語言，其語法并不與 JavaScript 一致，請勿將其等同于 JavaScript。

使用方式

在 .sjs 文件中定義 SJS：

// pages/index/index.sjs
const message = 'hello alipay';
const getMsg = x => x;
export default {
  message,
  getMsg,
};
// pages/index/index.js
Page({
  data: {
    msg: 'hello taobao',
  },
});
<!-- pages/index/index.axml -->
<import-sjs name="m1" from="./index.sjs"/>
<view>{{m1.message}}</view>
<view>{{m1.getMsg(msg)}}</view>

頁面輸出：

hello alipay
hello taobao

注意：

• sjs 中只支持使用 import、export 管理模塊依賴。
• sjs 只能定義在 .sjs 文件中。然后在 axml 中使用 <import-sjs> 標(biāo)簽引入。
• sjs 可以調(diào)用其他 sjs 文件中定義的函數(shù)。
• sjs 是 JavaScript 語言的子集，請勿將其等同于 JavaScript。
• sjs 的運(yùn)行環(huán)境和其他 JavaScript 代碼是隔離的， sjs 中不能調(diào)用其他 JavaScript 文件中定義的函數(shù)，也不能調(diào)用小程序提供的 API。
• sjs 函數(shù)不能作為組件事件回調(diào)。
• sjs 不依賴于基礎(chǔ)庫版本，可以在所有版本小程序中運(yùn)行。

import-sjs 標(biāo)簽

示例代碼：

// pages/index/index.js
Page({
  data: {
    msg: 'hello alipay',
  },
});
// pages/index/index.sjs
function bar(prefix) {
  return prefix;
}
export default {
  foo: 'foo',
  bar: bar,
};
// pages/index/namedExport.sjs
export const x = 3;
export const y = 4;
<!-- pages/index/index.axml -->
<import-sjs from="./index.sjs" name="test"></import-sjs>
<!-- 也可以直接使用單標(biāo)簽閉合的寫法
<import-sjs from="./index.sjs" name="test" />
-->


<!-- 調(diào)用 test 模塊里面的 bar 函數(shù)，且參數(shù)為 test 模塊里面的 foo -->
<view> {{test.bar(test.foo)}} </view>
<!-- 調(diào)用 test 模塊里面的 bar 函數(shù)，且參數(shù)為 page.js 里面的 msg -->
<view> {{test.bar(msg)}} </view>


<!-- 支持命名導(dǎo)出（named export） -->
<import-sjs from="./namedExport.sjs" name="{x, y: z}" />
<view>{{x}}</view>
<view>{{z}}</view>

頁面輸出：

foo
hello alipay
3
4

說明：

name 屬性指定當(dāng)前 <import-sjs> 標(biāo)簽的模塊名。在單個 AXML 文件內(nèi)，建議將 name 值設(shè)為唯一。若有重復(fù)模塊名則按照先后順序覆蓋（后者覆蓋前者）。不同 AXML 文件之間的 <import-sjs> 模塊名不會相互覆蓋。

name 屬性可使用一個字符串表示默認(rèn)模塊名，也可使用 {x} 表示命名模塊的導(dǎo)出。

注意：

• 引用時務(wù)必使用 “.sjs” 文件后綴。
• 若定義了一個 .sjs 模塊，但從未引用，則該模塊不會被解析與運(yùn)行。