我的开源项目Knot.js正式发布，请大家捧场啊 :-)

woodheadz · 发表于 14-7-2015 15:00:46

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？FreeOZ用户注册

x

说起来这个项目一定程度上可以说是诞生于FreeOZ的，所以我也把我推广knot.js的第一帖发在这里

。
两年前我做好knot.js的第一个原型后曾经在Freeoz发帖讨论，在讨论过程中忽然产生了创造CBS的灵感，而CBS可以说是knot.js最大的一项突破。
当时做完支持CBS的第二个原型之后，因为实在喜欢CBS带来的编程体验，我就冒险把它用于我手上的正式项目之中，取得了很好的效果。可惜再后来忙于工作和小孩，再加上拖延症爆发，到今天才把这东西重构完毕，并架设好网站写完文档。

这个项目基于MIT协议发布，官方网站在这里：http://www.knotjs.com

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的另一项特色是数据自动感知功能。传统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希望改变这个现状。所以我模仿了常见的CSS调试器开发了knot.js CBS调试器，使你能够实时监控整个系统内各个HTML元素上的绑定状态。knot.js调试器甚至还提供了CSS调试器常见的鼠标选取元素/元素高亮功能，让你轻易定位自己想要监控的HTML元素。

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

登录/注册后可看大图

Knot.js还有这些优点

文件很小。压缩后不过45k（不含debugger）。
快速。根据我的初步测试，knot.js仅略慢于直接使用jQuery操作DOM Tree，快过AngularJS。http://www.knotjs.com/performance/
Knot.js功能齐全。虽然文件微小，但这是因为整个系统设计颇为简洁。你需要的各种功能基本上knot.js都已经提供。
自由。knot.js在整个设计过程中十分注意程序员对系统的控制性。你几乎可以在任何一个步骤介入，增加自己想要的逻辑。使用这个框架，你不会比直接使用jQuery多感受到多少限制。
免费。基于MIT License。

关于Knot.js的详细教程，请访问Knot.js 官网 http://www.knotjs.com
工作中有前端内容的兄弟们，我强烈推你仔细了解一下Knot.js，我相信看完之后你不会觉得是在浪费你的时间。

另外... 另外我最近要换工作了

。
知道布村这边有好的工作机会的弟兄帮忙推荐一下啊，我从前端到后端，从C#, javascript到php，都是一条好枪。如果有不错的中短期contract机会更好，我先谢谢啦！

gobre · 发表于 14-7-2015 15:17:07

支持一下

，我现在在用angular，觉得坑很多。楼主都自己写前端框架了，找工作肯定不在话下

DDD888 · 发表于 14-7-2015 15:20:03

gobre 发表于 14-7-2015 14:17
支持一下，我现在在用angular，觉得坑很多。楼主都自己写前端框架了，找工作肯定不在话下

可以具体说下哪些坑很多？

我好奇

woodheadz · 发表于 14-7-2015 15:25:43

gobre 发表于 14-7-2015 14:17
支持一下，我现在在用angular，觉得坑很多。楼主都自己写前端框架了，找工作肯定不在话下

花点时间看看我这个？

我就是因为对angularjs非常不满，才开始做这玩意儿的

DDD888 · 发表于 14-7-2015 15:35:17

woodheadz 发表于 14-7-2015 14:25
花点时间看看我这个？
我就是因为对angularjs非常不满，才开始做这玩意儿的

请问如何混淆cbs文件啊？

woodheadz · 发表于 14-7-2015 15:38:52

DDD888 发表于 14-7-2015 14:35
请问如何混淆cbs文件啊？

cbs文件只能mini化，不能混淆。
这类前端MVVM框架都有类似的问题。

fenzuan · 发表于 14-7-2015 16:24:24

woodheadz 发表于 14-7-2015 14:38
cbs文件只能mini化，不能混淆。
这类前端MVVM框架都有类似的问题。

看了一下，一无所知，实在太高深了。不知能否借此机会问一下Geek, 我的电脑，用windows8.1的，最近突然会有广告自动弹出，旅游的，卖东西的都有。每天一到两个，关了他们，后面不会出现了。但是好讨厌。请问一下，自已能不能处理这个问题？？

woodheadz · 发表于 14-7-2015 16:51:39

fenzuan 发表于 14-7-2015 15:24
看了一下，一无所知，实在太高深了。不知能否借此机会问一下Geek, 我的电脑，用windows8.1的，最近突然会 ...

估计是你装了什么国产的流氓软件了？
把你机器上国产软件全部删掉试试，什么pps之类的

ubuntuhk · 发表于 14-7-2015 16:52:37

谢谢woodheadz的贡献，CBS，又学到一个新词，找时间试试

打算怎么推广你的框架？本地meetup先推广一下？

