前言
在開發支付寶小程式中,會有很多頁面需要對資料進行二次處理再進行展示,而且大部分的處理方法是共用的,而在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 | 引用.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) ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)