KnockOut.js实战（1）

最新推荐文章于 2024-05-27 09:49:00 发布

小黑前端攻城狮

最新推荐文章于 2024-05-27 09:49:00 发布

阅读量633

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43751946/article/details/121163794

版权

大家应该使用vue,angular,react比较多，但是在某种特定情况下需兼容ie（尽管ie已经废除，但不排除用户必须要求使用ie），下面记录本人项目实战使用ko。

Knockout是微软出品，是MVVM模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6。

Knockout是一个JS的MVVM模式的实现，Knockout是建立在3个核心功能之上：

	1.属性监控与依赖追踪
	2.声明式绑定
	3.模板机制

其他优点：

	1.纯JavaScript库-兼容任何服务器和客户端技术。
	2.可以很好的应用到已有的应用程序中-而不需要程序主要架构发生变化。
	3.简洁-采用Gzip压缩之后只要13K。
	4.兼容任何主流浏览器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)
	5.一套全面完整的规范（采用行为驱动开发）-这意味着在新的浏览器或平台中也能够很容易验证通过。

其实ko和vue用法非常类似，直接上简单的demo code！

1.单向绑定

<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo1-单向绑定</title>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
    <body>
        <!--单向绑定-->
        <div>
            <p>First name: <strong data-bind="text: firstName"></strong></p>
            <p>Last name:  <strong data-bind="text: lastName"></strong></p>
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name:  <input data-bind="value: lastName" /></p>
        </div>
    
        <!--这段脚本实际项目中应该放在对应的JS文件中，然后在html中通过Script标签来引用即可-->
        <!--JS代码也就是业务逻辑部分，将业务逻辑与Html代码分割开，使得View代码更加简洁，这样后期也易于维护-->
        <script type="text/javascript">
            function ViewModel() {
                this.firstName = "Tommy";
                this.lastName = "Li";
            }
            ko.applyBindings(new ViewModel());
        </script>
    </body>
</html>

上面的例子只是完成了单向绑定的操作。即在上面的例子你会发现，当改变input标签中的值并离开焦点时，上面的值不会更新。其实，KnockoutJS中自动更新功能不会自动添加的，需要对应的函数支持，这个函数就是observable函数，下面具体看看双向绑定的例子：

2.双向绑定

<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo2-双向绑定</title>
    
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
    <!--双向绑定-->
    <div>
        <p>First name: <strong data-bind="text: firstName"></strong></p>
        <p>Last name:  <strong data-bind="text: lastName"></strong></p>
        <p>First name: <input data-bind="value: firstName"/></p>
        <p>Last name:  <input data-bind="value: lastName" /></p>
    </div>
 
    <script type="text/javascript">
        function ViewModel() {
            this.firstName = ko.observable("Tommy");
            this.lastName = ko.observable("Li");
        }
        
        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

3.依赖跟踪

接下来让我们看下如何使用KO中的computed函数来完成依赖跟踪。具体例子的实现代码如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo3-依赖跟踪</title>
   
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
    <!--双向绑定-->
    <div>
        <p>First name: <strong data-bind="text: firstName"></strong></p>
        <p>Last name:  <strong data-bind="text: lastName"></strong></p>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name:  <input data-bind="value: lastName"/></p>
        <p>Full name:  <strong data-bind="text: fullName"></strong></p>
        <button data-bind="click: capitalizeLastName">LastName To Upper</button>
    </div>
 
    <script type="text/javascript">
        function ViewModel() {
            this.firstName = ko.observable("Tommy");
            this.lastName = ko.observable("Li");
            // 依赖跟踪
            this.fullName = ko.computed(function () {
                return this.firstName() + " " + this.lastName();
            },this);
            
            // 通过代码改变observable的值
            this.capitalizeLastName = function() {
                this.lastName(this.lastName().toUpperCase());
            };
        }
 
        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

其实ko和三大框架非常相似，也容易上手，后面会慢慢更新比较复杂一点的逻辑！

小黑前端攻城狮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
KnockOut.js实战（1）

大家应该使用vue，angular,react比较多，但是再某种特定情况下需兼容ie（尽管ie已经废除，但不排除用户必须要求使用ie），下面记录本人项目实战使用ko。Knockout是微软出品，是MVVM模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6。Knockout是一个JS的MVVM模式的实现，Knockout是建立在3个核心功能之上： 1.属性监控与依赖追踪 2.声明式绑定 3.模板机制其他优点： 1.纯JavaScript库-兼容任何服务器和客户端技
复制链接

扫一扫