注意:以下文档只适用于TOP接口,请谨慎使用!

文档中心 > 装修市场

JS API

更新时间:2015/09/18 访问次数:85278
注意: 新的文档地址目前可用
注意: 新的文档地址目前可用
注意: 新的文档地址目前可用
注意: 新的文档地址目前可用

。 http://tpap.shopmodule.jaeapp.com/index.html 目前文档中包含KISSY的API部分,此次更新包括了

  1. 全新的地址, 更加符合文档形式, 不只是wiki
  2. 包含了DEMO的演示和源码,copy进入sdk或者在线上即可直接运行(因为demo本身就是运行在sdk和tae环境中的)
  3. 新的组件可以使用并且会逐步更新再这里,比如 imagezoomhttp://tpap.shopmodule.aliapp.com/kissy/1.3.0/components/imagezoom/index.html

最后,只要进行升级了的用户才可以使用此文档。 如何升级

语言相关

数组

建立

通过变量赋值为 [] 来建立一个数组 :

var x=[]; // x 是一个数组

注意数组的下标从 0 开始

获取长度

通过 length 属性来获得 :

var x=[1,2];
   console.log(x.length); // => 2

合并数组

调用 concat 函数产生一个新的合并后的函数 :

var x=[1,2];
   console.log(x.concat([3,4])); // => 1,2,3,4
   console.log(x); // => 1,2

转化为字符串

调用 join 将数组中的元素以分隔符合并为一个字符串

var x=[1,2];
   console.log(x.join(":")); // => 1:2

弹出最后一个元素

调用 pop 弹出数组的最后一个元素并返回

var x=[1,2];
   console.log(x.pop()); // => 2
   console.log(x); // => [1]

添加元素到数组尾部

调用 push 添加新元素到数组尾部

var x=[1,2];
   console.log(x.push(3));
   console.log(x); // => [1,2,3]

倒转数组元素的位置

调用 reverse 来颠倒数组元素的位置

var x=[1,2];
   x.reverse();
   console.log(x); // => [2,1]

弹出数组的第一个元素并返回

调用 shift 弹出数组的第一个元素并返回

var x=[1,2];
   console.log(x.shift()); // => 1
   console.log(x); // => [2]

添加元素到数组头部

调用 unshift 添加新元素到数组头部

var x=[1,2];
   console.log(x.unshift(3));
   console.log(x); // => [3,1,2]

获取子数组

调用 slice 获取数组指定范围的子数组

var x=[1,2,3,4,5,6];
  console.log(x.slice(1,3)); // => [2,3]
  console.log(x); // => [1,2,3,4,5,6]

替换数组元素

调用 splice 将数组的连续元素替换为另外一批元素

var x=[1,2,3,4];
   console.log(x.splice(1,2,5,6)); // => [2,3] ,替换从第1个下标开始的两个数为 5,6,并返回被替换的数组成的数组
   console.log(x); // => [1,5,6,4]

排序

调用 sort 对数组进行排序,默认为从小到大,也可以自定义排序规则

var x=[1,3,2,4];
  console.log(x.sort()); // =>1,2,3,4 . 默认从小到大排序
  console.log(x.sort(function(a,b){return b-a;})); // => 4,3,2,1. 也可从大到小

循环

调用 forEach 对数组进行循环处理。

[1,2,3].forEach(function(i){
   console.log(i); // =>1,2,3
})

索引

调用 indexOf 正向查找某个值在数组中的索引位置

var index = [1,5,3,2,77,88].indexOf(3);

console.log(index); //=> 2

索引

调用 lastIndexOf 反向查找某个值在数组中的索引位置, 与indexOf的方法不同在于开始查找的位置。

var index = [1,5,3,2,77,88].lastIndexOf(3);

console.log(index); //=> 2

循环

调用 map对数组进行循环处理. 类似于forEach,不同的是提供了index 索引的值

var x = ["apple","num","item1","origin"];

x.map(function(item, index){
    console.log(item,index);
});
//结果如下:
//apple 0
//num 1
//item1 2
//origin 3

对数组中每一个元素执行回调函数

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 false,如果发现这个元素,every 将返回 false,如果回调函数对每个元素执行后都返回 true ,every 将返回 true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。

var x = [1,3,5,6,7,8,9];
var flag = x.every(function(a){
    return a > 4;
});
console.log(flag); // => false
var flag2 = x.every(function(a){
    return a > 0;
});
console.log(flag2); // => true 
console.log(x); // =>[1,3,5,6,7,8,9]

对数组中每一个元素执行回调函数

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回true,如果发现这个元素,some 将返回true,如果回调函数对每个元素执行后都返回 false ,some 将返回false。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。

var x = [1,3,5,6,7,8,9];
var flag = x.some(function(a){
    return a > 4;
});
console.log(flag); // => true
var flag2 = x.every(function(a){
    return a < 0;
});
console.log(flag2); // => false 
console.log(x); // =>[1,3,5,6,7,8,9]

对数组中每一个元素执行回调函数

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回true,如果发现这个元素,some 将返回true,如果回调函数对每个元素执行后都返回 false ,some 将返回false。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。

var x = [1,3,5,6,7,8,9];
var flag = x.some(function(a){
    return a > 4;
});
console.log(flag); // => true
var flag2 = x.every(function(a){
    return a < 0;
});
console.log(flag2); // => false 
console.log(x); // =>[1,3,5,6,7,8,9]

过滤数组

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 false,如果发现这个元素,every 将返回 false,如果回调函数对每个元素执行后都返回 true ,every 将返回 true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。

var x = [1,3,5,6,7,8,9];

var newx = x.filter(function(a){

    return a > 4;

});

console.log(x); // => [1,3,5,6,7,8,9]

console.log(newx); // => [5, 6, 7, 8, 9]

对象

建立

通过对变量赋值 {} 建立对象

var x={}; // x 是一个对象

判断属性包含

调用 hasOwnProperty 判断对象是否包含某个属性

var x={ z:1 };
   console.log(x.hasOwnProperty("z")); // => true
   console.log(x.hasOwnProperty("y")); // => false

 

 

函数

建立

通过函数声明或将变量赋值函数表达式创建一个函数

function x(){} // 通过函数声明创建函数
   var y=function(){}; // 通过函数表达式创建函数

调用

通过函数名加()传入参数后调用相关函数

function x(a,b){return a+b;}
   x(1,2); // => 3

指定this调用

调用函数的 call/apply 可以指定函数内的 this 值 ,call 传参和普通调用一致,apply 则需要传入参数数组.

function x(c){return this.a+this.b+c;}
   x.call({a:1,b:2},3); // => 6 , 参数列表可直接传递
   x.apply({a:1,b:2},[3]); // => 6 , 参数列表需要包装为数组

字符串

建立

通过变量赋值 " 包裹的字符串创建

var x="123"; // => x 为包含 123 的字符串

注意:字符串的字符下标从 0 开始.

从unicode中产生

调用 String.fromCharCode 从给定的 unicode 数值得到包含一个字符的字符串

var x=String.fromCharCode(65); // => "A"

得到指定下标的字符

调用 charAt 得到包含指定下标的字符的字符串

var x="abc".charAt(0); // => "a"

得到指定下标的字符的unicode值

调用 charCodeAt 得到指定下标的字符的unicode值

var x="ABC".charCodeAt(0); // => 65

合并字符串

通过 + 操作符合并两个字符串

"abc"+"123" // => "abc123"

查找子串的首次出现位置

调用 indexOf 获取子串的首次出现位置

"a123bc123de".indexOf("123") // => 1

查找子串最后一次出现位置

调用 lastIndexOf 获取子串的末次出现位置

"a123bc123de".lastIndexOf("123") // => 6

获取子串

调用 slice 获取字符串指定范围的子串

"a123bc123de".slice(1,4)// => 123 , 获取下标位于 1-4 范围内的子串(包括1,不包括4)

转化小写

调用 toLowerCase 返回源字符串的小写形式

"ABC".toLowerCase() // => "abc"

转化大写

调用 toUpperCase 返回源字符串的大写形式

"abc".toUpperCase() // => "ABC"

获取正则匹配结果

调用 match 并传入正则表达式得到正则匹配的结果,具体返回结果和正则表达式相关

如果设置了全局标志,返回所有的匹配项

"1 加 2 等于 3".match(/\d+/g)  // => ["1", "2", "3"]

否则返回第一个匹配项以及它的捕获分组

