1000 lines of code to implement MVVM (like angular1.x.x, Vue)

Recently spent nearly half a month of time, I wrote a very small class angularjs/vue of the MVVM library. Currently used in a company project. Project hosted on GitHub Https://github.com/leonwgc/link

Perhaps many people think that now Angularjs, react, Vue, Knockout, Avalon and other frameworks/libraries in the endless, why do they have to build the same (similar) wheel?

The reasons are as follows:

1. From the initial Knockoutjs to now with Angularjs, wrote a lot of projects, has always wanted to write an MVVM practice practiced hand, by the way familiar with the consolidation of the most basic HTML, CSS, JS knowledge.

2. Recently independent one wrote a company project, with the Angularjs + ui-router, customer response how a landing registration page, not much things so slow (actually also OK, but is not the second open), well, I am also not good to explain that this is a single page site, only the first load slow point, the back soon , because everything is packaged together, I will log in before (including registration, login, account opening.) and landing after separate packaging, SPA (single page app) into a Twopa (cry), never more reference a JS file, and then egg angular + ui-router set down, even if minified also big hundreds of K, speed feel not much promotion (not seconds open), Considering this project browser just support ie8+, Chrome, Safari, Firefox and other latest version of the browser, and then looked at the recent hype compared to the more fierce vue, because this cubby angular small many, the back also fused with virtual DOM technology, see the principle of introduction and the official website, feel the realization of a similar thing is not difficult, and the current Vue contains too many things so much so that the library has become larger, at present my demand is only landing, registration seconds open (after landing the spa or to keep Angular+ui-router a set of family barrels, because the content of fancy, So no one thought that should be the second open "actually can not open the second"), do not want to introduce another big frame in one project, so make up your mind to write a set.

Link's Features:

1. Built-in directives like angular: X-bind, X-model, X-repeat, X-show, X-hide, X-class, x-disabled, X-view

Usage and angular NG-XX series consistent, recently added the corresponding instruction demo, plus a page and table demo, open the Project demo directory index.html, click the corresponding demo button to experience

Repeat Example:

class Example

form example (including model)

pagination Example

2. Filter function, like angular, can be customized filter, but currently only supported with X-bind use, temporarily does not support {{expr | filter}}

3. The built-in location.hash implementation of the routing function, followed by the HTML5 history API implementation, can be implemented with X-view implementation of the route loading template, but X-view is not necessary, followed by time and other examples.

4. Event support, support all browser-native events, event instructions start with x-on-, such as Click, with x-on-click= ' ClickHandler ' or x-on-click= ' ClickHandler () ' or x-on-click= ' cl Ickhandler (args.) ', you can see how to define and use from the relevant demo, the event is similar to Vue.

Now that link has met my project needs, I'll add other features and refine and optimize the existing functionality, but I'll try to control the number of lines of code and keep it lightweight, hopefully this project will help you understand and learn about other MVVM frameworks.

1000 lines of code to implement MVVM (like angular1.x.x, Vue)