JDS 介绍

jds 介绍

使用方式：jds 代码可以编写在 jxml 文件中的 <jds> 标签内，或以 .jds 为后缀名的文件内。

模块

每一个<jds> 标签和 .jds 文件都是一个单独的模块。

每个模块都有自己独立的作用域，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

<jds> 标签

module 属性

module 属性是当前 <jds> 标签的模块名。在单个 jxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 jds 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则：

• 首字符必须是：字母（a-zA-Z），下划线（_）
• 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

在 jxml 文件中的 <jds> 标签内编写JDS：

示例代码：

<!--jxml-->

<jds module="wel">
var msg = "hello world";
module.exports = {
  msg : msg,
}
</jds>
<view> {{wel.msg}} </view>

页面输出：

hello world

上面例子声明了一个名字为 foo 的模块，将 some_msg 变量暴露出来，供当前页面使用。

src 属性

src 属性可以用来引用其他的 jds 文件模块。

引用的时候，要注意如下几点：

• 只能引用 .jds 文件模块，且必须使用相对路径。
• jds 模块均为单例，jds 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 jds 模块对象。
• 如果一个 jds 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

示例代码：

// /pages/index/index.js

Page({
  data: {
    msg: "'hello wrold' from js",
  }
})

<!-- /pages/index/index.jxml -->

<jds src="./../comm.jds" module="wel"></jds>
<!-- 也可以直接使用单标签闭合的写法
<jds src="./../comm.jds" module="wel" />
-->

<!-- 调用 some_comms 模块里面的 bar 函数，且参数为 wel 模块里面的 msg -->
<view> {{some_comms.bar(wel.msg)}} </view>
<!-- 调用 some_comms 模块里面的 bar 函数，且参数为 page/index/index.js 里面的 msg -->
<view> {{some_comms.bar(msg)}} </view>

页面输出：

'hello world' from comm.jds
'hello wrold' from js

上述例子在文件 /page/index/index.jxml 中通过 <jds> 标签引用了 /page/comm.jds 模块。

注意

• <jds> 模块只能在定义模块的 JXML 文件中被访问到。使用 <include> 或 <import> 时，<jds> 模块不会被引入到对应的 JXML 文件中。
• <template> 标签中，只能使用定义该 <template> 的 JXML 文件中定义的 <jds> 模块。

.jds 文件

在 .jds 文件中定义 JDS：

示例代码：

// /pages/comm.jds

var foo = "'hello world' from comm.jds";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};

上述例子在 /pages/comm.jds 的文件里面编写了 jds 代码。该 .jds 文件可以被其他的 .jds 文件 或 JXML 中的 <jds> 标签引用。

module 对象

每个 jds 模块均有一个内置的 module 对象。

属性

• exports: 通过该属性，可以对外共享本模块的私有变量与函数。

示例代码：

// /pages/tools.jds

var foo = "'hello world' from tools.jds";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.jxml -->

<jds src="./../tools.jds" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出：

some msg
'hello world' from tools.jds

require函数

在 .jds 模块中引用其他 jds 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

• 只能引用 .jds 文件模块，且必须使用相对路径。
• jds 模块均为单例，jds 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 jds 模块对象。
• 如果一个 jds 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

示例代码：

// /pages/tools.jds

var foo = "'hello world' from tools.jds";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

// /pages/logic.jds

var tools = require("./tools.jds");

console.log(tools.FOO);
console.log(tools.bar("logic.jds"));
console.log(tools.msg);

<!-- /page/index/index.jxml -->

<jds src="./../logic.jds" module="logic" />

控制台输出：

'hello world' from tools.jds
logic.jds
some msg

变量

概念

• jds 中的变量均为值的引用。
• 没有声明的变量直接赋值使用，会被定义为全局变量。
• 如果只声明变量而不赋值，则默认值为 undefined。
• var 表现与 javascript 一致，会有变量提升。

var foo = 1;
var bar = "hello world";
var i; // i === undefined

上面代码，分别声明了 foo、 bar、 i 三个变量。然后，foo 赋值为数值 1 ，bar 赋值为字符串 "hello world"，i只声明变量而不赋值，默认值为 undefined。

变量名

变量命名必须符合下面两个规则：

• 首字符必须是：字母（a-zA-Z），下划线（_）
• 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

保留标识符

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

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

注释

jds 主要有 3 种注释的方法。

示例代码：

<!-- jxml -->
<jds module="sample">
// 方法一：单行注释

/*
方法二：多行注释
*/