var url = /(\w+):\/\/([\w.]+)\/(\S*)/;
   var text = "访问淘宝 http://www.taobao.com/index.php http://www.etao.com/";
   var result = text.match(url);
   if (result != null) {
      var fullurl = result[0];   // => "http://www.taobao.com/index.php"
      var protocol = result[1];  // => "http"
      var host = result[2];      // => "www.taobao.com"
      var path = result[3];      // => "index.php"
   }

查找匹配正则的起始位置

调用 search 返回匹配正则的起始位置

var s="TaoBao 开放 js";
   s.search(/t.o/i)  // => 0
   s.search(/x+/) // => -1

分割字符串为数组

调用 split 将字符串依据传入的分割符分割为数组

分隔符为字符串

"1:2:3:4:5".split(":");  // => ["1","2","3","4","5"]

分隔符为正则

"1::2:3:4:5".split(":");  // => ["1","","2","3","4","5"]
  "1::2:3:4:5".split(/:+/);  // => ["1","2","3","4","5"]

如果正则为括号起始,则匹配到的分隔符也包含在返回结果中

"1::2:3:4:5".split(/(:)/);  // => ["1",":","",":","2",":","3",":","4",":","5"]

替换子串

调用 replace 将正则匹配到的子串替换为指定的字符串

替换为指定的字符串,注意字符串中 $ 具有特殊含义: $1 表示第一个捕获分组 ... $& 表示匹配字符串

"tao bao".replace(/(\w+) (\w+)/g,"$2 $1") // => "bao tao"

替换为指定的函数返回结果,改函数传入参数:匹配字符串以及各个匹配分组

"tao bao".replace(/(\w+)/g,function(w){
       return w.charAt(0).toUpperCase()+w.slice(1);
   }); //=> Tao Bao

去掉字符串两边的空格

调用 trim 去掉字符串两边的空格

"  abc " // => "abc"

数字

最大正数

通过 Number.MAX_VALUE 来获取最大正数

console.log(Number.MAX_VALUE);

最小正数

通过 Number.MIN_VALUE 来获取最小正数

console.log(Number.MIN_VALUE);

正溢出值

Number.POSITIVE_INFINITY 表示运算正溢出时的值

console.log(1/0 === Number.POSITIVE_INFINITY);

负溢出值

Number.NEFATIVE_INFINITY 表示运算负溢出时的值

console.log(-1/0 === Number.NEFATIVE_INFINITY);

小数点位数控制

调用 toFixed 返回代表限定小数点位数的字符串

var n = 12345.6789;
  n.toFixed( );             // => '12346': 去除小数点的数字
  n.toFixed(1);             // => '12345.7': 保留一位,进行四舍五入
  n.toFixed(6);             // => '12345.678900' 保留六位,不足补零
  (1.23e+20).toFixed(2);    // => '123000000000000000000.00'
  (1.23e-10).toFixed(2)     // => '0.00'

总体精度控制

调用 toPrecison 来返回代表限定数字有效位的字符串

var n = 12345.6789; n.toPrecision(1); // => 1e+4 n.toPrecision(3); // => 1.23e+4 n.toPrecision(5); // => 12346 (四舍五入) n.toPrecision(10); // => 12345.67890 (四舍五入)

科学计数法精度控制

调用 toExponential 返回代表限定小数点位数的科学计数法字符串

var n = 12345.6789;
    n.toExponential(1);     // => '1.2e+4'
    n.toExponential(5);     // => '1.23457e+4'
    n.toExponential(10);    // => '1.2345678900e+4'
    n.toExponential( );         // => '1.23456789e+4'

Math

获取数学常量e

通过 Math.E 获取数学常量 e

console.log(Math.E);

自然对数

通过 Math.log(x) 获取 x 的自然对数

console.log(Math.log(10)===Math.LN10); // => true

10的自然对数

通过 Math.LN10 获取10的自然对数

console.log(Math.LN10);

2的自然对数

通过 Math.LN2 获取 2 的自然对数

console.log(Math.LN2);

以2为底 e的对数

通过 Math.LOG2E 获取以2为底 e的对数

console.log(Math.LOG2E);

以 10 为底 e的对数

通过 Math.LOG10E 获取以10为底 e的对数

console.log(Math.LOG10E);

圆周率

通过 Math.PI 获取圆周率常量

console.log(Math.PI);

根号2

通过 Math.SQRT2 获取常量根号2

console.log(Math.SQRT2);

绝对值

调用 Math.abs 获取变量的绝对值

console.log(Math.abs(1)); // => 1
  console.log(Math.abs(-1)); // => 1

余弦

调用 Math.cos 获取角度的余弦值

console.log(Math.cos(0.5)); // => 0.877...
  console.log(Math.cos(-0.5)); // => 0.877...

正弦

调用 Math.sin 获取角度的正弦值

console.log(Math.sin(0.5)); // => 0.497...
  console.log(Math.sin(-0.5)); // => -0.497...

正切

调用 Math.atan 获取角度的正切值

console.log(Math.tan(0.5)); // => 0.546...
  console.log(Math.tan(-0.5)); // => -0.546...

反余弦

调用 Math.acos 获取变量的反余弦值

console.log(Math.acos(0.5)); // => 1.047...
  console.log(Math.acos(-0.5)); // => 2.094...

反正弦

调用 Math.asin 获取变量的反正弦值

console.log(Math.asin(0.5)); // => 0.523...
  console.log(Math.asin(-0.5)); // => -0.523...

反正切

调用 Math.atan 获取变量的反正切值

console.log(Math.atan(0.5)); // => 0.523...
  console.log(Math.atan(-0.5)); // => -0.523...

大于或等于某数的最近整数

调用 Math.ceil 大于或等于某数的最近整数

console.log(Math.ceil(0.5)); // => 1
  console.log(Math.ceil(-0.5)); // => 0

小于或等于某数的最近整数

调用 Math.floor 得到小于或等于某数的最近整数

console.log(Math.floor(0.5)); // => 0
  console.log(Math.floor(-0.5)); // => -1

幂计算

调用 Math.pow(x,y) 返回 x 的 y 次方

console.log(Math.pow(2,3)); // => 8
  console.log(Math.pow(3,2)); // => 9

四舍五入

调用 Math.round 返回四舍五入后的值

console.log(Math.round(2.3)); // => 2
  console.log(Math.round(2.5)); // => 3

最大值

调用 Math.max 获得参数列表中最大的参数值

