Skip to content

Commit cc6e51e

Browse files
DDDBearDDDBear
committed
Merge branch 'master' of https://github.com/ecomfe/esui 
2 parents e0b5b26 + b55d390 commit cc6e51e

File tree

23 files changed

+5990
-172
lines changed

23 files changed

+5990
-172
lines changed

‎demo/link.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Link - ESUI Demo</title>
6+
<script src="loader/esl.js"></script>
7+
<script src="loader/config.js"></script>
8+
<link rel="stylesheet" href="demo.css" />
9+
</head>
10+
<body>
11+
<header>Link</header>
12+
<div class="container">
13+
<a data-ui-type="Link" href="http://www.baidu.com" target="_blank">www.baidu.com</a>
14+
<br />
15+
<hr />
16+
<a data-ui-type="Link" data-ui-href="http://www.baidu.com" data-ui-target="_blank">www.baidu.com</a>
17+
<br />
18+
<button id="op-get-href">getHref</button>
19+
<button id="op-get-text">getText</button>
20+
<button id="op-get-content">getContent</button>
21+
<button id="op-get-target">getTarget</button>
22+
<br />
23+
<button id="op-set-href">set href</button>
24+
<button id="op-set-target">set target(_self)</button>
25+
<button id="op-set-text">set text</button>
26+
<button id="op-set-content">set content</button>
27+
<br />
28+
<span data-ui-type="Link" data-ui-href="http://www.baidu.com" data-ui-target="_blank">tagName not A</span>
29+
</div>
30+
<script>
31+
require(
32+
[
33+
'esui',
34+
'esui/Link',
35+
'css!esui/css/main.css'
36+
],
37+
function (ui) {
38+
var link = ui.init()[1];
39+
document.getElementById('op-get-href').onclick = function () {
40+
alert(link.getHref());
41+
};
42+
document.getElementById('op-get-target').onclick = function () {
43+
alert(link.getTarget());
44+
};
45+
document.getElementById('op-get-text').onclick = function () {
46+
alert(link.getText());
47+
};
48+
document.getElementById('op-get-content').onclick = function () {
49+
alert(link.getContent());
50+
};
51+
document.getElementById('op-set-href').onclick = function () {
52+
link.setHref('https://github.com');
53+
};
54+
document.getElementById('op-set-target').onclick = function () {
55+
link.setTarget('_self');
56+
};
57+
document.getElementById('op-set-text').onclick = function () {
58+
link.setText('<i></i>');
59+
};
60+
document.getElementById('op-set-content').onclick = function () {
61+
link.setContent('<i>∏∏∏∏∏∏∏∏∏balabala</i>');
62+
};
63+
}
64+
)
65+
</script>
66+
</body>
67+
</html>

‎src/.jshintrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"quotmark": "single",
1515
"regexp": false,
1616
"undef": false,
17-
"unused": true,
17+
"unused": "vars",
1818
"strict": false,
1919
"trailing": false,
2020
"maxparams": 20,

‎src/Control.js‎