woodheadz · 发表于 14-7-2015 16:53:57

ubuntuhk 发表于 14-7-2015 15:52
谢谢woodheadz的贡献，CBS，又学到一个新词，找时间试试

打算怎么推广你的框架？本地meetup先 ...

我还在愁这事呢，你有什么好建议？

ubuntuhk · 发表于 14-7-2015 16:55:55

woodheadz 发表于 14-7-2015 15:53
我还在愁这事呢，你有什么好建议？

本地和online的兴趣组都试试？能说服一些有点名气的网站做示范就更有说服力了。

ubuntuhk · 发表于 14-7-2015 16:58:42

写一些介绍文章，发到知名的IT网站（比如国内的CSDN）？

woodheadz · 发表于 14-7-2015 17:04:33

ubuntuhk 发表于 14-7-2015 15:58
写一些介绍文章，发到知名的IT网站（比如国内的CSDN）？

嗯，今天开始在博客园开系列博客了： http://www.cnblogs.com/knotjs/ar ... e_announcement.html

另外计划去下本地的几个meetup，我想现在中文网站上推广推广，有点感觉了再往英文技术网站上靠

ubuntuhk · 发表于 14-7-2015 21:56:12

woodheadz 发表于 14-7-2015 16:04
嗯，今天开始在博客园开系列博客了： http://www.cnblogs.com/knotjs/archive/2015/07/14/Knotjs_release ...

看了一下例子，有一个建议，能不能把那些js代码合并成一个，像jQuery和AngularJS那样，否则每个html页面都要引用一堆js代码，感觉有点麻烦。

（PS，我是js外行，纯属看热闹的

）

woodheadz · 发表于 14-7-2015 22:33:19

ubuntuhk 发表于 14-7-2015 20:56
看了一下例子，有一个建议，能不能把那些js代码合并成一个，像jQuery和AngularJS那样，否则每个html页 ...

我有合并的，在发布版本的压缩包里有个knot.min.js，引用那个就够了。如果要引用debugger则再增加引用knot.debug.js就好啦

Serin · 发表于 14-7-2015 23:05:29

不懂帮顶

MICHELLE07 · 发表于 15-7-2015 00:09:09

我也是路过看热闹的

DDD888 · 发表于 15-7-2015 14:29:05

请问你有没有json call server的例子吗？

另外我大致看了下你的网站，我感觉我从使用jquery到angularjs,我已经省去了许多代码，我仔细阅读了我自己写的使用angularjs的代码，感觉也没几行，我在工作里用jquery要写几千行，我估计如果我用angularjs重新写一下，大概也就几百行，但我没有重新写，因为我还没有掌握如何混淆用angularjs写的代码，我的老板对于保护公司的数据要求近乎苛刻，如果一共只有几k字节的混淆的javascript应该很容易被破解相对于几百k字节

你所说的html代码分离，我感觉就象使用jquery写代码到用angularjs写代码是从1 到95，如果使用你的，可能会95到97

但你的那个也有个学习的过程，现在我看你写的cbs代码，感觉就象看天书，我实在找不到一个强有力的理由来用你的代码

woodheadz · 发表于 15-7-2015 15:49:43

本帖最后由 woodheadz 于 15-7-2015 14:56 编辑

DDD888 发表于 15-7-2015 13:29
请问你有没有json call server的例子吗？

另外我大致看了下你的网站，我感觉我从使用jquery到angularjs, ...

Knot.js的好处就是你爱用什么手段和服务器联系都由得你。例如你直接用jquery ajax call server拿到的json，直接扔给Knot.js绑定就好了。我那个单页应用的tutorial里就是这样的用法。http://knotjs.com/tutorial/5

如果你用angularjs已经觉得很爽，当然没必要理会knot.js。但如果你看你项目里那些夹杂着各种tag的html不舒服，或者对用angularjs是的种种编码限制感到不爽，或者你才开始用angularjs不久，对这个框架种种和平时编码方式迥异的地方感到陌生，那么knot.js就很值得你去尝试了。
对CSS熟悉的话，CBS会上手很快。不信你认真看看第一个tutorial

如果你们特别讲究混淆，那么我建议你慎用绑定框架。不管什么绑定框架，必然都会在非javascript的代码里掺杂javascript对象的属性，方法。除非混淆器对绑定框架做了特别的支持，否则是不能混淆的。

DDD888 · 发表于 15-7-2015 18:25:31

本帖最后由 DDD888 于 15-7-2015 17:28 编辑

woodheadz 发表于 15-7-2015 14:49
Knot.js的好处就是你爱用什么手段和服务器联系都由得你。例如你直接用jquery ajax call server拿到的js ...

Thanks

I obfuscated request url/response data between browser and server. I have to obfuscate javascript to hide my logic about obfuscate request/response. I look for security feature when I select framework. I am using jquery which is fine for obfuscation.