console.log(Math.max(2,4,3,-9); // => 4

最小值

调用 Math.min 获取参数列表中的最小的参数值

console.log(Math.min(2,4,3,-9); // => -9

随机数

调用 Math.random 返回一个范围在 0.0 与 1.0 之间的伪随机数

console.log(Math.random()!==Math.random()); // => true

Date

根据GMT时间获取绝对时间值

调用 Date.UTC(year, month, day, hours, minutes, seconds, ms) 来获取给定的 GMT 时间相对于 GMT 1970.1.1 的毫秒数

注意: year 为四位数 month 从 0开始(0表示一月) day可选参数,范围 1-31 hours可选参数,范围 0-23 minutes可选参数,范围 0-59 seconds可选参数,范围 0-59 ms可选参数,范围 0-999

console.log(Date.UTC(1970,0,1)); // => 0
 console.log(Date.UTC(1970,0,1,0,0,0,1)); // => 1

创建一个 Date 对象

调用

new Date() 创建一个表示当前时间的 Date 对象 或 new Date(milliseconds) 创建一个举例 1970.1.1 GMT时间指定毫秒的 Date 对象 或 new Date(year,month,day,hours,minutes,seconds,ms) 创建一个指定本地时间的 Date 对象,参数格式要求同 Date.UTC

console.log(new Date().toLocaleString()); // => "Fri Sep 09 2011 12:13:30 GMT+0800 (中国标准时间)

得到区域时间格式化表示

调用 date.toLocaleString() 得到时间对象的当前区域格式化表示(不同浏览器间可能不同)

console.log(new Date().toLocaleString()); // => "Fri Sep 09 2011 12:13:30 GMT+0800 (中国标准时间)"

得到绝对毫秒值

调用 date.getTime() 得到当前时间实例距离 1970/1/1 GMT 的毫秒数

console.log(new Date().getTime()); // => 1315881421972

得到年

调用 date.getFullYear() 得到时间实例的当前区域四位年份表示

console.log(new Date().getFullYear()); // => 2011

得到月份

调用 date.getMonth() 得到时间实例的当前区域月份表示

注意:返回值范围为 0-11 , 0 表示一月

console.log(new Date().getMonth()); // => 8 (9 月)

得到日期

调用 date.getDate() 得到时间实例的当前区域的日期表示

console.log(new Date().getDate()); // => 13

得到星期

调用 date.getDay() 得到时间实例的当前区域的星期

注意:返回值范围为 0-6 , 0 表示星期天,1 表示星期一 ...

console.log(new Date().getDay()); // => 2 (星期二)

得到时值

调用 date.getHours() 得到时间实例的当前区域的时数值

注意:返回值范围为 0-23 , 0 表示午夜12点.

console.log(new Date().getHours()); // => 10

得到分值

调用 date.getMinutes() 得到时间实例的当前区域的分数值

注意:返回值范围为 0-59

console.log(new Date().getMinutes()); // => 56

得到秒数

调用 date.getSeconds() 得到时间实例的当前区域的秒数

注意:返回值范围为 0-59

console.log(new Date().getSeconds()); // => 13

得到毫秒值

调用 date.getMilliseconds() 得到时间实例的当前区域的毫秒位数值

注意:返回值范围为 0-999

console.log(new Date().getMilliseconds()); // => 564

得到 GMT 年

调用 date.getUTCFullYear() 得到时间实例的GMT标准时间四位年份表示

console.log(new Date().getUTCFullYear()); // => 2011

得到GMT月份

调用 date.getUTCMonth() 得到时间实例的GMT标准时间月份表示

注意:返回值范围为 0-11 , 0 表示一月

console.log(new Date().getUTCMonth()); // => 8 (9 月)

得到GMT日期

调用 date.getUTCDate() 得到时间实例的GMT标准时间日期表示

console.log(new Date().getUTCDate()); // => 13

得到GMT星期

调用 date.getUTCDay() 得到时间实例的GMT标准时间星期

注意:返回值范围为 0-6 , 0 表示星期天,1 表示星期一 ...

console.log(new Date().getUTCDay()); // => 2 (星期二)

得到GMT时值

调用 date.getUTCHours() 得到时间实例的GMT标准时间时数值

注意:返回值范围为 0-23 , 0 表示午夜12点.

console.log(new Date().getUTCHours()); // => 2

得到GMT分值

调用 date.getUTCMinutes() 得到时间实例的GMT标准时间分数值

注意:返回值范围为 0-59

console.log(new Date().getUTCMinutes()); // => 56

得到GMT秒数

调用 date.getUTCSeconds() 得到时间实例的GMT标准时间秒数

注意:返回值范围为 0-59

console.log(new Date().getUTCSeconds()); // => 13

得到GMT毫秒值

调用 date.getUTCMilliseconds() 得到时间实例的GMT标准时间毫秒位数值

注意:返回值范围为 0-999

console.log(new Date().getUTCMilliseconds()); // => 564


得到时区差异

调用 date.getTimezoneOffset() 得到GMT标准时区和当前时区的差异分钟数

console.log(new Date().getTimezoneOffset()); // => -480 , 8*60 , 北京处于东八区

设置绝对毫秒值

调用 date.setTime() 设置当前时间实例距离 1970/1/1 GMT 的毫秒数

console.log(new Date().setTime(1315881421972));

设置年

调用 date.setFullYear() 设置时间实例在当前区域的年份

console.log(new Date().setFullYear(2011));

设置月份

调用 date.setMonth() 设置时间实例在当前区域的月份

注意:参数范围为 0-11 , 0 表示一月

console.log(new Date().setMonth(8));

设置日期

调用 date.setDate() 设置时间实例在当前区域的日期

console.log(new Date().setDate(13));

设置时值

调用 date.setHours() 得到时间实例在当前区域的时值

注意:参数范围为 0-23 , 0 表示午夜12点.

console.log(new Date().setHours(10));

设置分值

调用 date.setMinutes() 设置时间实例在当前区域的分数值

注意:参数范围为 0-59

console.log(new Date().setMinutes(56));

设置秒数

调用 date.setSeconds() 设置时间实例在当前区域的秒数

console.log(new Date().setSeconds(13));

设置毫秒值

调用 date.setMilliseconds() 设置时间实例在当前区域的毫秒位数值

console.log(new Date().setMilliseconds(564));

得到 GMT 年

调用 date.getUTCFullYear() 得到时间实例的GMT标准时间四位年份表示

console.log(new Date().getUTCFullYear()); // => 2011

得到GMT月份

调用 date.getUTCMonth() 得到时间实例的GMT标准时间月份表示

注意:返回值范围为 0-11 , 0 表示一月

console.log(new Date().getUTCMonth()); // => 8 (9 月)

得到GMT日期

调用 date.getUTCDate() 得到时间实例的GMT标准时间日期表示

console.log(new Date().getUTCDate()); // => 13

得到GMT星期

调用 date.getUTCDay() 得到时间实例的GMT标准时间星期

注意:返回值范围为 0-6 , 0 表示星期天,1 表示星期一 ...

console.log(new Date().getUTCDay()); // => 2 (星期二)

得到GMT时值

调用 date.getUTCHours() 得到时间实例的GMT标准时间时数值

注意:返回值范围为 0-23 , 0 表示午夜12点.

console.log(new Date().getUTCHours()); // => 2

得到GMT分值

调用 date.getUTCMinutes() 得到时间实例的GMT标准时间分数值

注意:返回值范围为 0-59

console.log(new Date().getUTCMinutes()); // => 56

得到GMT秒数

调用 date.getUTCSeconds() 得到时间实例的GMT标准时间秒数

注意:返回值范围为 0-59

console.log(new Date().getUTCSeconds()); // => 13

得到GMT毫秒值

调用 date.getUTCMilliseconds() 得到时间实例的GMT标准时间毫秒位数值

注意:返回值范围为 0-999

console.log(new Date().getUTCMilliseconds()); // => 564

设置GMT年

调用 date.setUTCFullYear() 设置时间实例在GMT标准时区的年份

console.log(new Date().setUTCFullYear(2011));

设置GMT月份

调用 date.setUTCMonth() 设置时间实例在GMT标准时区的月份

注意:参数范围为 0-11 , 0 表示一月

console.log(new Date().setUTCMonth(8));

设置GMT日期

调用 date.setUTCDate() 设置时间实例在GMT标准时区的日期

console.log(new Date().setUTCDate(13));

设置GMT时值

调用 date.seUTCHours() 得到时间实例在GMT标准时区的时值

注意:参数范围为 0-23 , 0 表示午夜12点.

console.log(new Date().setUTCHours(10));

设置GMT分值

调用 date.setUTCMinutes() 设置时间实例在GMT标准时区的分数值

注意:参数范围为 0-59

console.log(new Date().setUTCMinutes(56));

设置GMT秒数

调用 date.setUTCSeconds() 设置时间实例在GMT标准时区的秒数

console.log(new Date().setUTCSeconds(13));

设置GMT毫秒值

调用 date.setUTCMilliseconds() 设置时间实例在GMT标准时区的毫秒位数值

console.log(new Date().setUTCMilliseconds(564));

RegExp

创建

通过 /code/flag 来创建正则表达式实例,其中 code 表示正则表达式,flag 表示该表达式的模式修饰符,包括 i(大小写模式) , m(多行模式) ,g(全局模式)

console.log(/x/i);

查看全局模式

通过 reg.global 来判断该正则表达式是否设置了全局模式

console.log(/x/g.global); // => true
   console.log(/x/.global); // => false

查看大小写模式

通过 reg.ignoreCase 来判断该正则表达式是否设置了大小写不敏感

console.log(/x/.ignoreCase); // => false
   console.log(/x/i.ignoreCase); // => true

查看多行模式

通过 reg.multiline 来判断该正则表达式是否设置了多行模式

console.log(/x/.multiline); // => false
   console.log(/x/m.multiline); // => true

下次开始查找位置

通过 reg.lastIndex 来获取或设置带有全局模式的正则式下次开始查找的位置

var x=/x/g;
   console.log(x.lastIndex); // => 0
   x.test("xyzxyz");
   console.log(x.lastIndex); // => 1

通用模式匹配

调用 reg.exec 来对参数字符串进行通用模式匹配

如果匹配成功返回数组,数组第一项表示匹配的字符串,其余表示匹配分组

var x=/(j)ava\w*/g,result;
   while(result=x.exec("javascript is not java")){
        console.log("匹配到:" + result[0] +
             "  捕获分组 :"+result[1]+
             "  下次匹配开始于:" + x.lastIndex);
   }
   // 匹配到:javascript  捕获分组 :j  位于: 0  下次匹配开始于:10
   // 匹配到:java  捕获分组 :j  位于: 18  下次匹配开始于:22

是否匹配字符串

调用 reg.test 来判断参数字符串是否匹配当前模式,相当于 reg.exec(str) != null

var pattern = /java/i;
   pattern.test("JavaScript");   // => true
   pattern.test("ECMAScript");   // => false

全局变量(函数)

null

特殊的空对象

false

true

NaN

特殊的数字,不等于任何数字包括自身

console.log(Number("x")) // => NaN
   console.log(NaN === NaN); // => false

Infinity

特殊的数字表示无穷大,运算溢出时返回

console.log(1/0); // => Infinity

undefined

特殊值,表示不存在的变量或属性

parseInt

将字符串转化为整数

parseInt("12x") // => 12

parseFloat

将字符串转化为浮点数

parseFloat("12.98x") // => 12.98

isNaN

判断一个字符串或数字是否是非NaN数字

isNaN("12") // => false
   isNaN("12x") // => true
   isNaN(NaN) => true
   isNaN(Infinity) => false

isFinite

判断一个字符串或数字是否是非 Infinity 或 -Infinity 或 NaN 数字

isFinite("12") // => true
   isFinite("12x") // => false
   isFinite(NaN) => false
   isFinite(Infinity) => false

encodeURI

对 url 进行编码,除了以下字符外其它字符都被编码为 utf-8 格式的 %xx

1. ascii 字符和数字 2. - _ . ! ~ * ' ( ) 3. ; / ? : @ & = + $ , #

encodeURI("http://www.taobao.com/?arg1=1&arg2=hello world"); // => "http://www.taobao.com/?arg1=1&arg2=hello%20world"

decodeURI

对调用 encodeURI 后的 url 进行解码

decodeURI("http://www.taobao.com/?arg1=1&arg2=hello%20world"); // => "http://www.taobao.com/?arg1=1&arg2=hello world"

encodeURIComponent

对 url 进行编码,除了以下字符外其它字符都被编码为 utf-8 格式的 %xx

1. ascii 字符和数字 2. - _ . ! ~ * ' ( )

encodeURIComponent("hello ?"); // => "hello%20%3f"

decodeURIComponent

对调用 encodeURIComponent 后的 url 进行解码

decodeURIComponent("hello%20%3f"); // => "hello ?"

setTimeout

延迟执行一个函数,返回一个可以用 clearTimeout 取消的句柄

setTimeout(function(){
       alert("run");   // => 10 毫秒后执行   
   },10);

clearTimeout

取消执行用 setTimeout 延迟的函数

var id=setTimeout(function(){
       alert("run");   // => 永远不会执行   
   },10);
   clearTimeout(id);

setInterval

定时重复执行某个函数,返回一个可以用 clearInterval 取消的句柄

var id=setInterval(function(){
       alert("run"); // 每 10 毫秒执行一次
   },10);

clearInterval

取消 setInterval 定时重复执行的函数

var id=setInterval(function(){
       alert("run");   // => 永远不会执行   
   },10);
   setInterval(id);

console.log

调用 console.log 可在控制台打出参数信息

注意:ie6,7 需要安装 companionJS

console.log("log"); // => 控制台打印出 "log"

dom相关

document

可通过常量 document 的一些方法来获得节点实例

body

通过 document.body 来获得模块的根节点

getElementsByTagName

通过 document.getElementsByTagName 来获得模块的制定标签的节点集合

console.log(document.getElementsByTagName("a")); // => 得到模块内的全部链接节点

createElement

通过 document.createElement 来返回一个节点实例

console.log(document.createElement("button")); // => 返回一个按钮节点实例

createTextNode

通过 document.createTextNode来返回一个文本节点实例

console.log(document.createTextNode("button")); // => 返回一个文本节点,内容为 button

createDocumentFragment

通过 createDocumentFragment 来返回一个节点碎片集合,然后可以通过往这个集合上添加节点,用于提高批量节点添加性能

console.log(document.createDocumentFragment());

Node

所有的节点实例都是从 Node 产生出来,都具备一下方法和属性

nodeType

返回整数,表明当前节点的类型,常用的含义如下

  • 1 表示 element(元素)
  • 2 表示属性
  • 3 表示元素或属性中的文本内容
  • 4 表示文档中的 CDATA 区段(文本不会被解析器解析)
  • 5 表示实体引用元素
  • 6 表示实体
  • 7 表示处理指令
  • 8 表示注释
  • 9 表示整个文档
  • 10 向为文档定义的实体提供接口
  • 11 节点碎片集合
  • 12 表示在 DTD 中声明的符号
console.log(document.createDocumentFragment().nodeType); // => 11
   console.log(document.createTextNode("button").nodeType); // => 3
   console.log(document.createElement("button").nodeType);  // => 1

nodeName

返回字符串,返回节点的标签内容,文本节点则返回 "#text"

console.log(document.createElement("button").nodeName);  // => button
   console.log(document.createElement("div").nodeName);  // => div

firstChild

返回元素的第一个子节点

html:

     <div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t1")[0].firstChild.className); // => t2

lastChild

返回元素的最后一个子节点

html:

    <div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t1")[0].lastChild.className); // => t3

nextSibling

返回节点的下一个兄弟节点

html:

    <div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t2")[0].nextSibling.className); // => t3

previousSibling

返回节点的上一个兄弟节点

html:

     <div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t3")[0].previousSibling.className); // => t2

parentNode

返回节点的父亲节点

html:

     <div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t3")[0].parentNode.class); // => t1

childNodes

返回元素的全部子节点数组

html:

     <div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t1")[0].childNodes); // => [KISSY.DOM.query(".t2")[0] , KISSY.DOM.query(".t3")[0]]

clientWith

返回元素的可视区域宽度(不包括滚动条,边框以及被滚动的区域),类型整数

KISSY.DOM.query(".t1")[0].clientWidth

clientHeight

返回元素的可视区域高度(不包括滚动条,边框以及被滚动的区域),类型整数

KISSY.DOM.query(".t1")[0].clientHeight

offsetWith

返回元素的实际宽度(不包括被滚动的区域),类型整数

KISSY.DOM.query(".t1")[0].offsetWidth

offsetHeight

返回元素的实际高度(不包括被滚动的区域),类型整数

KISSY.DOM.query(".t1")[0].offsetHeight

scrollLeft

返回元素的向左滚动值,类型整数

KISSY.DOM.query(".t1")[0].scrollLeft

scrollTop

返回元素的向上滚动值,类型整数

KISSY.DOM.query(".t1")[0].scrollTop

scrollHeight

返回元素内容的实际高度(包含滚动区域),类型整数

KISSY.DOM.query(".t1")[0].scrollHeight

innerHTML

访问元素的所有子节点的 html 代码

html:

     <div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t1")[0].innerHTML); // => "<a class='t2'></a><a class='t3'></a>"

className

返回元素的class 属性值

html:

     <div class='test warn'></div>
console.log(KISSY.DOM.query(".test")[0].className); // => "test warn"

appendChild

调用 appendChild(node) 给当前元素添加一个子节点

html:

     <div class='t1'></div>
KISSY.DOM.query(".t1")[0].appendChild(document.createElement("span"));

html:

     <div class='t1'><span></span></div>

insertBefore

通过调用 parent.insertBefore(newNode,refNode) 将 newNode 插入到 refNode 前面

html:

     <div class='t1'><a class='t3'></a></div>
KISSY.DOM.query(".t1")[0].insertBefore(document.createElement("span"),KISSY.DOM.query(".t3")[0]);

html:

     <div class='t1'><span></span><a class='t3'></a></div>

removeChild

调用 parent.removeChild(node) 将 node 从 parent 中去除

html:

     <div class='t1'><a class='t3'></a></div>
KISSY.DOM.query(".t1")[0].removeChild(KISSY.DOM.query(".t3")[0]);

html:

     <div class='t1'></div>

replaceChild

调用 parent.replaceChild(newNode,exsitNode) 将 exsitNode 替换为 newNode

html:

     <div class='t1'><a class='t3'></a></div>
KISSY.DOM.query(".t1")[0].replaceChild(document.createElement("span"),KISSY.DOM.query(".t3")[0]);

html:

     <div class='t1'><span></span></div>

getElementsByTagName

调用 parent.getElementsByTagName(tagName) 获取 parent 下标签名为 tagName 的节点数组

html:

     <div class='t1'><a class='t3'></a><div class='t4'><div class='t5'></div></div></div>
console.log(KISSY.DOM.query(".t1")[0].getElementsByTagName("div")); // => [KISSY.DOM.query(".t4")[0],KISSY.DOM.query(".t5")[0]]

HTMLInputElement

代表输入框的节点( input ) 类型,可提供输入区域,包括以下属性和方法

value

可通过 value 属性获取用户的输入值或设置输入框的值

html:

     <input class='inp' />
console.log(KISSY.DOM.query(".inp")[0].value); // => 当前用户的输入值

type

可通过 type 属性获取输入框的类型,包括 checkbox ,radio ,text ,默认为 text 注意:该属性只读

html:

     <input class='inp' /> <input class='inp2' type='checkbox'/>
console.log(KISSY.DOM.query(".inp")[0].type); // => "text"
   console.log(KISSY.DOM.query(".inp2")[0].type); // => "checkbox"

name

可通过 name 属性获取输入框的名称属性 注意:该属性只读

html:

     <input class='inp' name='inp_in'/>
console.log(KISSY.DOM.query(".inp")[0].name); // => "inp_in"

disabled

可通过 disabled 读取或设置输入框元素是否禁用(允许用户输入)

html:

     <input class='inp'/>
console.log(KISSY.DOM.query(".inp")[0].disabled); // => false
   KISSY.DOM.query(".inp")[0].disabled = true; // => 用户将不能输入
   console.log(KISSY.DOM.query(".inp")[0].disabled); // => true

readOnly

可通过 readOnly 读取或设置输入框元素是否只读(不允许用户输入)

html:

     <input class='inp'/>
console.log(KISSY.DOM.query(".inp")[0].readOnly); // => false
   KISSY.DOM.query(".inp")[0].readOnly= true; // => 用户将不能输入
   console.log(KISSY.DOM.query(".inp")[0].readOnly); // => true

checked

可通过 checked 读取或设置类型为 checkbox 或 radio 的输入框是否被选中

html:

     <input class='inp' type='checkbox' />
console.log(KISSY.DOM.query(".inp")[0].checked); // => false
   KISSY.DOM.query(".inp")[0].checked= true; // => 用户将不能输入
   console.log(KISSY.DOM.query(".inp")[0].checked); // => true

HTMLSelectElement

代表 select 的节点类型。具有 HTMLInputElement 的所有属性和方法,还包括其他一些方法和属性

options

可获取select 元素的所有选择项数组,单个元素类型为 HTMLOptionElement

html:

     <select class='inp'>
           <option value='one'>1</option>
           <option>2</option>
     </select>
console.log(KISSY.DOM.query(".inp")[0].options.length); // => 2
   console.log(KISSY.DOM.query(".inp")[0].options[0].text); // => 1
   console.log(KISSY.DOM.query(".inp")[0].options[0].value); // => 'one'

selectedIndex

可获取或设置select 元素当前选中选项处于所有选项数组的下标

html:

     <select class='inp'>
           <option>1</option>
           <option selected>2</option>
     </select>
console.log(KISSY.DOM.query(".inp")[0].options.length); // => 2
   console.log(KISSY.DOM.query(".inp")[0].selectedIndex); // => 1
   console.log(KISSY.DOM.query(".inp")[0].options[KISSY.DOM.query(".inp")[0].selectedIndex].text); // => "1"


HTMLOptionElement

代表 select 的每个选项的节点类型,包括一下属性

text

类型字符串,选项的显示内容

value

类型字符串,选项代表的值

selected

代表该选项是否是对应select当前选中的项

浏览器相关

getComputedStyle 获取浏览器计算样式

css

.grid-container{
 background-color:red;
}

js

 var S = KISSY, DOM = S.DOM;
 var con = DOM.get('.grid-container');
 console.log(window.getComputedStyle(con,null).backgroundColor); //red 或者 rgb (255,0,0) 根据浏览器不同有差异

 

补充说明: 编译环境支持, 已知问题是:a标签不支持获取样式。

淘宝类库

淘宝提供了一个基础类库,用于处理浏览器兼容性问题以及提供一些可以增强工作效率的快捷方法,下面对淘宝提供的基础类库 KISSY 的用法做下介绍

KISSY

提供了一些常用的工具方法 方法具体使用方法可以参考kissy官方文档

unparam

http://docs.kissyui.com/1.3/docs/html/api/seed/kissy/unparam.html

param

http://docs.kissyui.com/1.3/docs/html/api/seed/kissy/param.html

 


unEscapeHTML

http://docs.kissyui.com/1.3/docs/html/api/seed/kissy/unEscapeHTML.html

 

escapeHTML

http://docs.kissyui.com/1.3/docs/html/api/seed/kissy/escapeHTML.html

 

substitute

http://docs.kissyui.com/1.3/docs/html/api/seed/kissy/substitute.html

KISSY.DOM

提供了操作页面元素的兼容处理和快捷方法

query

通过 KISSY.DOM.query(selector) 来获取符合选择器字符串的页面元素数组. (selector 为选择器字符串数组,格式和 jquery 保持一致)

html:

     <div>
          <span id='t1' class='t'></span>
          <span id='t2'></span>
          <span id='t3' class='t'></span>
     </div>
console.log(KISSY.DOM.query(".t")); // => [document.getElementById('t1'),document.getElementById('t3')]

get

 

相当于KISSY.DOM.query(selector)[0]

text

通过 KISSY.DOM.text(selector) 来获取或设置匹配选择器的第一个节点的文本内容 参数也可以是通过query取得的节点 : KISSY.DOM.text(node)

html:

     <div>
          <span id='t1' class='t'>1<a>2</a>3</span>
          <span id='t2'></span>
          <span id='t3' class='t'>4<a>5</a>6</span>
     </div>
console.log(KISSY.DOM.text(".t")); // => "123"
   console.log(KISSY.DOM.text(KISSY.DOM.query(".t")[1])); // => "456"
  KISSY.DOM.text(".t","789");
   console.log(KISSY.DOM.text(KISSY.DOM.query(".t")[0])); // => "789"

offset

通过 KISSY.DOM.offset(node) 获取或设置元素相对于文档根节点的位置对象,位置对象包括 left 与 top 两个数值属性

html:

     <div>
          <span id='t1' class='t'>1<a>2</a>3</span>
     </div>
var DOM = KISSY.DOM , t = DOM.query(".t")[0];
   console.log(DOM.offset(t)); // => 可能:{ left:100 , top:200 }
   DOM.offset(t,{ left:200, top:300 });
   console.log(DOM.offset(t)); // => 可能:{ left:200 , top:300 }

hasClass

通过 KISSY.DOM.hasClass(node,cls) 判断元素 node 是否具有样式类 cls

addClass

通过 KISSY.DOM.addClass(node,cls) 可以给元素 node 加上样式类 cls

html:

     <div class='t'></div>
var DOM = KISSY.DOM , t = DOM.query(".t")[0];
   console.log(DOM.hasClass(t,"custom")); // => false
   DOM.addClass(t,"custom");
   console.log(DOM.hasClass(t,"custom")); // => true

removeClass

通过 KISSY.DOM.removeClass(node,cls) 移除元素 node 上的样式类 cls

html:

     <div class='t'></div>
var DOM = KISSY.DOM , t = DOM.query(".t")[0];
   console.log(DOM.hasClass(t,"t")); // => true
   DOM.removeClass(t,"t");
   console.log(DOM.hasClass(t,"t")); // => false

attr

通过 KISSY.DOM.attr(node,'data-xxxx',value); 设置元素的自定义attributes(data- 开头的自定义属性)

hasAttr

通过 KISSY.DOM.hasAttr(node,'data-xxxx',value); 判断一个元素是否有某个自定义attributes(data- 开头的自定义属性)

hasAttr

通过 KISSY.DOM.removeAttr(node,'data-xxxx'); 移除某个自定义attributes


html:

     <div class='t'></div>
    var DOM = KISSY.DOM , t = DOM.query(".t")[0];
    DOM.data(t,"data-size",100); //<div class="t"></div> 
    console.log(DOM.data(t,"data-size"));//100 
    console.log(DOM.hasData(t,"data-size")); // => true
    DOM.removeData(t,'data-size');
    console.log(DOM.hasData(t,"data-size")); // => false

data

通过 KISSY.DOM.data(node,'data-xxxx',value); 设置元素的自定义properties(data- 开头的自定义属性)

hasData

通过 KISSY.DOM.hasData(node,'data-xxxx',value); 判断一个元素是否有某个自定义properties(data- 开头的自定义属性)

removeData

通过 KISSY.DOM.removeData(node,'data-xxxx'); 移除某个自定义properties


html:

     <div class='t'></div>

 

   
    var DOM = KISSY.DOM , t = DOM.query(".t")[0];
    DOM.data(t,"data-size",100); // <div class="t"></div> , html无变化
    console.log(DOM.data(t,"data-size"));//100 
    console.log(DOM.hasData(t,"data-size")); // => true
    DOM.removeData(t,'data-size');
    console.log(DOM.hasData(t,"data-size")); // => false

attr 和 data的区别,参考: https://www.evernote.com/shard/s88/sh/2144ea0b-1530-45ec-b9f1-05f7a5cad866/9dbce2aa8ee298a5edd5e836cd72e556?noteKey=9dbce2aa8ee298a5edd5e836cd72e556&noteGuid=2144ea0b-1530-45ec-b9f1-05f7a5cad866

KISSY.Node

Node 包括 dom , event , anim 模块的所有功能, 推荐采用 Node 模块 功能同官方 kissy node的基本保持一致 文档地址: http://docs.kissyui.com/docs/html/api/core/node/ 。 不同的地方会再稍后做统一说明

quickstart

如何使用这个模块?很简单

var $ = KISSY.all;

'$' 你可以理解就是jquery的jQuery/$ ,你可以像使用jquery一样去使用这个接口了。 链式操作你会喜欢的! 一个例子

$('.navbar').addClass('floding').c_children().item(3).c_add('.bd').c_animate({top:100}).pause().stop().... //还能再长点吗?

 

Api 列表

c_getDOMNodes end equals c_add item slice scrollTop scrollLeft height width c_appendTo c_prependTo c_insertBefore c_insertAfter
c_animate stop run pause resume isRunning isPaused show hide toggle fadeIn fadeOut fadeToggle slideDown slideUp slideToggle c_filter
test clone empty replaceWith parent hasClass c_addClass removeClass replaceClass toggleClass val text toggle offset scrollIntoView
c_next c_prev c_first c_last c_siblings c_children contains remove contains innerWidth innerHeight outerWidth outerHeight 
c_on c_detach fire all c_delegate c_attr c_hasAttr c_removeAttr c_data c_hasData c_removeData len

功能说明
  • len 为新增api 函数,即获取node长度

$('a').len(); // number ,  同$('a').length;

注意

有以下几点,必须要注意

1: 所有方法的api名称大部分与 kissy官方文档保持一致。 开放js在部分api前面增加了 "c_"前缀, 但功能和原api保持一致 比如kissy中的api 是 getDOMNodes , add ,children ,在开放js中使用,需要改成 c_getDOMNodes, c_add ,c_children, 具体参考上面“api列表”

2:部分kissy node的api,开放js中不支持, 其中包括 append prepend before after html attr相关 prop hasProp css index data removeData hasData unselectable 使用的时候需要额外注意,不要使用非 #api列表#中的api

3: 在kissy官方文档中, api ‘filter next prev first last siblings children’,都支持过滤条件这个参数,这个过滤条件在开放js这边,目前只支持字符串,不支持函数过滤

如 kissy官方文档 http://docs.kissyui.com/docs/html/api/core/dom/first.html#dom.first 中提到 filter支持 string|function ,开放js这边,只支持string,不支持function 代码示例:

KISSY.all('.bd').c_children('.j_c'); //所有class为j_c的孩子节点,这是正确的
     KISSY.all('.db').c_children(function(){return xxx;}) //这种写法是不支持的

Enjoy it。

KISSY.Event

on

调用 KISSY.Event.on(node,eventName,fn) 给节点注册某个事件的处理器.

var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
  Event.on(t,"click",function(e){
       alert("带有样式t的第一个元素被点击了");
  });

remove

调用 KISSY.Event.remove(node,eventName,fn) 去除节点上某个事件的处理器 eventName , fn 可选 :

   eventName 指定 , fn 不指定时清除某个事件的所有处理器
   eventName 不指定 , fn 不指定时清除节点所有事件的所有处理器

注意:fn 如果指定那么必须和调用 on 时的处理器函数一致

var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
  function onClick(e){
     alert("带有样式t的第一个元素被点击了");
  }
  Event.on(t,"click",onClick);
  Event.remove(t,"click",onClick); // 点击元素 t 将不起作用

 


delegate

调用 KISSY.Event.delegate(selector , eventType , filter , fn [ , scope ] ) 事件代理。 为符合匹配的 dom 节点的相应事件添加事件处理器, 并在该节点的子孙节点中匹配 filter 的节点上触发事件时调用.http://docs.kissyui.com/docs/html/api/core/event/delegate.html 直接看doc。相信你会明白


fire

调用 KISSY.Event.fire(node,eventName) 将会触发该节点上所有已经注册了eventName的事件函数

var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
  Event.fire(t,"click",function(e){
       alert("带有样式t的第一个元素被点击了");
  });
Event.on(t,'click');//页面将会弹出alert

EventObject

当事件触发后,传递给事件处理器参数的事件对象类型

var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
  Event.on(t,"click",function(e){
      // e 是 EventObject 类型
  });

这种型的对象具备以下属性

type

事件类型,可从事件处理器中获取触发事件的类型

var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
  Event.on(t,"click",function(e){
      console.log(e.type); // => "click"
  });

target

类型 HTMLNode ,事件触发源节点,可用于事件委托情景的事件源头跟踪

pageX

类型 Number,事件触发时鼠标相对页面根节点横坐标的位置,仅在鼠标相关事件中有效.

pageY

类型 Number,事件触发时鼠标相对页面根节点纵坐标的位置,仅在鼠标相关事件中有效.

altKey

类型 Number,事件触发时是否按下了 Alt 键,仅在键盘相关事件中有效

ctrlKey

类型 boolean,事件触发时是否按下了 Ctrl 键,仅在键盘相关事件中有效

metaKey

类型 boolean,事件触发时是否按下了 mac 下的 meta 键,仅在键盘相关事件中有效

shiftKey

类型 boolean,事件触发时是否按下了 Shift 键,仅在键盘相关事件中有效

keyCode

类型 Number,事件触发时的按键数值,仅在键盘事件中有效

which

类型 Number,表示事件触发时鼠标的按键值

  • 1 表示左键
  • 2 表示中键
  • 3 表示右键

currentTarget

类型 HTMLNode,表示事件触发所在当前节点.

relatedTarget

类型 HTMLNode,表示事件触发所在相关节点,仅在 mouseover ,mouseout 时有效

UA

KISSY.UA 表示用户浏览器版本信息的属性,不匹配用户浏览器的属性为undefined,具体包括

  • UA.gecko : gecko 引擎版本号
  • UA.webkit : webkit 引擎版本号
  • UA.ie : ie 版本号
  • UA.firefox : firefox 版本号
  • UA.chrome : chrome 版本号
  • UA.opera : opera 版本号
  • UA.safari : safari 版本号
  • UA.presto: presto 版本号
  • UA.trident : trident 版本号
  • UA.shell : shell 版本号

 

可参考 http://docs.kissyui.com/1.1.6/ua/index.html#prop_trident

JSON

KISSY.JSON JSON相关转化

 

  • JSON.parse

支持第一个参数

将字符串解析为json对象,解析器. 注意 json 字符串的格式,属性必须要双引号括起来

KISSY.JSON.parse('{"x":1}'); // => ok
KISSY.JSON.parse("{'x':1}"); // => exception : SyntaxError
KISSY.JSON.parse("{x:1}"); // => exception : SyntaxError
  • JSON.stringify

支持第一个参数 将json对象或者数组转化为字符串,序列化器

KISSY.JSON.stringify({"x":1}); // => '{"x":1}'
KISSY.JSON.stringify({x:1}); // => '{"x":1}'
KISSY.JSON.stringify({'x':1}); // => '{"x":1}'

Anim

KISSY.Anim 动画功能函数:

KISSY.Anim(node,toStyle,duration,easing,callback)

  • node (HTMLNode): 将要动画的节点,
  • toStyle (Object): 结束样式对象,例如 { width:"100px",height:"100px"}
  • duration (Number): 动画持续时间,以秒为单位,默认 1
  • easing (String) – 默认为 ‘easeNone’ , 动画平滑函数, 可取值 “easeNone”,”easeIn”,”easeOut”,”easeBoth”,”easeInStrong”, “easeOutStrong”,”easeBothStrong”,”elasticIn”,”elasticOut”, “elasticBoth”,”backIn”,”backOut”,”backBoth”, bounceIn”,”bounceOut”,”bounceBoth”.
  • callback (function) – 默认为 null , 动画结束后的回调函数,传入参数没有意义,不可用。

调用后返回动画控制对象,包括两个方法

run : 启动动画

stop(final) : 停止动画,final 设置为 true 则指定跳到结束样式

var DOM=KISSY.DOM , Anim=KISSY.Anim;
   var t = DOM.query(".t")[0];
   var anim=Anim(t,{width:"100px",height:"100px"});
   anim.run(); // t 元素使用渐变动画到 100*100 大小

isRunning: 是否在运行中


isPaused: 是否暂停状态

 

pause: 将动画暂停

 

resume: 在动画实例上调用, 继续当前动画实例的动画.

示例与注意点

举例:鼠标经过某个元素时进行动画的效果,有两个注意点:

1. 需要绑定 mouseenter 事件而不是 mouseover 事件

Event.on(el,"mouseenter",fn);

2. 需要对上一个未完成的动画进行停止操作

var anim;

function fn(){
   if(anim){
     anim.stop();
   }
   // 启动动画
   anim=Anim(xx);
   anim.run();
}

KISSY.IO

IO

调用 KISSY.IO({}) 可以发送ajax请求

可以使用的参数和例子如下。

KISSY.io({
          //指定 callback 的参数,请求 url 会生成 "url?callback={$jsonpCallback}"
        jsonpCallback: "jsonp100",         
         //指定 callback 的别名,请求url会生成 "url?{$jsonp}=jsonp123456", 默认就是callback
         jsonp: "callback" , 
         //url 地址
          url: "urladdress",
          //string|json发起请求需要附加的数据,默认为 null
          data: {"p":1}, 
          // function请求成功的回调,回调参数为 data(内容),textStatus(请求状态),xhr(ajax对象)
          success: function(data, textStatus, xhr) {
               //callback 
          },
          //function 请求完成的回调,在 success 调用之后触发,参数同 success
          complete: function(data){
           
          },
          // 请求错误时的回调
          error: function(){
          },
          //发送请求类型是jsonp
          dataType:"jsonp" 
     });

特别需要注意:

1: IO 接口采用白名单机制,换句话说,不是所有url都可以进行io请求的, IO接口的url环境白名单为 'taegrid.taobao.com'和'uz.taobao.com', 用于线上, 本地url白名单为'*.taobao.net', ' *.taobaoapps.net',可在测试时使用

2: io接口目前只提供jsonp的方式进行请求. 注意,这里需要指定dataType, 服务端需要接受jsonp请求的callback指定的参数作为函数包装需要执行的数据。如上述demo中, io接口发送的请求是url类似是 urladdress/?p=1&callback=jsonp100 .. 那么服务端返回的应该是 jsonp100({data});

3: 所以上述代码最终实现为 浏览器向 url 为("http://grid.taobao.com/?p=1") 发起一个get请求,请求后返回的应该是一段javascript回调。 4: io接口的配置信息,参考http://docs.kissyui.com/docs/html/api/core/ajax/io.html#io.cfg.dataType

KISSY.KCharts

KCharts (仅供聚石塔isv使用)

来源于 http://gallery.kissyui.com/kcharts/1.1/guide/index.html?spm=0.0.0.0.iQfhtx

使用 KISSY.KCharts 可以展示图标。 目前主要用于聚石塔项目

KCharts 组件,目前支持的类型又linechart,barchart,piechart,其他的暂不支持

使用方法见官方文档。下面主要介绍下使用中的差异

一个使用的例子

 
var linechart = new KISSY.KCharts.LineChart({
     renderTo:".demo1",
     title:{
        content:"1周消费记录"
     },
     anim:{},
     subTitle:{
        content:"week fee record"
     },
     xAxis: {
         text:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
     },
     yAxis:{
       min:0
     },
     series:[
     {
         data:[100,4000,200,400,144,234,700]
     }],
     tip:{
       template:"总支出:模板:Y 元
"
     }
 });

通过如上代码,可以看出几点不同 1. 不需要KISSY.use ,直接使用KISSY.KCharts命名空间下的构造函数即可 2. 不需要new ,而是直接 KISSY.KCharts.LineCharts 3. 参数中不支持复杂对象。 看代码,只是简单的key-value,而且value均为普通对象(不是函数或者其他的)

KISSY.Calendar

Calendar (仅供聚石塔isv使用)

来源于 http://docs.kissyui.com/docs/html/api/component/calendar/

使用 KISSY.Calendar 可以展示日历。 目前主要用于聚石塔和TAE合作项目

使用方法见官方文档。下面主要介绍下使用中的差异

一个使用的例子 <input class="abc" type="text" />

var cal = new KISSY.Calendar('.abc',{
    popup:true,
    maxDate:new Date() 
 });
 cal.on('select',function(e){
     var date = new Date(e.date); //e.date 在原api中为new Date()对象,但是这里为new Date().toString() 对象,所以要转换成Date对象,在自己代码中再 new Date(e.date)  转换一下即可
 })

通过如上代码,可以看出几点不同 1. 不需要KISSY.use ,直接使用KISSY.Calendar命名空间下的构造函数即可 2. 不需要new ,而是直接 KISSY.Calendar 3. 事件注册的event对象中的date,或者start/end , 和原api不同的是,原api返回的是Date对象,而此处返回的是String对象(new Date().toString()),只需要在自己代码中再new Date(string) 即可获得Date对象。

全局服务

提供一个在js内部获取外部全局信息的一个服务接口,接口名称为GS(global service)

addListener

添加对外部部分对象事件监听的能力, 目前只提供了对页面中window的滚动事件进行监控的能力,后续根据需求,评估后选择性添加

/**代码意思是,利用GS对象的addListener接口添加一个全局监控事件,监控的行为为windowScroll,这个是一个关键字,不能改变。
意思是window的scroll事件,回调函数中提供了e对象,包含scrollTop值 */

GS.addListener('windowScroll',function(e){
   console.log(e.scrollTop)
});

 

JSSDK

TOP平台的JSSDK

api

同原TOP.api使用方法

ui

同原TOP.ui使用方法,第一个参数目前支持 "authbtn"

TOP.ui("authbtn", {
    container: '.top-authbtn-container',
    name:'立即使用',
    type:'mini',
    callback: function(data){
        console.log(data);
    }
});

 

ALIMAP

阿里云地图部分api使用

之前在isv之间收集了一些需求,针对此类需求的api进行了开放,具体看如下。

 

AliMap

api 列表

centerAndZoom,addOverlay,openInfoWindow,closeInfoWindow,checkResize,clearOverlays,depose,disableDragging,draggingEnabled,enableDragging,
endAutoSlide,getZoom,isDragging,removeOverlay,setZoom,startAutoSlide,zoomIn,zoomOut,setDblClickAction,panTo

其中openInfoWindow 这个api并不返回AliInfoWindow对象,所以如果想要往地图上添加图层,建议先声明一个AliInfoWindow对象,然后在通过map.addOverlay增加上去。

AliLatLng

经度纬度

api

lat,lng

AliIcon

图标,为AliMarker的setIcon配套

AliMarker

标记 marker

api

depose,setLatLng,setOpacity,setTitle,openInfoWindow,setIcon,getLatLng

可以通过AliMap的实例,addOverlay 一个marker对象,添加marker

AliInfoWindow

消息层

api

close,depose,setContent,setLatLng,setRender,setTitle,setOpacity,moveIntoView

可以通过AliMap的实例,addOverlay 一个infoWindow对象,添加infoWindow 样例代码

var map = AliMap("#mapDiv");
        var lat = new AliLatLng(30.238747, 120.14532);
        map.centerAndZoom(lat, 15);
      /*  var marker =AliMarker(lat);
        map.addOverlay(marker);
        map.openInfoWindow(lat,'sdfsdfsdfsdf','content');*/

          /*  map.closeInfoWindow();

            map.centerAndZoom(lat, 15);
            marker.depose();*/
        lat = new AliLatLng(30.838747, 120.14532);
        var info = new AliInfoWindow(lat);
            info.setContent("dfdfdfdf");
            map.addOverlay(info);
        info.moveIntoView();
        setInterval(function(){

            map.zoomIn();
        },1000)

AliEvent

事件

api

addListener

AliEvent.addListener(obj, event, handle),其中handle函数参数为事件发生的point对象或者AliLatLng对象,没有其他参数传递。 样例代码

        var map = AliMap("#mapDiv");
        var marker = new AliMarker(new AliLatLng(30.238747, 120.14532));
         
        AliEvent.addListener(map,'click',function(point){
            console.log('click',point.x,point.y);
        });
        AliEvent.addListener(map,'aftermove',function(point){
            console.log(point.lat(),point.lng());
        });
        AliEvent.addListener(marker, 'click',function(point){
            console.log(point.lat(),point.lng());
        });

升级工作:

背景:开放JS之前存在一些问题,包括

  1. isv不能决定自己使用哪些模块,比如kcharts,calendar,alimap等,都是需要在群里让官方小二配置,而且经常还导致本地和线上不同步的情况,此次升级增加了一个接口,让isv决定使用哪些模块。
  2. 模块化,目前isv的js是基于kissy1.3的,还包括alimap是基于某个版本的,但后面可能kissy还会升级,这样有可能导致isv代码线上不兼容,此次加入了版本号之后,isv可以决定使用基于哪个版本的,这样,我们后面的升级,对isv都没有任何影响,除非isv想使用新版本中的某些特性,可以自己选择是否升级

此次JS的升级的工作对于isv也是可选的,你可以仍然使用老的方式,但我强烈建议你升级,因为升级之后NodeList模块会更加好用,更多的api开放,并且都是和kissy的NodeList保持一直的(之前部分api有c_开头的,看起来很别扭),你也可以自己决定哪个页面使用哪些模块,不会造成引入一大堆模块,但是页面不会用到这些,造成浪费,而且支持版本的升级,后面所有的升级都是向后兼容的,最重要一点,所有后面的新添加的官方组件,都会在升级的基础上去完成,还有最最重要一点,对于你来说,升级工作实在是太简单了,以至于,5分钟都是很长的时间。

1. 不升级所要做的

  如果不升级请忽略此章节的任何文档

2. 升级所要做的

1)在页面的html中引入<cajamodules include="模块列表" /> ,如果你引入了这个,那默认我们任何你是选择了升级后的开放JS版本 cajamodules 是个伪标签

2) 1中提到的模块列表,即为你需要使用的模块有哪些,如果什么不写,那默认就是用原生的javascript语言编写你的应用。模块列表包括以下

