forked from RubyLouvre/avalon.oniui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
oni.standard.html
79 lines (76 loc) · 4.39 KB
/
oni.standard.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
<!DOCTYPE html>
<html>
<head>
<title>规范</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p><a href="http://www.cnblogs.com/rubylouvre/p/3573061.html"> avalonjs 组件编写指南</a></p>
<ul>
<li>
组件基于avalon1.2.5构建，每个必须有$init, $remove，onInit方法， 以便让框架自行管理创建与销毁。$remove注意对存在子节点的元素进行内部清空，elem.innerHTML = elem.textContent = ""，注意移除组件内部绑定的事件回调。
<blockquote>
需要值得注意的是,$remove操作会在元素移出DOM树时触发,但普通的移动节点操作也会让元素离开DOM树,这时就会引发$remove操作,
导致元素上面的组件被销毁.为防止误杀,我们在移动节点时,可以在元素定义msRetain属性,elem.msRetain = true,待到移动后再置为false
</blockquote>
</li>
<li>
组件的$init方法里面, 在扫描后最好再调用一个onInit回调,传入当前组件的 vmodel, options, vmodels, this指向当前元素
<blockquote>
$init: function(){
element.innerHTML = "ui-template"
avalon.scan(element, _vmodels)
if(typeof options.onInit === "function" ){
//vmodels是不包括vmodel的
options.onInit.call(element, vmodel, options, vmodels)
}
}
</blockquote>
<p>这样用户就不需要定义组件的$id了</p>
</li>
<li>
组件在引入avalon的依赖时,直接define(["avalon"], fn)就行了,不需define(["../avalon"],fn)或define(["./ddd/avalon"],fn),因为avalon是一个核心模块，框架内部对它做了处理
</li>
<li>所有与类名相关的属性与方法 ,都改成Class, 不要用Cls, 你们看一下avalon都用hasClass, addClass, removeClass,要保持统一感
不打算暴露出来的方法与属性就不要放到VM上,以减轻以后升级的成本.我们可以在mix之前，将它们delete掉</li>
<li>私有方法应该尽量放在JS文件的下面，可以参看nodejs的库</li>
<li>字符串除非里面存在双引号才用单引号括起来，一般都是用双引号</li>
<li>能不写分号就不要写分号，了解JS自动添加分号的规则，当然你们改了要跑一遍，
参看这里<a href="http://www.zhihu.com/question/20298345"> http://www.zhihu.com/question/20298345/</a></li>
<li>
组件要最大程度兼容之前的，不行就两个，一个是兼容的，一个无牵制的
</li>
<li>
组件的显示隐藏必须通过toggle属性, 对应onOpen,onClose回调
</li>
<li>
组件是插在哪一个元素里面是由container属性决定,可以是ID或元素节点(这主要是那些弹出组件)
</li>
<li>把数组形式的数据源对应的配置项命名为data</li>
<li>
组件必须有widgetElement属性，引用元素本身
</li>
<li>
有模板的组件的默认匹配项里必须getTemplate方法 ,用于修改template, template在vm中不可监控的
</li>
<li>尽量减举行监控元素，善用$skipArray。</li>
<li>为元素绑定事件时，注意不要覆盖用户预置的ms-click, ms-keyup等事件</li>
<li>
组件必须有改写模板的配置项,参看@组件的popup
</li>
<li>
组件的模板必须独立出来， 组件的模板与样式合而为一,通过MS_OPTION_STYLE分隔,在组件第一次加载时,添加到avalonStyle.cssText里面去
</li>
<li>
组件的模板请使用MS_OPTION_*做占位符
</li>
<li>
组件的回调名应该以onXxx开头
</li>
<li>
组件的模板编写,请遵循<a href="http://www.cnblogs.com/rubylouvre/p/3642024.html">《avalon 的HTML规范》</a>
</li>
</ul>
</body>
</html>