/*
方法三：结尾注释。即从 /* 开始往后的所有 jds 代码均被注释

var a = 1;
var b = 2;
var c = "fake";

</jds>

上述例子中，所有 jds 代码均被注释掉了。

方法三 和 方法二 的唯一区别是，没有 */ 结束符。

运算符

基本运算符

示例代码：

var a = 20, b = 40;

// 加法运算
console.log(60 === a + b);
// 减法运算
console.log(-20 === a - b);
// 乘法运算
console.log(800 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(20 === a % b);

加法运算（+）也可以用作字符串的拼接。

var a = '.j' , b = 'ds';


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

一元运算符

示例代码：

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(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, 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;

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(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));
// 逻辑否，取反运算
console.log(false === !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));

运算符优先级

语句

if 语句

在 jds 中，可以使用以下格式的 if 语句 ：

• if (expression) statement ： 当 expression 为 truthy 时，执行 statement。

• if (expression) statement1 else statement2 : 当 expression 为 truthy 时，执行 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 关键词。

数据类型

jds 语言目前共有以下几种数据类型：

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

number

语法

number 包括两种数值：整数，小数。

var a = 10;
var PI = 3.141592653589793;

属性

• constructor：返回字符串 "Number"。

方法

• toString
• toLocaleString
• valueOf
• toFixed
• toExponential
• toPrecision

以上方法的具体使用请参考 ES5 标准。

string

语法

string 有两种写法：

'hello world';
"hello world";

属性

• constructor：返回字符串 "String"。
• length

除 constructor 外属性的具体含义请参考 ES5 标准。

方法

• toString
• valueOf
• charAt
• charCodeAt
• concat
• indexOf
• lastIndexOf
• localeCompare
• match
• replace
• search
• slice
• split
• substring
• toLowerCase
• toLocaleLowerCase
• toUpperCase
• toLocaleUpperCase
• trim

以上方法的具体使用请参考 ES5 标准。

boolean

语法

布尔值只有两个特定的值：true 和 false。

属性

• constructor：返回字符串 "Boolean"。

方法

• toString
• valueOf

以上方法的具体使用请参考 ES5 标准。

object

语法

object 是一种无序的键值对。使用方法如下所示：

示例代码：

var o = {} //生成一个新的空对象

//生成一个新的非空对象
o = {
  'string'  : 1,  //object 的 key 可以是字符串
  const_var : 2,  //object 的 key 也可以是符合变量定义规则的标识符
  func      : {}, //object 的 value 可以是任何类型
};

//对象属性的读操作
console.log(1 === o['string']);
console.log(2 === o.const_var);

//对象属性的写操作
o['string']++;
o['string'] += 10;
o.const_var++;
o.const_var += 10;

//对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);

属性

• constructor：返回字符串 "Object"。

console.log("Object" === {k:"1",v:"2"}.constructor)

方法

• toString：返回字符串 "[object Object]"。

function

语法

function 支持以下的定义方式：

示例代码：

//方法 1
function a (x) {
  return x;
}

//方法 2
var b = function (x) { 
  return x;
}

function 同时也支持以下的语法（匿名函数，闭包等）：

示例代码：

var a = function (x) {
  return function () { return x;}
}

var b = a(100);
console.log( 100 === b() );

arguments

function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性：

• length: 传递给函数的参数个数。
• [index]: 通过 index 下标可以遍历传递给函数的每个参数。
• 示例代码：

var a = function(){
    console.log(3 === arguments.length);
    console.log(100 === arguments[0]);
    console.log(200 === arguments[1]);
    console.log(300 === arguments[2]);
};
a(100,200,300);

属性

• constructor：返回字符串 "Function"。
• length：返回函数的形参个数。

方法

• toString：返回字符串 "[function Function]"。
• 示例代码：

var func = function (a,b,c) { }

console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("[function Function]" === func.toString());

array

语法

array 支持以下的定义方式：

示例代码：

var a = [];      //生成一个新的空数组

a = [1,"2",{},function(){}];  //生成一个新的非空数组，数组元素可以是任何类型

属性

• constructor：返回字符串 "Array"。
• length

除constructor外属性的具体含义请参考 ES5 标准。

方法

• toString
• concat
• join
• pop
• push
• reverse
• shift
• slice
• sort
• splice
• unshift
• indexOf
• lastIndexOf
• every
• some
• forEach
• map
• filter
• reduce
• reduceRight

以上方法的具体使用请参考 ES5 标准。

date

语法

生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。

getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])

参数

• milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数
• datestring: 日期字符串，其格式为："month day, year hours:minutes:seconds"

示例代码：

var date = getDate(); //返回当前时间对象

date = getDate(1500000000000);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)

属性

• constructor：返回字符串 “Date”。

方法

• toString
• toDateString
• toTimeString
• toLocaleString
• toLocaleDateString
• toLocaleTimeString
• valueOf
• getTime
• getFullYear
• getUTCFullYear
• getMonth
• getUTCMonth
• getDate
• getUTCDate
• getDay
• getUTCDay
• getHours
• getUTCHours
• getMinutes
• getUTCMinutes
• getSeconds
• getUTCSeconds
• getMilliseconds
• getUTCMilliseconds
• getTimezoneOffset
• setTime
• setMilliseconds
• setUTCMilliseconds
• setSeconds
• setUTCSeconds
• setMinutes
• setUTCMinutes
• setHours
• setUTCHours
• setDate
• setUTCDate
• setMonth
• setUTCMonth
• setFullYear
• setUTCFullYear
• toUTCString
• toISOString
• toJSON

以上方法的具体使用请参考 ES5 标准。

regexp

语法

生成 regexp 对象需要使用 getRegExp 函数。

getRegExp(pattern[, flags])

参数：

• pattern: 正则表达式的内容。
• flags：修饰符。该字段只能包含以下字符:
  • g: global
  • i: ignoreCase
  • m: multiline。

示例代码：

var a = getRegExp("x", "img");
console.log("x" === a.source);
console.log(true === a.global);
console.log(true === a.ignoreCase);
console.log(true === a.multiline);

属性

• constructor：返回字符串 "RegExp"。
• source
• global
• ignoreCase
• multiline
• lastIndex

除constructor外属性的具体含义请参考 ES5 标准。

方法

• exec
• test
• toString

以上方法的具体使用请参考 ES5 标准。

数据类型判断

constructor 属性

数据类型的判断可以使用 constructor 属性。

示例代码：

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

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

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

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

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

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

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

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

typeof

使用 typeof 也可以区分部分数据类型。

示例代码：

var number = 10;
var boolean = true;
var object = {};
var func = function(){};
var array = [];
var date = getDate();
var regexp = getRegExp();

console.log( 'number' === typeof number );
console.log( 'boolean' === typeof boolean );
console.log( 'object' === typeof object );
console.log( 'function' === typeof func );
console.log( 'object' === typeof array );
console.log( 'object' === typeof date );
console.log( 'object' === typeof regexp );

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

基础类库

console

console.log 方法用于在 console 窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。

Math

属性

• E
• LN10
• LN2
• LOG2E
• LOG10E
• PI
• SQRT1_2
• SQRT2

以上属性的具体使用请参考 ES5 标准。

方法

• abs
• acos
• asin
• atan
• atan2
• ceil
• cos
• exp
• floor
• log
• max
• min
• pow
• random
• round
• sin
• sqrt
• tan

以上方法的具体使用请参考 ES5 标准。

JSON

方法

• stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。
• parse(string): 将 JSON 字符串转化成对象，并返回该对象。

示例代码：

console.log(undefined === JSON.stringify());
console.log(undefined === JSON.stringify(undefined));
console.log("null"===JSON.stringify(null));

console.log("111"===JSON.stringify(111));
console.log('"111"'===JSON.stringify("111"));
console.log("true"===JSON.stringify(true));
console.log(undefined===JSON.stringify(function(){}));


console.log(undefined===JSON.parse(JSON.stringify()));
console.log(undefined===JSON.parse(JSON.stringify(undefined)));
console.log(null===JSON.parse(JSON.stringify(null)));

console.log(111===JSON.parse(JSON.stringify(111)));
console.log("111"===JSON.parse(JSON.stringify("111")));
console.log(true===JSON.parse(JSON.stringify(true)));

console.log(undefined===JSON.parse(JSON.stringify(function(){})));

Number

属性

• MAX_VALUE
• MIN_VALUE
• NEGATIVE_INFINITY
• POSITIVE_INFINITY

以上属性的具体使用请参考 ES5 标准。

Date

属性

• parse
• UTC
• now

以上属性的具体使用请参考 ES5 标准。

Global

属性

• NaN
• Infinity
• undefined

以上属性的具体使用请参考 ES5 标准。

方法

• parseInt
• parseFloat
• isNaN
• isFinite
• decodeURI
• decodeURIComponent
• encodeURI
• encodeURIComponent

以上方法的具体使用请参考 ES5 标准。