模块列表
模块名称 模块用途
kissy/1.3.0/core kissy的核心模块,引入这个模块,就可以使用kissy中的DOM,Event,IO,NodeList,JSON几个模块. 注意,这个模块也是其他kissy模块的基础。必须引入
kissy/1.3.0/calendar kissy的日历模块
kissy/gallery/kcharts/1.1/index kissy的kcharts模块
alimap/1.0/index 阿里云地图模块
jssdk/1.0/index jssdk模块(TOP的一个组件)
gs/1.0/index 全局服务


这里的模块列表随着时间的推移会越来越多,我们也正在准备新的文档结构(抛弃目前不规范的wiki,找个api都很麻烦),目前表中的几个模块在此页面的其他章节都可以找到对应的文档。

3) NodeList模块中,即KISSY.all ,支持的api列表更新,如下

index getDOMNodes getDOMNode end equals add item slice scrollTop scrollLeft height width each
            appendTo prependTo insertBefore insertAfter animate stop run pause resume isRunning isPaused
            show hide toggle fadeIn fadeOut
            fadeToggle slideDown slideUp slideToggle filter test clone empty replaceWith
            parent hasClass addClass removeClass replaceClass toggleClass
            val text toggle offset scrollIntoView next prev first
            last siblings children contains remove 
            innerWidth innerHeight outerWidth outerHeight on delegate detach fire all len attr removeAttr hasAttr
            data hasData removeData

