Shulou(Shulou.com)06/02 Report--

This article mainly explains "what beginners need to pay attention to when they contact the front end of web". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what beginners should pay attention to when they come into contact with the front end of web.

Functions that need to be achieved by modularization

Resolve naming conflicts. When the code reaches a certain scale and has many functions, naming conflicts will occur, and modularization can solve the problem of naming conflicts very well.

two。 Implement dependency management. When a page loads multiple JS and some of them have dependencies, you need to carefully arrange the order of these JS to ensure that each component works properly, and you don't have to worry about it after modularization.

3. Improve reusability and code readability. A function is a module, each module is independent of each other, do not affect each other, code component encapsulation can be reused, removing this module does not affect others.

JavaScript Modularization Development closure and Namespace

This is the easiest and easiest solution. Many people have used closures to solve the problem of variable duplicate names and pollution long before the concept of modularization was proposed. In this way, each JS file is wrapped in IIFE, and each JS file is in a different lexical scope, isolated from each other, and finally exposes variables in the form of closures. Each closure is a separate file, and each file is still downloaded through the script tag, and the order of the tags is the module dependency.

Object-oriented development

This method is only a small improvement of the closure method, the constraint js file return must be an object, the object is actually a collection of methods and properties. Such advantages: 1) standardized output, more unified to facilitate interdependence and reference; 2) the use of 'class' way of development, convenient for later dependencies to expand. In essence, this approach is only a normative constraint on the closure method, and no fundamental changes have been made.

YUI

Modularization management is only part of a tool produced by Yahoo. It also has performance optimization tools such as JS compression, confusion and request merging (merging resources require server cooperation). It can be said to be the ancestor of the existing JS modularization. Through the YUI global object to manage different modules, all modules are just different properties on the object, which is equivalent to different programs running on the operating system.

CommonJs

After the release of Nodejs in 2009 and the release of Commonjs, it has become a standard modular management tool in Node. At the same time, Node also launched the npm package management tool, and the packages on the npm platform all meet the Commonjs specification. With the development of Node and npm, Commonjs has more and more influence, and promotes the development of the following modular tools, which is of milestone significance.

AMD and RequireJS

AMD is an abbreviation for "AsynchronousModuleDefinition", which means "asynchronous module definition". It loads the module asynchronously, and the loading of the module does not affect the operation of the following statements. All statements that depend on this module are defined in a callback function, which will not run until all dependencies are loaded (pre-dependencies).

RequireJs is the tool framework of JS modularization and the concrete implementation of AMD specification. But what is interesting is that after the birth of RequireJs, the promotion process of the AMD specification. The advantages of RequireJs: 1) dynamic parallel loading js, relying on the front, no longer need to consider the loading order of js; 2) the core or sandbox compilation of injection variables to solve the modularization problem; 3) standardized input and output, easy to use; 4) files that do not meet the AMD specification can be well compatible.

CMD and SeaJs

CMD specification was born in China (Ali). It draws lessons from Commonjs specification and AMD specification, and makes improvements on the basis of both. Features: 1) define definition module, require loading module, exports exposure variable; 2) different from AMD's dependence front, CMD favors relying on nearby (loading when needed); 3) praising api function is single, a module does one thing.

SeaJs is the implementation of the CMD specification, similar to RequireJs, CMD is also the specification born in the process of SeaJs promotion. CMD draws on many of the advantages of AMD and Commonjs, and SeaJs also makes a lot of compatibility with AMD and Commonjs.

Modularization in ES6

Modularity is finally incorporated into the JavaScript standard in the ES6 specification, and since then JS modularization has been officially corrected, and it is also the standard of JS in the future. Modularity in ES6 is different from Commonjs, with the addition of keywords import, export, default, as, from, rather than global objects. There are two main differences: 1) the CommonJS module outputs a copy of the value, while the ES6 module outputs a reference to the value; 2) the CommonJS module is loaded at run time, and the ES6 module is the compile-time output interface.

At this point, I believe that the "beginners contact with the web front-end need to pay attention to what" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.