前言

在开发支付宝小程序中,会有很多页面需要对数据进行二次处理再进行展示,而且大部分的处理方法是共用的,而在page对象里处理显然不是很方便,这种场景使用自定义脚本就会方便多了.

概述

SJS(safe/subset javascript)是zhif小程序的一套自定义脚本语言,可以在AXML中使用其构建页面的结构.

特性

1. 只能定义在.sjs文件中.然后在.axml中使用import-sjs引入.
2. 可以调用其他sjs文件中定义的函数.
3. 不等同于javascript,是其子集.
4. 运行环境和javascript代码是隔离的,在sjs中不能调用其他js文件中定义的函数,也不能调用小程序提供的API.
5. sjs函数不能作为组件的事件回调.
6. 不依赖运行的基础库版本,可以在所有版本的小程序中运行

使用示例

在.sjs文件中定义sjs

// /pages/index/index.js
Page({
  data: {
    msg: 'hello taobao',
  },
});

// /pages/hello.sjs
const foo = "'hello alipay' from hello.sjs";
const bar = function(d) {
  return d;
}
export default {
  foo: foo,
  bar: bar
};

// /pages/message.sjs

import hello from './hello.sjs';
const message = 'hello alipay';
const getMsg = x => x;
const test = () => {
   return hello.foo + ' message';
}

export default {
  message,
  getMsg,
  test,
};

在.axml中引用

// /pages/index/index.axml

  
{{m1.message}}{{m1.getMsg(msg)}}{{m1.test()}}

输出:

hello alipay
hello taobao
hello alipay from hello.sjs message

注意:

1. 每一个.sjs文件都是一个独立的模块.
2. 每个模块都有自己独立的作用域,一个模块里面定义的变量与函数,默认为私有的,其它模块不可见.
3. 模块要想对外暴露内部的私有变量与函数,可通过export default或者export{}实现.
4. 模块想要引用另外一个模块里面暴露的函数,可以通过import x  from './x.sjs'实现

引用的时候需要注意以下几点：

1. 只能引用.sjs文件模块，引用时必须加.sjs文件后缀。
2. 如果一个.sjs模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

.sjs语法

变量

示例代码:

var num = 1;
var str = "hello alipay";
var undef; // undef === undefined
const n = 2;
let s = 'string';

规则

变量命名与javascript规则一致。

注意：以下标识符不能作为变量名

delete 
void 
typeof

null 
undefined 
NaN 
Infinity 
var

if 
else 

true 
false

require

this 
function 
arguments
return

for
while
do
break
continue
switch
case
default

数据类型

sjs目前支持如下数据类型：

• string: 字符串
• boolean: 布尔值
• number: 数值
• object: 对象
• function: 函数
• array: 数组
• date: 日期
• regexp: 正则表达式

判断数据类型

sjs提供了两种判断数据类型的方式：constructor与typeof

constructor示例：

const number = 10;
console.log(number.constructor ); // "Number"

const string = "str";
console.log(string.constructor ); // "String"

const boolean = true;
console.log(boolean.constructor ); // "Boolean"

const object = {};
console.log(object.constructor ); // "Object"

const func = function(){};
console.log(func.constructor ); // "Function"

const array = [];
console.log(array.constructor ); // "Array"

const date = getDate();
console.log(date.constructor ); // "Date"

const regexp = getRegExp();
console.log(regexp.constructor ); // "RegExp"

typeof示例：

const num = 100;
const bool = false;
const obj = {};
const func = function(){};
const array = [];
const date = getDate();
const regexp = getRegExp();

console.log(typeof num ); // 'number'
console.log(typeof bool ); // 'boolean'
console.log(typeof obj ); // 'object'
console.log(typeof func ); // 'function'
console.log(typeof array ); // 'object'
console.log(typeof date ); // 'object'
console.log(typeof regexp ); // 'object'

console.log(typeof undefined ); // 'undefined'
console.log(typeof null ); // 'object'

注释

注释和 javascript 一致，可以使用如下方法对SJS的代码注释。

// /pages/comment.sjs

// 方法一：这是一个单行注释

/*
方法二：这是一个多行注释
中间的内容都会被注释
*/
let h = 'hello';
const w = ' alipay';

运算符

算数运算符

const a = 10, b = 20;

console.log(30 === a + b); // 加
console.log(-10 === a - b); //减
console.log(200 === a * b); // 乘
console.log(0.5 === a / b); // 除
console.log(10 === a % b); // 取余

字符串拼接运算符

加法(+)运算符也可以用作字符串拼接，如下：

var a = 'hello' , b = ' alipay';

// 字符串拼接
console.log('hello alipay' === a + b);

比较运算符

var a = 10, b = 20;

console.log(true === (a < b)); // 小于
console.log(false === (a > b)); // 大于
console.log(true === (a <= b)); // 小于等于
console.log(false === (a >= b)); // 大于等于

console.log(false === (a == b)); // 等号
console.log(true === (a != b)); // 非等号
console.log(false === (a === b)); // 全等号
console.log(true === (a !== b)); // 非全等号

逻辑运算符

var a = 10, b = 20;

console.log(20 === (a && b)); // 逻辑与
console.log(10 === (a || b)); // 逻辑或
console.log(false === !a); // 逻辑否，取反运算

位运算符

var a = 10, b = 20;

console.log(80 === (a << 3)); // 左移
console.log(2 === (a >> 2)); // 无符号右移运算
console.log(2 === (a >>> 2)); // 带符号右移运算
console.log(2 === (a & 3)); // 与运算
console.log(9 === (a ^ 3)); // 异或运算
console.log(11 === (a | 3)); // 或运算

赋值运算符

var a = 10;

a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);

一元运算符

var a = 10, b = 20;

// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);

其它

三元运算符

var a = 10, b = 20;

//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));

逗号运算符

var a = 10, b = 20;

//逗号运算符
console.log(20 === (a, b));

运算符优先级

SJS 运算符的优先级与 javascript 一致

语句

分支结构

//if
if (a > 1) b = 3;
if (a > 1)
  b = 3;
if (a > 1) b = 3;
else b = 4;

if (a > 1)
  b = 3;
else
  b = 4;
if (a > 1) {
  b = 3;
}
if (a > 1) {
  b = 3;
} else {
  b = 4;
}
if (a > 1) {
  b = 3;
} else if (a > 2) {
  b = 4;
} else {
  b = 6;
}


//switch

var xx = 10;

switch ( xx ) {
case "10":
  console.log("string 10");
  break;
case 10:
  console.log("number 10");
  break;
case xx:
  console.log("var exp");
  break;
default:
  console.log("default");
}

循环结构

//for

for (var i = 0; i < 9; ++i) {
  console.log(i);
  if( i >= 2) break;
}


//while

var i = 0;
while (i < = 1) {
  console.log(i);
  i++
}

var j = 0;
do {
  console.log(j);
  j++
} while (j <= 1)

基础类库

Global、Number、JSON、Math、esnext、let & const 、箭头函数、更简洁的对象字面量、模版字符串、结构赋值