细心的你应该会发现较之前有几个新的有用的api可以使用,并且所有的api都没有c_开头的别名了。

4) IO接口目前采用页面中的cajaCOnfig这个变量配置的白名单方式,和io接口的url做匹配,所以如果之前你写的是相对路径的话,和白名单是无法做到匹配的,会被过滤掉,所以,把url改成绝对路径,即http(s)开头的,即可。

再回顾下此次升级工作 首先如果你不升级,那么你忽略此章节,你仍然可以使用老的方式,这里主要针对一些已经上线的应用,不需要做修改 然后,如果你的应用还没有上线,我强烈建议你升级,只需要5分钟即可 1:首先在html中使用<cajamodules include="模块列表" />,根据2中提到的模块列表引入你在当前页面需要引入的模块,这个作用于为页面级别 2:然后注意下如果之前你使用到了KISSY.all ,那么请将所有代码中的c_开头的api函数,去掉c_这个字符串即可,然后就没有然后了。

最后,我强烈建议你升级,理由如上最开始说的

一个demo例子 html中

//这里如果你先要使用kissy,那么至少要引入kissy/1.3.0/core 才可以
<cajamodules include="kissy/1.3.0/core,kissy/1.3.0/calendar,alimap/1.0/index" /> 

<div class="demo"></div>

