If it is divided from the internal architecture and concept, the JavaScript framework can be divided into 5 categories.
Type 1
What appears is a namespace-oriented class library or framework. For example, if you create an array, use new Array() and generate an object with new Object(), it is completely Java style. Therefore, we can use an object as the root and constantly add object attributes or secondary object attributes to it to organize the code, and stack them up like a pyramid. Representative works such as early YUI and EXT.
Type 2
What appeared is a factory-oriented framework, 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, encapsulates all types into Type types.
Type 3
It is a selector-oriented framework represented by jQuery. The entire framework or library body is a special-class array object, which is convenient for collection operations - because the selector usually selects N element nodes at once, so it is processed together. jQuery contains several amazing things: "new-free instantiation" technology, $(expr) is to return an instance without explicitly new; get first set all access rules: data caching system. This way, the events of the node can be replicated. In addition, IIFE (Immediately-Invoked Function Expression) has also been discovered.
Type 4
It is a framework connected by loaders. They all have multiple JavaScript files, and each JavaScript file is written with fixed rules. The most famous of them is AMD. Modularity is a sign that JavaScript is moving towards industrialization. The first of the many "golden rules" listed in "Unix Programming Art" is modules, which says - "The only way to write complex software without fail is to combine several simple modules with clearly defined interfaces. In this way, most problems will only occur in the local area, and there is still hope to improve or optimize the local area without affecting the whole body." Many internal frameworks of enterprises basically adopt this architecture, such as Dojo, YUI, kissy, qwrap and mass.
Type 5
It is an MV* framework with a clear hierarchical architecture. First, JavaScript MVC (now called CanJS), backbonejs, and spinejs, and then more in line with the actual front-end MVVM frameworks, such as knockout, ember, angular, avalon, and winjs. In the MVVM framework, the original DOM operations are replaced by declarative binding and are handled by the framework itself, and users only need to focus on business code.
Below are conclusions about the characteristics of the framework.
Operations on basic data types are the basics. For example, jQuery provides methods such as trim, camelCase, each, map, etc., and invasive frameworks such as Prototype.js add methods such as camelize to prototypes.
The determination of type is essential, and the common form is the isXXX series.
Selectors, domReady, and Ajax are standard features of modern frameworks.
DOM operations are the top priority. The traversal of nodes, style operations, and attribute operations also belong to its scope. Whether to subdivide depends on the size of the framework.
Brower sniff is outdated and feature detect is being applied. However, feature detection still has limitations. If you are using browser sniffing to render bugs, security policies or corrections to certain browser versions, browser sniffing is still required. But it should be independent as a module or plugin, removing the core of the framework.
Now mainstream event systems support event proxying.
Data cache and processing are currently provided by the browser to provide data-* attributes for this work, but they are not easy to use and require further encapsulation of the framework.
Animation engine, unless your framework has a top-notch animation framework like script.aculo.us as backing, it is best to add it.
Easy to develop and extensible plug-ins.
Provides solutions for handling asynchronous processes such as Deferred.
Even if a class factory is not specifically provided, there should be a method called extend or mixin to extend the object. Although jQuery does not have a class factory, one has to be added in the jQuery UI, which shows its importance.
Since jQuery came out with a method called noConflict, emerging frameworks have all brought this method to survive in the slit.
Many frameworks place great emphasis on cookie operations.