-
Notifications
You must be signed in to change notification settings - Fork 33
/
api.html
199 lines (182 loc) · 11.8 KB
/
api.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架,让你的网站更快更炫更好用">
<meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
<meta name="author" content="RubyLouvre,司徒正美">
<title>avalon中文官网</title>
<!-- Site CSS -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://static.bootcss.com/www/assets/css/site.min.css?v5" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.min.js?v=f3008b4099"></script>
<script src="/assets/js/respond.min.js?v=f3008b4099"></script>
<![endif]-->
<!-- Favicons -->
<script src="//hotelued.qunar.com/oniui/avalon.js"></script>
<link rel="apple-touch-icon-precomposed" href="favicon2.png">
<link rel="shortcut icon" href="favicon2.png">
<link href="//roscoe054.coding.me/avalon.doc/assets/css/docs.min.css" rel="stylesheet">
<script>
avalon.define({
$id: "test",
statics: {
"mix(a,b)": "★★★相当于jQuery.extend,参数个数不定,用于深浅拷贝属性,比如avalon.mix(a), avalon.mix(true, target, c, d)",
"log(s)": "打印日志, 参数个数不定, 比如<br/>avalon.log(a);<br/> avalon.log(a, b)",
"isFunction(s)": "判定是否为函数,1.3.6新增 <br/> avalon.isFunction(alert) ==> true",
"error(s)": "抛出异常,比如avalon.error('类型不正确')",
"ui": "一个对象,用于放置各种widget的构造器。大家在控制台下查看console.log(avalon.ui)就明白什么回事了。",
"vmodels": "★★★用于放置avalon.define(id, fn)产生的ViewModel。大家在控制台下查看console.log(avalon.vmodels)就明白什么回事了。",
"noop": "一个空函数",
"ready(fn)": "★★★domReady,将回调延迟到DOM树后才执行<br/>" +
"avalon.ready(function(){alert('页面上的标签已经全部变成DOM对象')})",
"oneObject(str | array, val?)": "★★★如果传入一个字符串则将它以逗号转换为一个字符串数组,否则一定要传字符串数组" +
",第二个参数可选,为生成的对象的值。此方法是用于生成一个键名不一样,但键值都一样的对象。比如<br/>" +
"avalon.oneObject('a,b,c,d') ==> {a:1, b:1, c:1, d:1}",
"type(obj)": "★★★返回传参的数据类型,值可能为array, date, object, json, number, string, null, undefined,比如<br/>" +
"avalon.type('aaa') ==> 'string' <br/>" +
"avalon.type(12345) ==> 'number' <br/>" +
"avalon.type(null) ==> 'null' <br/>" +
"avalon.type(void 0) ==> 'undefined' <br/>" +
"avalon.type(window) ==> 'object' <br/>" +
"avalon.type([1,2,3]) ==> 'array' ",
"isWindow(obj)": "判定是否为window对象",
"isPlainObject(obj)": "判定是否是一个朴素的javascript对象(Object),不是DOM对象,不是BOM对象,不是自定义类的实例",
"slice(obj, start?, end?)": "用于转换一个类数组对象为一个纯数组,后面两个为索引值,可以只取原对象的一部分元素,比如<br>" +
"avalon.slice(document.getElementsByTagName('p'), 10)<br/>" +
"avalon.slice(arguments)",
"range(start, end, step)": "生成一个整数数组,功能与underscorejs或python的同名函数一致,比如<br>" +
"avalon.range(10) ==> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] <br/>" +
"avalon.range(1, 11) ==> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] <br/>" +
"avalon.range(0, 30, 5) ==> [0, 5, 10, 15, 20, 25]<br/>" +
"avalon.range(0, -10, -1) ==> [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]" +
"avalon.range(0) ==> []",
"bind(el, type, fn, phase?)": "绑定事件,返回一个回调给你自行卸载,比如<br>" +
"avalon.bind(document.body, 'keydown', callback)",
"unbind(el, type, fn, phase)": "卸载事件,比如<br>" +
"avalon.unbind(document.body, 'keydown', callback)",
"each(obj,fn)": "★★★功能同jQuery.each, 都是索引值或键名在前,值或元素在后",
"avalon.define(id, factory)": "★★★定义一个ViewModel, <br/>" +
"旧风格: avalon.define('test', function(vm){ vm.aaa = 1})<br/>" +
"新风格: avalon.define({$id: 'test', aaa: 1})<br>" +
"id: 用来定义VM的$id属性<br>" +
"factory: 用来收集vm属性并初始化值,并且规定哪些可监控的,哪是需要计算的,哪些是不可监控的",
"scan(el?, vmodels?)": "★★★扫描DOM树,抽取绑定(el默认为DOM,vmodels默认为空数组<br/>" +
"avalon默认在domReady时,从body开始扫描一次,以后自己动态添加了新内容,需要自己手动scan。<br/>" +
"如果你的VM是定义在某个回调里面,如require回调,也需要自己手动扫描",
"define(id?, deps?, factory)": "●一个全局方法,用于定义AMD规范的JS模块",
"require(deps, callback)": "●一个全局方法,用于加载JS模块",
"css(node, name, value?)": "如果只有两个参数,读取元素的某个样式,三个参数时,设置元素某个样式;<br/>" +
"在设置样式时,如果是长宽等计量属性,你可以直接传一个数值,框架会自动帮你添加px单位;<br/>" +
"如果是取值时,你的第三个参数是true,它会帮你去掉单位,转换为纯数值",
"nextTick(fn)": "延迟执行某个函数,类似于setTimeout(fn, 0)",
"contains(a, b)": "判定A元素包含B元素,比如<br/>" +
"avalon.contains(document.documentElement, document.body) ==> true",
"parseHTML(str)": "将一段字符串转换为文档碎片",
"innerHTML(node, str)": "对节点node进行innerHTML操作,在旧式IE下,head, table, td, tr, th等元素的innerHTML是只读,这个方法进行了兼容处理",
"clearHTML(node)": "清空元素的所有子节点",
"Array.remove(array, el)": "移除某个元素,成功返回true,失败返回false",
"Array.removeAt(array, index)": "移除某个位置上的元素,成功返回true,失败返回false",
"Array.ensure(array, el)": "只有数组不存在此元素时才添加它"
}
})
</script>
</head>
<body class="home-template">
<div class="container">
<style>
.prototype-method-table{
width:850px;
}
.prototype-method-table h3{
letter-spacing: -1px;
font: bold 19px/19px "proxima-nova", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0 0 15px 0;
border-bottom: solid 1px #000;
border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}
.prototype-method-table td{
vertical-align: top;
padding:5px 10px;
}
.prototype-method-table .events{
background: #FF7B3A
}
.prototype-method-table ul{
margin:0px;
padding:0px;
list-style: none;
}
.prototype-method-table ul li{
display: list-item;
text-align: -webkit-match-parent;
}
.prototype-method-table .styles{
background: #E449A1;
}
.prototype-method-table .attributes{
background: #AF4FDD;
}
</style>
<div ><img src="//roscoe054.coding.me/avalon.doc/assets/css/apis/api.png"/></div>
<h3>所有原型成员,用法可以参看jQuery</h3>
<table class="prototype-method-table" id="prototype-method" >
<tbody><tr>
<td class="events"><h3>事件</h3>
<ul>
<li>bind()</li>
<li>unbind()</li>
</ul>
</td>
<td class="styles"><h3>样式</h3>
<ul>
<li>css()</li>
<li>width()</li>
<li>height()</li>
<li>innerWidth()</li>
<li>innerHeight()</li>
<li>outerWidth()</li>
<li>outerHeight()</li>
<li>position()</li>
<li>offset()</li>
<li>offsetParent()</li>
<li>scrollLeft()</li>
<li>scrollTop()</li>
<li>addClass()</li>
<li>removeClass()</li>
<li>hasClass()</li>
<li>toggleClass()</li>
</ul>
</td>
<td class="attributes"><h3>属性</h3>
<ul>
<li>attr()</li>
<li>val()</li>
<li>data()</li>
<li>removeData()</li>
</ul>
</td>
</tr>
</tbody></table>
<h3>所有静态成员</h3>
<table class="table table-bordered" ms-controller="test" >
<tr>
<th>方法或属性</th> <th>描述</th>
</tr>
<tr ms-repeat="statics">
<td>{{$key}}</td> <td>{{$val | html}}</td>
</tr>
</table>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="//roscoe054.coding.me/avalon.doc/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="//roscoe054.coding.me/avalon.doc/assets/js/iframe.js"></script>
<!-- 上面是 www.bootcss.com 网站所使用的统计代码,如果你使用本页面作为自己的模板,请将上面面的统计代码删掉!!! -->
</body>
</html>