js中

var $ = KISSY.all;
$('.demo').addClass('nihao').fadeToggle();//之前的代码是$('.demo').c_addClass('nihao').fadeToggle()

另外补充一个小特性,升级之后还支持了location.href的读写功能 使用方法和原生的有点不一样 var s = location.href(); //如果不传参数就是读属性 location.href("http://xiaoxiqi.uz.taobao.com"); //传递具体某一个绝对路径的url就是写,也就是跳转。

FAQ:

1: 为什么我的代码 KISSY.ready(function(){alert(1);}) ,这么简单的代码都不执行呢?

   答:注意,代码的api一定要以wiki为准,wiki中没有提到的api不要用,没有标明的意味着是系统不支持的。 估计KISSY.ready这个api,你是在kissy官方网站上找到的,然后拿到我们的caja环境来用,这是是个错误的做法。正确的做法是,参照wiki的api,wiki中提到的证明能用,然后你觉得wiki中api说的不是很明白,

kissy部分的话可以去kissy官网查阅。 不支持的api还包括alert,confirm等。 但开发过程提供了一个KISSY.alert 可以用一下。

2: 基于问题1,那我希望document ready之后才执行我的代码该怎么做?

   答:你编写的js代码,我们的环境(开放JS)是默认在document ready的时候去执行你的代码,所以你不必担心你的document还没有ready,直接写你的代码就ok了

