文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

开源框架knot.js的优势都有哪些

2023-06-17 06:28

关注

本篇文章给大家分享的是有关开源框架knot.js的优势都有哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

knot.js 这个项目其实两年前就已经开始并且成型了,它的第一个版本实际上已经被我应用到自己的项目中已经一年有余,效果很不错。不过由于一直忙于工作和小孩,再加上拖延症爆发,直到现在才将这个项目彻底重构完成,并架设了网站和撰写了详细的文档。

Knot.js并不是简单的“另一个”前端MVVM框架。 比较AngularJS,KnockoutJS等前辈,knot.js有很多创新和突破,下面我简单介绍下knot.js的几大优势:

CBS

CBS是一种全新的前端开发方式。它的名字来自于“Cascading Binding Sheet”, 看起来是不是和“CSS”很像?实际上它的工作方式也和CSS非常相似,熟悉CCS的你几乎不需要多少额外的成本就能学会。

就像CSS把样式从HTML中提取出来使得网页的可维护性得以大幅提高, CBS把混杂在HTML中的数据绑定逻辑提取出来,形成独立的,结构化的CBS块或者CBS文件,让你的HTML和数据绑定逻辑清爽易读。

下图左边是AngularJS的数据绑定配置实例片段,右边是同样功能的CBS化之后的knot.js配置实例片段,knot.js明显清爽很多。 随着项目的变大和变复杂,CBS带来的优势将会十分显著。事实上去年让我冒险将完全不成熟的knot.js应用于项目的主要原因就是我实在无法抵挡CBS 带来的诱惑。 相信你只要尝试一下CBS也会有类似的感受。

开源框架knot.js的优势都有哪些

自动数据感知

Knot.js的另一项特色是数据自动感知功能。  传统MVVM框架为了实现数据感知(侦测数据变化以修改UI),往往逼迫用户按它的要求和规范编写model/view  model,你所熟悉的一切在框架里都变了,甚至一个简单的计时器都得重新学习,全程学习曲线均相当陡峭。

Knot.js则几乎不对你的model/view model做任何要求,哪怕是一个直白的json对象,knot.js也能自动建立双向绑定。你以前所有的知识在knot.js中都有效,只需通过简单地熟悉下Knot.js中寥寥的几个概念,你就能迅速上手。

下图左边是AngularJS的代码片段,右边是使用Knot.js后的代码片段。你应该能发现Knot.js的代码和你平时写的js代码几乎没什么不同。

开源框架knot.js的优势都有哪些

调试器

相信任何一个用过框架的程序猿都有过和框架搏斗的痛苦经历。一个小小的配置错误,就能杀掉你一个下午的时间。  Knot.js希望改变这个现状。所以我模仿了常见的CSS调试器开发了knot.js  CBS调试器,使你能够实时监控整个系统内各个HTML元素上的绑定状态。knot.js调试器甚至还提供了CSS调试器常见的鼠标选取元素/元素高亮功 能,让你轻易定位自己想要监控的HTML元素。

knot.js调试器基本上把整个系统变成了一个白盒系统,所有的工作细节均能一览无遗。你开发过程中的绝大多数问题都能通过调试器解决。

开源框架knot.js的优势都有哪些

Knot.js还有这些优点

  1. 文件很小。压缩后不过45k(不含debugger)。

  2. 快速。根据我的初步测试,knot.js仅略慢于直接使用jQuery操作DOM Tree,快过AngularJS。http://www.knotjs.com/performance/

  3. Knot.js功能齐全。虽然文件微小,但这是因为整个系统设计颇为简洁。你需要的各种功能基本上knot.js都已经提供。

  4. 自由。knot.js在整个设计过程中十分注意程序员对系统的控制性。你几乎可以在任何一个步骤介入,增加自己想要的逻辑。使用这个框架,你不会比直接使用jQuery多感受到多少限制。

  5. 免费。基于MIT License。

一些提示

  1. Knot.js 支持所有的主流浏览器,但不支持ie8及更早版本

  2. 这是Knot.js的***个正式发布版本

  3. 虽然我会持续发表博客介绍Knot.js的方方面面,但在中文网站建立起来之前,你可能需要阅读英文文档获得帮助。

一个例子

下面是一个简单的例子,以期给你一个初步的直观感受。 这个例子显示一个文本框,输入姓名,就能得到来自knot.js的问候。你可以访问knot.js主页试用: http://www.knotjs.com

你可以立即访问 http://www.knotjs.com/tutorial/ 开始学习使用knot.js。

HTML

<div class="knot_example">      <!-- 清晰干净的HTML,维护便利 -->      <h4>Greeting from knot.js</h4>     <p>         <label>Input your name here: </label>         <input type="text">     </p>     <p>         <b id="helloString"></b>     </p> </div>

CBS

 .knot_example input{     value[immediately:1] > {return value? ("Hello " + value + " !"): ""}         : #helloString.text; }

以上就是开源框架knot.js的优势都有哪些,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