SJS(safe/subset javascript) 是小程序的一套脚本语言,结合 tyml,可以构建出页面的结构。
注意事项
SJS的运行环境和其他JavaScript代码是隔离的,SJS中不能调用其他JavaScript文件中定义的函数,也不能调用小程序提供的API。SJS与JavaScript在语法上并不和JavaScript完全一致。
- SJS 模块
- 变量
- 注释
- 运算符
- 语句
- 数据类型
- 基础类库
- 事件响应
SJS 模块
SJS 代码可以编写在 tyml 文件中的 <sjs> 标签内,或以 .sjs 为后缀名的文件内,每一个 .sjs 文件和 <sjs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
模块导出
一个模块要想对外暴露其内部的私有变量与函数,可以通过模块化语法 module.exports export default exports 导出。
export const message = 'hello tuya'; export const getMsg = (x) => x; // export default export default { message, getMsg, }; // module.exports module.exports = { message, getMsg, };
讯享网
require 函数
在 .sjs 模块中引用其他 sjs 文件模块,可以使用 require 函数。
引用的时候,要注意如下几点:
- 只能引用
.sjs文件模块,且必须使用相对路径。 sjs模块均为单例,sjs模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个sjs模块对象。- 如果一个
sjs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
示例代码
讯享网// /a.sjs export const message = 'hello tuya';
// /b.sjs var a = require('./a.sjs'); console.log(a.message);
讯享网<!-- /page/index/index.tyml --> <sjs src="./b.sjs" module="b" />
控制台输出:
hello tuya
<sjs> 标签
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| module | string | 当前 <sjs> 标签的模块名。必填字段。 |
|
| src | string | 引用 .sjs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。 |
module 属性
module 属性是当前 <sjs> 标签的模块名。在单个 tyml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 sjs 模块名不会相互覆盖。
module 属性值的命名必须符合下面两个规则:
首字符必须是:字母 (a-zA-Z),下划线(_) 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)
示例代码:
讯享网<!--tyml--> <sjs module="foo"> var some_msg = "hello world"; module.exports = { msg : some_msg, } </sjs> <view> {
{foo.msg}} </view>
页面输出:
hello world
上面例子声明了一个名字为 foo 的模块,将 some_msg 变量暴露出来,供当前页面使用。
src 属性
src 属性可以用来引用其他的 sjs 文件模块。
引用的时候,要注意如下几点:
- 只能引用 .
sjs文件模块,且必须使用相对路径。 sjs模块均为单例,sjs模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个sjs模块对象。- 如果一个
sjs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
示例代码:
讯享网// /pages/index/index.js Page({ data: { msg: "'hello world' from js", }, });
<!-- /pages/index/index.tyml --> <sjs src="./../comm.sjs" module="some_comms"></sjs> <!-- 也可以直接使用单标签闭合的写法 <sjs src="./../comm.sjs" module="some_comms" /> --> <!-- 调用 some_comms 模块里面的 bar 函数,且参数为 some_comms 模块里面的 foo --> <view> {
{some_comms.bar(some_comms.foo)}} </view> <!-- 调用 some_comms 模块里面的 bar 函数,且参数为 page/index/index.js 里面的 msg --> <view> {
{some_comms.bar(msg)}} </view>
页面输出:
讯享网'hello world' from comm.sjs 'hello world' from js
上述例子在文件 /page/index/index.tyml 中通过 <sjs> 标签引用了 /page/comm.sjs 模块。
注意事项
<sjs> 模块只能在定义模块的 tyml 文件中被访问到。使用 <include> 或 <import> 时,<sjs> 模块不会被引入到对应的 tyml 文件中。 <template> 标签中,只能使用定义该 <template> 的 tyml 文件中定义的 <sjs> 模块。
变量
SJS 中的变量均为值的引用。
语法规则
- var 与 JavaScript 中表现一致,会有变量提升。
- 支持 const 与 let,与 JavaScript 表现一致。
- 只声明变量而不赋值,默认值为 undefined。
var num = 1; var str = 'hello tuya'; var undef; // undef === undefined const n = 2; let s = 'string';
变量名
命名规则
变量命名必须符合下面两个规则:
- 首字符必须是:字母
(a-z,A-Z),下划线(_) - 首字母以外的字符可以是:字母
(a-z,A-Z),下划线(_),数字(0-9)
保留标识符
与 Javascript 语法规则一致
注释
注释方法和 Javascript 一致,可以使用以下方法对 SJS 代码进行注释:
讯享网// page.sjs // 方法一:这是一个单行注释 /* 方法二:这是一个多行注释 中间的内容都会被注释 */ let h = 'hello'; const w = ' tuya';
运算符
算术运算符
var a = 10, b = 20; // 加法运算 console.log(30 === a + b); //true // 减法运算 console.log(-10 === a - b); //true // 乘法运算 console.log(200 === a * b); //true // 除法运算 console.log(0.5 === a / b); //true // 取余运算 console.log(10 === a % b); //true
加法 + 运算符可用作字符串拼接。
讯享网var a = 'hello', b = ' tuya'; // 字符串拼接 console.log('hello tuya' === a + b); //true
比较运算符
var a = 10, b = 20; // 小于 console.log(true === a < b); //true // 大于 console.log(false === a > b); //true // 小于等于 console.log(true === a <= b); //true // 大于等于 console.log(false === a >= b); //true // 等号 console.log(false === (a == b)); //true // 非等号 console.log(true === (a != b)); //true // 全等号 console.log(false === (a === b)); //true // 非全等号 console.log(true === (a !== b)); //true
二元逻辑运算符
讯享网var a = 10, b = 20; // 逻辑与 console.log(20 === (a && b)); //true // 逻辑或 console.log(10 === (a || b)); //true // 逻辑否,取反运算 console.log(false === !a); //true
位运算符
var a = 10, b = 20; // 左移运算 console.log(80 === a << 3); //true // 无符号右移运算 console.log(2 === a >> 2); //true // 带符号右移运算 console.log(2 === a >>> 2); //true // 与运算 console.log(2 === (a & 3)); //true // 异或运算 console.log(9 === (a ^ 3)); //true // 或运算 console.log(11 === (a | 3)); //true
赋值运算符
讯享网var a = 10; a = 10; a *= 10; console.log(100 === a); //true a = 10; a /= 5; console.log(2 === a); //true a = 10; a %= 7; console.log(3 === a); //true a = 10; a += 5; console.log(15 === a); //true a = 10; a -= 11; console.log(-1 === a); //true a = 10; a <<= 10; console.log(10240 === a); //true a = 10; a >>= 2; console.log(2 === a); //true a = 10; a >>>= 2; console.log(2 === a); //true a = 10; a &= 3; console.log(2 === a); //true a = 10; a ^= 3; console.log(9 === a); //true a = 10; a |= 3; console.log(11 === a); //true
一元运算符
var a = 10, b = 20; // 自增运算 console.log(10 === a++); //true console.log(12 === ++a); //true // 自减运算 console.log(12 === a--); //true console.log(10 === --a); //true // 正值运算 console.log(10 === +a); //true // 负值运算 console.log(0 - 10 === -a); //true // 否运算 console.log(-11 === ~a); //true // 取反运算 console.log(false === !a); //true // delete 运算 console.log(true === delete a.fake); //true // void 运算 console.log(undefined === void a); //true // typeof 运算 console.log('number' === typeof a); //true
三元运算符
讯享网var a = 10, b = 20; // 条件运算符 console.log(20 === (a >= 10 ? a + 10 : b + 10)); //true
逗号运算符
var a = 10, b = 20; // 逗号运算符 console.log(20 === (a, b)); //true
运算符优先级
SJS 运算符的优先级与 Javascript 一致。
语句
if 语句
在 .sjs 文件中,可以使用以下格式的 if 语句 :
- if (expression) statement : 当 expression 为 true 时,执行 statement。
- if (expression) statement1 else statement2 : 当 expression 为 true 时,执行 statement1。 否则,执行 statement2。
- if ... else if ... else statementN 通过该句型,可以在 statement1 ~ statementN 之间选其中一个执行。
示例语法:
讯享网// if ... if (表达式) 语句; if (表达式) 语句; if (表达式) { 代码块; } // if ... else if (表达式) 语句; else 语句; if (表达式) 语句; else 语句; if (表达式) { 代码块; } else { 代码块; } // if ... else if ... else ... if (表达式) { 代码块; } else if (表达式) { 代码块; } else if (表达式) { 代码块; } else { 代码块; }
switch 语句
示例语法:
switch (表达式) { case 变量: 语句; case 数字: 语句; break; case 字符串: 语句; default: 语句; }
default分支可以省略不写。case关键词后面只能使用:变量,数字,字符串。
示例代码:
讯享网var exp = 10; switch (exp) { case '10': console.log('string 10'); break; case 10: console.log('number 10'); break; case exp: console.log('var exp'); break; default: console.log('default'); }
输出:
number 10
for 语句
示例语法:
讯享网for (语句; 语句; 语句) 语句; for (语句; 语句; 语句) { 代码块; }
- 支持使用
break,continue关键词。
示例代码:
for (var i = 0; i < 3; ++i) { console.log(i); if (i >= 1) break; }
输出:
讯享网0 1
while 语句
示例语法:
while (表达式) 语句; while (表达式) { 代码块; } do { 代码块; } while (表达式);
- 当
表达式为 true 时,循环执行语句或代码块。 - 支持使用
break,continue关键词。
数据类型
SJS 目前支持的数据类型、判断类型的方式与 JavaScript 相同。
- 值类型(基本类型):字符串(
String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。 - 引用数据类型:对象(
Object)、数组(Array)、函数(Function)。
基础类库
SJS 目前支持的基础类库与 JavaScript 相同。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/27045.html