Shulou(Shulou.com)06/02 Report--

This article is to share with you about the advantages of the open source framework knot.js, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

The knot.js project actually started and took shape two years ago, and its first version has actually been applied to my own project for more than a year, and the effect is very good. However, due to the busy work and children, and the outbreak of procrastination, the project has not been completely refactored until now, and the website has been set up and detailed documentation has been written.

Knot.js is not simply "another" front-end MVVM framework. Compared with AngularJS,KnockoutJS and other predecessors, knot.js has many innovations and breakthroughs. Let me briefly introduce several advantages of knot.js:

CBS

CBS is a new way of front-end development. Its name comes from "Cascading Binding Sheet". Does it look a lot like "CSS"? In fact, it works very much like CSS, and you who are familiar with CCS can learn it at little extra cost.

Just as CSS extracts styles from HTML to greatly improve the maintainability of web pages, CBS extracts the data binding logic mixed in HTML to form independent, structured CBS blocks or CBS files, making your HTML and data binding logic clean and easy to read.

On the left of the following figure is the data binding configuration example fragment of AngularJS, and on the right is the knot.js configuration example fragment with the same function after CBSization. Knot.js is obviously much cleaner. As the project gets bigger and more complex, the advantages of CBS will be significant. In fact, the main reason I risked applying completely immature knot.js to the project last year was that I couldn't resist the temptation of CBS. I'm sure you'll feel the same way if you try CBS.

Automatic data awareness

Another feature of Knot.js is automatic data awareness. In order to achieve data awareness (detecting data changes to modify UI), traditional MVVM frameworks often force users to write model/view model according to its requirements and specifications, everything you are familiar with has changed in the framework, and even a simple timer has to be relearned, and the whole learning curve is quite steep.

Knot.js requires almost nothing of your model/view model, even if it is a straightforward json object, knot.js can automatically establish two-way binding. All your previous knowledge works in knot.js, and you can get started quickly by simply familiarizing yourself with a few concepts in Knot.js.

The following figure shows the code snippet of AngularJS on the left and the code snippet after using Knot.js on the right. You should be able to find that Knot.js code is almost no different from your usual js code.

Debugger

It is believed that any programmer who has used the framework has had the painful experience of struggling with the framework. A small configuration mistake can kill you for an afternoon. Knot.js wants to change that. So I developed the knot.js CBS debugger in imitation of the common CSS debugger, which allows you to monitor the binding status of various HTML elements throughout the system in real time. The knot.js debugger even provides the mouse selection element / element highlight function that is common in CSS debuggers, allowing you to easily locate the HTML elements you want to monitor.

The knot.js debugger basically turns the entire system into a white-box system, with all the working details at a glance. Most of the problems in your development process can be solved through the debugger.

Knot.js also has these advantages.

The file is very small. It is only 45k after compression (excluding debugger).

fast. According to my preliminary tests, knot.js is only slightly slower than using jQuery directly to manipulate DOM Tree, faster than AngularJS. Http://www.knotjs.com/performance/

Knot.js is fully functional. Although the file is small, this is because the design of the whole system is quite simple. Basically, all the functions you need are already provided by knot.js.

free. Knot.js pays great attention to the programmer's control of the system during the whole design process. You can step in at almost any step to increase the logic you want. With this framework, you won't feel much more limited than using jQuery directly.

Free of charge. Based on MIT License.

Some hints.

Knot.js supports all major browsers, but not ie8 and earlier versions

This is the official release of Knot.js.

Although I will continue to blog about all aspects of Knot.js, you may need to read English documents for help before the Chinese website is set up.

An example

Here is a simple example to give you a preliminary intuitive feeling. This example shows a text box, enter the name, and you can get a greeting from knot.js. You can visit the knot.js home page to try it out: http://www.knotjs.com

You can immediately visit http://www.knotjs.com/tutorial/ to start learning to use knot.js.

HTML

Greeting from knot.js

Input your name here:

CBS

/ * this CBS binds the value attribute of the text box to the output of the text attribute text box of # helloString will be added with "Hello" and then output to # helloString.text "[immediately:1]" this option tells knot.js to update the data with each keystroke. * / .knot _ example input {value [immediately:1] > {return value? ("Hello" + value + "!"): "}: # helloString.text;} these are the advantages of the open source framework knot.js. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.