前言
在开发支付宝小程序中,会有很多页面需要对数据进行二次处理再进行展示,而且大部分的处理方法是共用的,而在page对象里处理显然不是很方便,这种场景使用自定义脚本就会方便多了.
概述
SJS(safe/subset javascript)是zhif小程序的一套自定义脚本语言,可以在AXML中使用其构建页面的结构.
特性
- 只能定义在.sjs文件中.然后在.axml中使用import-sjs引入.
- 可以调用其他sjs文件中定义的函数.
- 不等同于javascript,是其子集.
- 运行环境和javascript代码是隔离的,在sjs中不能调用其他js文件中定义的函数,也不能调用小程序提供的API.
- sjs函数不能作为组件的事件回调.
- 不依赖运行的基础库版本,可以在所有版本的小程序中运行
使用示例
在.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注意:
- 每一个.sjs文件都是一个独立的模块.
- 每个模块都有自己独立的作用域,一个模块里面定义的变量与函数,默认为私有的,其它模块不可见.
- 模块要想对外暴露内部的私有变量与函数,可通过export default或者export{}实现.
- 模块想要引用另外一个模块里面暴露的函数,可以通过import x from './x.sjs'实现
| 属性 | 类型 | 说明 |
| name | String | 当前标签的模块名。必填字段。 |
| from | String | 引用.sjs文件的相对路径。必填字段。 |
引用的时候需要注意以下几点：
- 只能引用.sjs文件模块，引用时必须加.sjs文件后缀。
- 如果一个.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)