knockout简介
- 前言
- knockout到底是很么
- knockout的使用
前言
这一段时间,公司要完善一些代码,有幸接触到了knockout,knockout框架(以下简称KO)是微软推出的一款MVVM的框架,一说起微软就会联想起万恶的IE系列,对于开发人员来说是折磨的,当然,KO是微软的儿子,自然而然的选择了要跟大家和谐相处,所以,KO最低可以兼容到IE6。
讲述的目的是能够让大家明白使用方法,所以追求极简代码。
#为什么使用MVVM框架
相信刚入这一行不久的部分开发人员都很郁闷,为什么要使用框架,对于我个人而言,我认为每有一个框架都要学习,这个代价不如自己进行开发。当然,在此之前我没有开发过大一些的系统或是应用,直到接触到了这些以后,才会明白。
我个人的思想,使用一款框架之前需要给自己做一个假设,我为什么要使用这个框架,框架是否能够帮助我简化开发,也就是我们需要很了解框架的构成,这一点很重要。当然了,这个想法不适用于初学者或者是老手,适用于了解一部分框架而囫囵吞枣使用的人,不能否认,我不喜欢学习框架 。! - - !
knockout到底是很么
前面提到了KO是一款MVVM框架,如今MVVM框架也已经很是盛行了,例如angular、react、vue等等。我头一次接触ko的时,其实不明白什么是MVVM框架,所以,在这里我想稍微借鉴百度说一下什么是MVVM框架。
MVVM是Model-View-ViewModel的简写,是MVC框架的改进版,MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。
百度百科MVVM传送门
就KO框架来说,M - V - VM表现为:
<!-- VM 真正的核心,数据层向视图层的过程,ko已经帮助你封装好了 -->
<script type="text/javascript" src="konckout-3.5.0.min.js"></script><!-- 这就是 V 层的表现 -->
<body><div data-bind="text: name"></div><div data-bind="text: age"></div>
</body>
<!-- 这就是 M 层的表现,当然没有连接数据库,自定义数据 -->
<script>var data = [{ name: '张三', age: '18' }]var viewModel = {name: ko.observable('张三'),age: ko.observable('18')}ko.applyBindings(viewModel);viewModel.name(data[0].name).age(data[0].age);
</script>
我们直白一点,从上述页面的描述中可以看出,ko框架所做的工作就是将DATA数据与DOM元素搭上关系,能够由数据直接操控页面的行为,这样方便开发人员能够专注于数据处理,而对于DOM操作则交给了ko框架,简化了开发
knockout的使用
我们之前了解到ko所做的工作,现在我们来聊聊它的使用。如同所有代码一样,想要使用ko,就需要对其进行入口配置,
ko.applyBindings(viewModel) && ko.applyBindings(new viewModel())
可以看出ko可以接收两种值,对象和函数
var viewModel = {name: ko.observable('张三'),age: ko.observable('18')
}
&&
var viewModel = function(){this.name = ko.observable('张三');this.age = ko.observable('18');
}
在这里我们可以看出,对象(方法)的目的是为了将数据输出
<div data-bind="text: name"></div><div data-bind="text: age"></div>
最后,我们进行数据的绑定。
有一点值得一提,大多数MVVM框架的绑定绑定分为 none/one-way/two-way,而ko并没有one-way(单向绑定),所有的绑定都是双向绑定。