A brief discussion on JavaScript framework classification_Basic knowledge

If it is divided from the internal architecture and concept, the current JavaScript framework can be divided into 5 categories.

Type 1

The emergence of namespace-oriented class libraries or frameworks, such as creating an array using new Array(), generating an object using new Object(), is completely Java style, so we can use a certain object as Root, constantly add object attributes or secondary object attributes to it to organize the code, stacked up like a pyramid. Representative works include early YUI and EXT.

Type 2

What emerged were class factory-oriented frameworks, such as the famous Prototype, as well as mootools, Base2, and Ten. Basically, except for the most basic namespace, other modules are class objects derived from class factories. Especially mootools 1.3, all types are encapsulated into Type types.

Type 3

is a selector-oriented framework represented by jQuery. The entire framework or library body is a special array object, which facilitates centralized operations - because the selector usually selects N element nodes at once, so They were dealt with together. jQuery contains several great things: "no new instantiation" technology, $(expr) returns an instance without explicitly newing it; get first set all access rules: data caching system. This way you can copy the node's events. In addition, IIFE (Immediately-Invoked Function Expression) was also discovered.

Type 4

are frameworks connected in series with loaders. They all have multiple JavaScript files, and each JavaScript file is written according to fixed rules. The most famous of these is AMD. Modularity is a sign that JavaScript is moving toward industrialization. The first of many "golden rules" listed in "The Art of Unix Programming" is modules, which says - "The only way to write complex software without failing is to combine a number of simple modules with clearly defined interfaces, so that First, most problems will only occur locally, so there is still hope to improve or optimize the local area without affecting the whole body." Many internal enterprise frameworks basically adopt this architecture, such as Dojo, YUI, kissy, qwrap and mass, etc.

Type 5

It is an MV* framework with a clear layered architecture. The first is JavaScript MVC (now called CanJS), backbonejs, spinejs, and then MVVM frameworks that are more in line with the actual front-end, such as knockout, ember, angular, avalon, and winjs. In the MVVM framework, the original DOM operations are replaced by declarative binding, which is handled by the framework itself, and users only need to focus on business code.

The following are conclusions about the framework characteristics.

The operation of basic data types is the basis. For example, jQuery provides methods such as trim, camelCase, each, and map. For intrusive frameworks such as Prototype.js, methods such as camelize are added to the prototype.

The determination of the type is essential, and the common form is the isXXX series.

Selectors, domReady, and Ajax are standard features of modern frameworks.

DOM operation is the top priority. Node traversal, style operation, and attribute operation also belong to its scope. Whether it is subdivided depends on the scale of the framework.

brower sniff is obsolete, feature detect is being used. However, feature detection still has limitations. If you are targeting rendering bugs, security policies, or the correction of certain bugs in a certain browser version, you still need to use browser sniffing. But it should stand alone as a module or plugin, removing the core of the framework.

Nowadays, mainstream event systems support event proxies.

Data caching and processing. Currently, browsers also provide data-* attributes for this purpose, but they are not easy to use and require further encapsulation by the framework.

Animation engine, unless your framework is backed by a top-level animation framework like script.aculo.us like Prototype.js, it is best to add it as well.

Easy development and scalability of plug-ins.

Provide solutions such as Deferred to handle asynchrony.

Even if a class factory is not specifically provided, there should be a method named extend or mixin to extend the object. Although jQuery does not have a class factory, it has to add one in jQuery UI, which shows its importance.

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

Many frameworks attach great importance to cookie operations.