Lines changed: 108 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -18,91 +18,133 @@ define(
1818
* @param {Object} options 初始化参数
1919
*/
2020
function Control(options) {
21-
helper.init(this, options);
22-
helper.afterInit(this);
21+
this.children = [];
22+
this.childrenIndex = {};
23+
this.states = {};
24+
this.events = {};
25+
this.domEvents = {};
26+
27+
this.initOptions(options);
28+
29+
if (!this.main) {
30+
this.main = this.createMain();
31+
}
32+
33+
// 自创建id
34+
if (!this.id) {
35+
this.id = helper.getGUID();
36+
}
37+
38+
// 初始化视图环境
39+
helper.initViewContext(this);
40+
41+
// 初始化扩展
42+
helper.initExtensions(this);
43+
44+
this.lifeCycle = Control.LifeCycle.INITED;
45+
46+
this.fire('init');
2347
}
2448

2549
/**
2650
* 控件生命周期枚举
2751
*
28-
* @inner
52+
* @static
2953
* @type {Object}
3054
*/
31-
var LifeCycle = {
55+
Control.LifeCycle = {
3256
INITED : 1,
3357
RENDERED : 2,
3458
DISPOSED : 4
3559
};
3660

37-
/**
38-
* 控件生命周期枚举
39-
*
40-
* @static
41-
* @type {Object}
42-
*/
43-
Control.LifeCycle = LifeCycle;
44-
4561
Control.prototype = {
4662
constructor: Control,
4763

64+
/**
65+
* 初始化控件需要使用的选项
66+
*
67+
* @param {Object=} options 构造函数传入的选项
68+
* @protected
69+
*/
70+
initOptions: function (options) {
71+
options = options || {};
72+
this.setProperties(options);
73+
},
74+
4875
/**
4976
* 创建控件主元素
5077
*
5178
* @return {HTMLElement}
79+
* @protected
5280
*/
5381
createMain: function () {
5482
return document.createElement('div');
5583
},
5684

5785
/**
5886
* 渲染控件
87+
*
88+
* @public
5989
*/
6090
render: function () {
61-
helper.beforeRender(this);
62-
helper.renderMain(this);
63-
helper.afterRender(this);
91+
if (this.lifeCycle === Control.LifeCycle.INITED) {
92+
this.fire('beforerender');
93+
94+
// 通用的渲染逻辑
95+
if (!this.main.id) {
96+
this.main.id = helper.getId(this);
97+
}
98+
99+
helper.addClass(this, this.main);
100+
this.setDisabled(this.disabled);
101+
}
102+
103+
this.lifeCycle = Control.LifeCycle.RENDERED;
104+
105+
// 由子控件实现
106+
this.repaint();
107+
108+
if (this.lifeCycle === Control.LifeCycle.INITED) {
109+
this.fire('afterrender');
110+
}
64111
},
65112

66113
/**
67114
* 重新渲染视图
68115
* 仅当生命周期处于RENDER时，该方法才重新渲染
69-
*
116+
*
117+
* @param {Array=} 变更过的属性的集合
70118
* @protected
71119
*/
72-
repaint: function () {
73-
if (this.lifeCycle == LifeCycle.RENDERED) {
74-
this.render();
75-
}
120+
repaint: function (changes) {
76121
},
77122

78123
/**
79124
* 将控件添加到页面的某个元素中
80125
*
81126
* @param {HTMLElement} wrap 控件要添加到的目标元素
127+
* @public
82128
*/
83129
appendTo: function (wrap) {
84-
if (!this.main) {
85-
this.main = this.createMain();
86-
wrap.appendChild(this.main);
87-
this.render();
88-
}
130+
wrap.appendChild(this.main);
131+
this.render();
89132
},
90133

91134
/**
92135
* 将控件添加到页面的某个元素之前
93136
*
94137
* @param {HTMLElement} reference 控件要添加到之前的目标元素
138+
* @public
95139
*/
96140
insertBefore: function (reference) {
97-
if (!this.main) {
98-
this.main = this.createMain();
99-
reference.parentNode.appendChild(this.main, reference);
100-
this.render();
101-
}
141+
reference.parentNode.appendChild(this.main, reference);
142+
this.render();
102143
},
103144

104145
/**
105146
* 销毁释放控件
147+
* @public
106148
*/
107149
dispose: function () {
108150
helper.beforeDispose(this);
@@ -115,6 +157,7 @@ define(
115157
*
116158
* @param {string} name 属性名
117159
* @return {*}
160+
* @public
118161
*/
119162
get: function (name) {
120163
var method = this['get' + lib.toPascalCase(name)];
@@ -131,6 +174,7 @@ define(
131174
*
132175
* @param {string} name 属性名
133176
* @param {*} value 属性值
177+
* @public
134178
*/
135179
set: function (name, value) {
136180
var method = this['set' + lib.toPascalCase(name)];
@@ -139,8 +183,16 @@ define(
139183
return method.call(this, value);
140184
}
141185

142-
this[name] = value;
143-
this.repaint();
186+
var oldValue = this[name];
187+
if (oldValue !== value) {
188+
this[name] = value;
189+
var record = {
190+
name: name,
191+
oldValue: oldValue,
192+
newValue: value
193+
};
194+
this.repaint([record]);
195+
}
144196
},
145197

146198
/**
@@ -149,11 +201,28 @@ define(
149201
* @param {Object} properties 属性值集合
150202
*/
151203
setProperties: function (properties) {
152-
for (var name in properties) {
153-
this[name] = properties[name];
204+
var changes = [];
205+
for (var key in properties) {
206+
if (properties.hasOwnProperty(key)) {
207+
var oldValue = this[key];
208+
var newValue = properties[key];
209+
if (oldValue !== newValue) {
210+
this[key] = newValue;
211+
var record = {
212+
name: key,
213+
oldValue: oldValue,
214+
newValue: newValue
215+
};
216+
changes.push(record);
217+
}
218+
}
154219
}
155220

156-
this.repaint();
221+
if (changes.length
222+
&& this.lifeCycle === Control.LifeCycle.RENDERED
223+
) {
224+
this.repaint(changes);
225+
}
157226
},
158227

159228
/**
@@ -451,8 +520,10 @@ define(
451520
}
452521

453522
// 调用listeners
454-
callListeners(me[type]);
455-
callListeners(me['*']);
523+
var events = me.events;
524+
525+
callListeners(events[type]);
526+
callListeners(events['*']);
456527
}
457528
};
458529

‎src/Extension.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
define(function () {
1+
define(function (require) {
22
var lib = require('./lib');
33

44
/**
@@ -8,7 +8,7 @@ define(function () {
88
* @param {Object=} options 初始化的参数
99
*/
1010
function Extension(options) {
11-
lib.mix(this, options);
11+
lib.extend(this, options);
1212
}
1313

1414
/**
@@ -84,4 +84,6 @@ define(function () {
8484
}
8585
this.target = null;
8686
};
87+
88+
return Extension;
8789
});

0 commit comments

Comments
 (0)