avalon指令和js函数简单介绍

来源：互联网发布：北京软件开发工资水平编辑：程序博客网时间：2024/04/29 05:41

1.setInterval函数和setTimeout函数

这两个函数的作用都是在指定时间T后执行指定函数。但setTimeout在T时间后执行了一次后就不再执行了，而setInterval则每经过T时间就执行一次。

两个函数的具体使用格式为：setInterval（function(){.......函数内容}/函数名，间隔时间T）以及setTimeout（function(){.......函数内容}，间隔时间T）

注意，当使用setInterval(函数名，间隔时间T)这一形式时，函数名不要加括号和双引号，比如，我们先定义一个函数：

function drawStar() {        var positionRight;        var positionTop;        (function getPosition() {            positionRight = Math.random() * 1200 + 100;            positionTop = Math.random() * 600 + 100;        })();        var animateLastTime=Math.random()*1500+1200;        $(".div").prepend("<div><div><div><div><div></div></div></div></div></div>");        $(".div>div").animate({ right: positionRight, top: positionTop }, animateLastTime);    };

然后在setInterval中使用方法如下：

setInterval(drawStar,1000);

而不是

setInterval(”drawStar()",1000);

2、ms-if=“表达式”和ms-visible=“表达式“”

<span style="font-size: 18px;"> </span><span style="font-size:10px;"> <head> <span style="white-space: pre;"></span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <script src="avalon.js" ></script>         <script>             var model = avalon.define({                 $id: "test",                 percent: 0             })             var a = true             var id = setInterval(function() {                 if (a) {                     if (model.percent < 100) {                         model.percent++                     } else {                         a = false                     }                 } else {                     if (model.percent > 0) {                         model.percent--                     } else {                         a = true                     }                 }             }, 100)         </script>      </head> </span>

这两个指令都是通过表达式的值来判断是否显示标签内容，若表达式为真，则显示标签内容，否则不显示。代码示例如下：

<!DOCTYPE HTML>
<html>

<head>
<title>ms-if</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js"></script>
<script>
var vmodel = avalon.define({
$id: "test",
object: {}
})

setInterval(function() {
vmodel.object = {
id: "132",
message: "显示！！"
}
}, 3000)

setInterval(function() {
vmodel.object = {}
}, 5000)
</script>
</head>

<body>
<div ms-controller="test">
这是比较输出结果:{{object.id != null}}
<div ms-visible="object.id != null">
这是visible的:
<span>{{object.message}}</span>
</div>
<div ms-if="object.id != null">
这是if的:
<span>{{object.message}}</span>
</div>
</div>
</body>

</html>

3、<ms-each-XXX=“数组名”>

该指令的作用是遍历指定数组，并且遍历过程中XXX表示当前所指数组中的对象。实例如下：

该段代码的作用就是遍历“array”数组，将数组中的所有对象依次显示出来，并且传入vm中定义的click1函数中（vm定义的代码我未贴出，在vm中定义了一个函数click1()）

4、data-duplex-changed="函数名"

该代码的作用为当其所在控件值发生变化时，调用vm中对应的函数。代码示例：

vm定义代码：

<script>var model=avalon.define({$id:"test",all_select:false,checkbox_array:[{checked:false},{checked:false},{checked:false}],all_select_change:function(){....函数定义内容}})</script>

html代码：

<input type="checkbox" data-duplex-changed="all_select_change">全选</input>

则该代码的作用就是当该checkbox被选中或取消选中时，调用vm中的all_select_change方法。

1 0