一、简介
controller.js是一个简洁的，基于jQuery的mvvm框架。它没有使用到ES6的高级特性，所以兼容所有浏览器环境。它没有使用继承模式，而是不断的mixin扩展。
压缩后只有12K, gzip后会更小。
使用时引入 jquery.js 与 controller.js 即可。
<script src="/jquery.js"></script>
<script src="controller.js"></script>
二、创建一个控制器
控制器使用
jQuery.fn的扩展语法，对指定的dom以及子dom进行控制。
<div id="demo">
<h2></h2>
</div>
<script>
$('#demo').controller({
state: {
title: '这是一个标题'
},
view: {
self: 'title'
}
});
-
state定义了一个数据集，可以映射到视图的每个属性去，我们可以使用setState(name, val)来手动修改状态值。 -
view定义了我们要捕获的节点或者子节点，对它们添加事件，绑定状态。
三、默认的全局控制器
为了解决不同控制器的相互通讯，我们默认创建一个全局控制器，挂载在
$对象，可以使用$.defaultController来引用它。
$.defaultController.setSate('userIsLogin', true);
我们可以在其它控制器中监听它的状态变化，使用双下划线前缀即可。
$('#demo').controller({
view: {
self: '__title'
}
});
$.defaultController.setState('__title', '这是一个全局的状态');
我们也可以监听它的事件。
$('#demo').controller({
created: function(){
this.on('__changeTitle', function(val){
alert(val);
});
}
});
$.defaultController.emit('changeTitle', '这是一个全局的状态');
四、控制器的生命周期钩子
我们只提供了两个生命周期钩子
mounted,created, 这是两个配置方法，直接在控制器中定义。
$('#demo').controller({
mounted: function(){
alert('所有视图没有绑定前执行');
},
created: function(self){
alert(self.name)
}
});
五、状态的设置与更新
状态可以预定义在控制器的配置中，也要以随时添加。
-
.setState(name, value[, isUpdate]), isUpdate 是否强制刷新。
.setState(name, function), 可以使用一个函数来编辑值返回。
$('#demo').controller({
state: {
title: 'about javascripr framework',
size: 100,
url: 'http://www.baidu.com'
},
created: function(self){
alert(this.state.title);
alert(this.getState('size'));
this.setState('newTitle', 'newTitle');
this.setState({
size: 200
});
console.log(this.state);
}
});
-
.setArrayState(name, index, value), 更新数据某个下标对应的值。 -
this.state可以取到整个状态存储对象，也可以读到状态的值。 -
this.getState(name[, defaultValue]), 这个方法可以在状态不存在的时候，返回一个默认值。
六、视图的绑定
可以把状态与视图绑定起来，转变为响应式结构，这个由
view设置。
view是一个 json对象，键名为dom选择器，值为设置选项。
配置项可以全部看做是一个指令，当状态变化时，dom的某个方面要做出响应。
$('#demo').controller({
state: {
title: 'about javascripr framework',
size: 100,
url: 'http://www.baidu.com',
color: 'red',
show: false
},
view: {
'span': 'title',
h2: {
'show': 'isShow',
onclick: function(e){
alert(this.findEl(e).html())
}
},
div: {
'style:background': 'color'
}
}
});
- 如果配置项是一个字符串，默认转换为
{html: val}, 即内容html。 - 支持
jQuery的attr, css, prop方法设置。 - 支持
jQuery的所有扩展方法。
七、监听状态 watch
watch配置可以单独的对状态响应进行编程，在view配置中无法直接实现的，可以在这里进行更复杂的设置，也可以做出一个多状态聚合的操作，来实现类似计算属性的功能。
image.png
<div id="demo" class="container mt">
<textarea class="form-control"></textarea>
<br>
<span class="help-block"></span>
</div>
<script>
$('#demo').controller({
state: {
title: 'default text',
maxSize: 100
},
view: {
textarea: {
model: 'title'
},
span: 'lastSize | `还能输入{#}字`'
},
watch: {
title: function(v){
this.setState('lastSize', this.state.maxSize - v.length);
}
}
});
</script>
-
监听进度
image.png
<div id="demo" class="container mt">
<input type="text" class="form-control"/>
<br>
<div class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<span class="help-block"></span>
</div>
<script>
$('#demo').controller({
state: {
size: 10
},
view: {
input: {
'model.number': 'size'
},
'.progress-bar':{
'style:width': 'progress'
},
span: 'progress'
},
watch: {
size: function(size){
this.setState('progress', size + '%');
}
}
});
</script>
八、方法与事件
- 控制器的方法放置在
methods项中，它是上下文强制绑定的，不用担心 this的问题。
方法也可以直接做为view中的 事件的配置。 - 控制器可以
emit手动触发事件，on进行监听事件。 - 注意事件创建时会响应最后一次的触发。
$('#demo').controller({
methods: {
show: function(){
this.emit('show', this.name)
}
},
created: function(){
this.show();
this.on('show', function(v){
alert('show event is emit: ' + v);
})
}
});
网友评论