ubuntuhk · 发表于 15-7-2015 22:43:46

woodheadz 发表于 14-7-2015 21:33
我有合并的，在发布版本的压缩包里有个knot.min.js，引用那个就够了。如果要引用debugger则再增加引用kn ...

我想应该不至于这么傻，哈哈。

不过例子也用这个合并版是不是好点？否则像我这种外行菜鸟看了例子代码可能会敬而生畏。

以前一直没重视JS，看来真要挤时间学JS了，太强大了，前端大家基本都向JS臣服了。

black_zerg · 发表于 16-7-2015 00:02:44

本帖最后由 black_zerg 于 15-7-2015 23:33 编辑

angular 就是个悲剧，到了2前面的都不兼容，整个变了。问题来了，如果都是好设计，为什么要变这么厉害？就是太挫了，他们自己都看不下去。这个就是上手容易，真做点事麻烦的要命。估计给designer之类看得顺眼，如果是full stack的根本用不着，双向绑定对我一点吸引力都没有有兴趣就搜索 angular sucks 还有为什么lib>framework

我记得一两年前我就在论坛上提出这个观点，angular就是个破玩意。现在我在网上是越来越常见类似的观点。我是纯兴趣，工作并不用angular,真要我用我肯定骂娘的更厉害。这些个破框架第一就是学起来麻烦，第二好不容易学会了，也就是有的时候巨好用，有的时候就巨艰难。多数又要开始跟他斗。属于简单东西变简单，复杂东西变得不可能。这有个毛用。没有什么不可替代性，反而这个破坏性巨大，根本就是反生产力。jquery就是好样的，虽然现在浏览器比以前好用多了，但是jquery这么些年了还是一条好枪。我觉得比较好用的typescript很不错。然后gulp还有哪些插件都很好用。atom不错。browser sync好用 sass好用那些什么mvc的都是可有可无，我分分钟手写一个

DDD888 · 发表于 16-7-2015 09:17:14

black_zerg 发表于 15-7-2015 23:02
angular 就是个悲剧，到了2前面的都不兼容，整个变了。问题来了，如果都是好设计，为什么要变这么厉害？就 ...

我感觉angularjs挺好的，就是学起来有个过程，但好东西都是要花投入的啦

我大学两年级的时候自己学习写C语言还花了一周时间在图书馆里呢

学习angularjs是渐进的，所以很有乐趣，我发觉我用jquery写的代码太长了，不停的用onevent啦

black_zerg · 发表于 16-7-2015 10:24:02

公允的说 Angular 好不好要看应用场景但是绝对不好上手相对 jQuery就是性价比超高但是我个人觉得学 JavaScript的话就要有一切手写的能力 angular现在面临一个很大问题就是 2会整个不一样侧面反映了这玩意其实问题很多具体可以在网上搜搜

black_zerg · 发表于 16-7-2015 10:25:11

说的不对 angular是很好上手但是真做点复杂的东西就马上晕头转向

black_zerg · 发表于 16-7-2015 10:29:42

这个说深点就涉及到设计哲学这里双向绑定的作用是封装隐藏Dom操作那么问题来了这是否必要和可行特别是在web有各种类型的情况下不光是一网站

woodheadz · 发表于 16-7-2015 10:45:17

ubuntuhk 发表于 15-7-2015 21:43
我想应该不至于这么傻，哈哈。

不过例子也用这个合并版是不是好点？否则像我这种外行菜鸟看了例子代 ...

你是直接看github上的例子是不？我建议从tutorial开始看

woodheadz · 发表于 16-7-2015 10:48:26

本帖最后由 woodheadz 于 16-7-2015 09:49 编辑

black_zerg 发表于 16-7-2015 09:29
这个说深点就涉及到设计哲学这里双向绑定的作用是封装隐藏Dom操作那么问题来了这是否必要和可行特别是 ...

双向绑定的作用并不是封装和隐藏DOM操作。DOM被隐藏和封装只不过是因为angularjs实现的过程中产生的副作用罢了。
knot.js的双向绑定基于自动数据感知实现，所以不隐藏，不封装dom，所有的dom属性你都能直接绑定，和你用jquery的区别仅仅在于是写在代码里还是写在CBS里而已。

black_zerg · 发表于 16-7-2015 13:14:36

如果你不想封装 Dom操作，绑定目的在哪里

black_zerg · 发表于 16-7-2015 13:16:38

我对于这些 MVC 和绑定到 model 的设计的理解就是直接操 Dom 麻烦而且代码重复所以只想操 model

		自动登录	找回密码
密码			FreeOZ用户注册

FreeOZ

[IT技术] 我的开源项目Knot.js正式发布，请大家捧场啊 :-)

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

评分

评分

评分