3: 我是否要担心全局变量的问题?

   答:不用担心,在代码中也不需要写闭包。 直接写var s = 1; 这样没有问题,你的代码可以理解已经是在一个”闭包“环境内执行,不用担心会污染到全局。

4: 为什么我在旺旺里面提的问题小二不回复?

   答:不回复是有原因的。 有可能小二不在或者你的描述不清楚,但多数属于后者。要知道,你要问别人问题的时候一定要知道怎么问。比如
        路人甲:"怎么办啊,一直报错 @小二 帮忙看看",路人乙:"郁闷,ie下面的错误是怎么回事,这个环境不对呢?" ,路人丙:"我本地的IO接口无法返回正确
      结果,地址是localhost:8080/app.php, @小二,咋回事呢"。 路人丁:"@小二 ,我的chrome浏览器下面出现了错误,错误是undefined a ,我经过测试,

发现ie下面没有这个错误, 我本地通过删除无关的代码定位到了问题是xxx 这一行代码引起的,环境是我本地的sdk,我已经将这个测试的用例上传到线上环境, 同样出现问题,你可以访问 http://online.taobao.com/x.php 就可以看到错误,截图是:截图.png, chrome版本是28,。"....

    不用说你也知道哪个是"没有意义的提问",哪个是有效的提问。  同样,一个好的提问会在小二不在的时候,后面重复反馈也ok,因为这是一个完整的描述,

很容易回顾和定位

5: jquery能支持吗,我不习惯用KISSY?

   答:目前只能支持KISSY,并且会住逐步开放更多的接口来使用。目前接口比较少,其实KISSY和jquery类似,如果你了解KISSY.all的话。

6: 我希望实现页面跳转的需求,如何支持?

    答:正确的提需求的方式是 1:"我希望开放JS这边能够提供页面跳转的支持,因为我的应用在xx业务场景下需要使用到,如果不提供,

我通过其他的方式实现都会很复杂,比如ajax会带来很多xxx问题。" 错误的提需求方式:"为什么不支持跳转啊,我可怎么办,求救"。 7: 未完待续

FAQ

关于此文档暂时还没有FAQ
返回
顶部