Framework classification and main functions of javascript framework design_javascript skills

From the perspective of internal architecture and concepts, the current JavaScript framework can be divided into 5 categories.

The first is a namespace-oriented class library or framework . If you create an array, use new Array(), and generate an object, use new Object(), which is completely java style. Therefore, We use a certain object as the base, and constantly add objects and secondary object attributes to it to organize the code, building it up like a pyramid. In the early days, it represented YUI, EXT (so, not all dynamic companies still use them)

The second is a class factory-oriented framework . Famous ones include Prototype, mootools, Base2, and Ten. Basically, except for the most basic namespace, other modules are class objects derived from class factories. In particular, mootools1.3 encapsulates all types into Type types.

The third type is the selector-oriented framework represented by jQuery. The entire framework or library body is a special array-like object, which facilitates centralized operations (because the selector suddenly N element nodes were selected), so they were processed together. There are several great things about jQuery:

"No new instantiation" technology, $(expr) returns an instance, no explicit new is required;
get first set all access rules;
Data caching system. This way you can assign node events.
IIFE was also discovered

The fourth type is the framework connected by loaders. It has multiple javascript files, and each javascript file is written according to fixed rules. Among them, the most famous is AMD. Modularization is a sign that JavaScript is moving toward industrialization. “The only way to write complex software without making it messy is to define clear interfaces and combine several modules. In this way, most problems will only appear locally, so there are still problems.” It is hoped that local improvements and optimizations can be made without affecting the whole body. "Many enterprise internal frameworks basically adopt this architecture, such as Dojo, YUI, Kissy, qwrap, mass, (requirejs, Seajs), etc.

The fifth type is MV* with a clear layered architecture. The first is javascript MVC, (now called Canjs), backbone.js and spinejs, and then the MVVM framework that is more in line with the actual front-end. For example, knockout, emberm, angular, avalon, winjs. In the MVVM framework, the original DOM operations are replaced by declarative binding, which is handled freely by the framework, and the user only focuses on the business code.

Main functions of javascript framework

The module division of the jQuery framework class library is mainly based on the source code on github, which is basically a module and a javascript file. jQuery’s idea of ​​focusing on DOM operations was right from the beginning, and it will continue to improve compatibility in the future. Performance improvements have been made. After years of development, jQuery’s huge plug-ins and complete BUG submission channels have allowed it to continue to improve

Prototype.jsThe early king, it is divided into four parts.

Language extension
DOM extension
Ajax part
The abandoned part, the new version uses other methods to achieve the original functions

Prototype.js has a wide range of language extensions, including basic data types and "classes" borrowed from the language. Among them, Enumerable is just an ordinary method package, while ObjectRange, PeriodicalExecuter, and Templat are produced using the Class class factory (from community contributions).

mootoolsBecause the API design is very elegant and there are many high-quality plug-ins on its official website, it has not declined in the wave of opposition to prototype extensions.

Rightjs: Another framework for prototype extension, MochiKit is a Python-style framework that is very unique and can be ranked among the top ten frameworks.
Ten: The Javascript framework of the famous Japanese blog community Hatena, developed by amachang, influenced by Prototype.js, is the earliest example of a framework named after space; mass Framework: a jQuery-style framework targeting large module development .

After detailed comparison, we can easily draw conclusions about the following framework features

对基本数据的操作是基础，如jQuery提供的trim camelCase each map等方法，Prototype.js等入侵式框架则在原型上添加camelize等方法
类型的判定比不可少，常见的形式是jsXXX系列
选择器，domReady Ajax是现代框架的标配
DOM操作是重中之重，节点的遍历，样式操作，属性操作也属于它的范畴
现在主流的事件系统都支持事件代理
数据的缓存与处理，目前浏览器也支持data-属性进行操作，但不好用，需要框架封装
动画引擎
插件的易开发和扩展性
提供诸如Deferred这样处理异步的解决方案
即使不专门提供一个类工厂，也应该存在一个名为extend或mixin的方法对对象进行扩展。jQuery虽然没有类工厂，但在jQuery UI中也不得不增加一个，可见其重要性。
自从jQuery出来一个名为noConflict的方法，新兴的框架都带此方法，以求狭缝中生存。
许多框架非常重视Cookie操作。

The above is the entire content of this article, I hope you all like it.