A brief introduction to JavaScript framework classification

Currently, JavaScript frameworks can be divided into five categories if they are divided from internal architecture and philosophy.

1 kind

What emerged were namespace-oriented libraries or frameworks, such as creating an Array with new Array() and generating an Object with new Object(), all in the Java style, so that we could organize our code by taking an Object as a root and adding Object properties or second-level Object properties to it, pyramid-like. Masterpieces such as early YUI and EXT.

2 kinds of

What emerged were class-factory-oriented frameworks, such as the famous Prototype, as well as mootools, Base2, and Ten. They are basically a class object derived from a class factory, except for the most basic namespace. In particular, mootools 1.3 encapsulates all types as Type.

3 kinds of

It is a selector-oriented framework represented by jQuery. The whole framework or library body is an array object of special class, which is convenient to set -- because the selector usually selects N element nodes at once, and then processes them together. JQuery contains several great things: the "no new instantiation" technique, where $(expr) returns an instance without explicitly new; Get first set all access rules: data caching system. This allows you to copy the events of the node. In addition, IIFE (Immediately - Invoked the Function Expression) has also been discovered.

4 kinds of

5 kinds of

It is the MV* framework with a clearly layered architecture. First came JavaScript MVC (now called CanJS), backbonejs, and spinejs, and then more realistic MVVM frameworks like knockout, ember, angular, avalon, and winjs that fit the front end. In the MVVM framework, the original DOM manipulation is replaced by declarative binding, which is handled by the framework itself, and the user only needs to focus on the business code.

The following are conclusions about the characteristics of the framework.

Operations on basic data types are the foundation. For example, jQuery provides trim, camelCase, each, map and other methods, while for the intrusive framework such as prototype.js, camelize and other methods are added on the Prototype.

Type determination is essential, the common form is the isXXX series.

Selectors, domReady, and Ajax are standard with modern frameworks.

DOM manipulation is the top priority, and node traversal, style manipulation, and attribute manipulation also fall into its category. Whether to subdivide depends on the size of the framework.

Brower sniffing is out of date, feature detect is being applied. However, feature detection has its limitations, and browser sniffing is still used for rendering bugs, security policies, or Bug fixes for a particular browser version. But it should be a separate module or plug-in that removes the core of the framework.

Data caching and processing, currently the browser also provides the data-* attribute to do this work, but it is not very good, the need for further packaging of the framework.

Animation engines, unless you have a framework like prototype.js that is backed by a top level animation framework like script.aculo.us.

Easy development and extensibility of plug-ins.

Provides a solution for handling asynchrony such as Deferred.

Even if you don't provide a class factory specifically, there should be a method called extend or mixin that extends the object. JQuery doesn't have a class factory, but it does have to add one to the jQuery UI to show its importance.

Since jQuery came out with a method called noConflict, emerging frameworks have adopted this method to survive in the slit.

Many frameworks take Cookie manipulation very seriously.