Seajs Study Notes

Currently, many projects developed by the company use Js. Due to different project module requirements, the development level of programmers is also different, and the front-end JS writing is very messy, recently, I have been thinking about how to standardize front-end programming at minimal cost without significantly increasing programming difficulty. I read an article a few days ago.Article: Using seajs to implement modular Javascript development, and then carefully studying GUAN Tian, I feel very good. I will share my research experience as follows.

I. Modularization

In fact, the modular programming idea of JS comes from a series of programming specifications (such as commonjs) and some implementations of this specification (such as nodejs). Although I have not studied any of the aforementioned concepts, however, I am changing the front-end of others.CodeThe painful experience and the literal meaning of the word "modularization" can still understand what it wants to express. the so-called "modularization" refers to breaking down a large problem into several small problems of high cohesion and low coupling based on the division and Control Law. finally, through a series of dependency relationships clearly call each other, and finally solve the big problem together. the two keys here are high cohesion and clear low coupling. what seajs solves is the next key.

Ii. seajs Overview

In most cases, introducing a new content will increase the complexity of the old content. since its goal is to reduce complexity, it should be kept simple enough. seajs complies with the KISS Principle very well. seajs only discloses two identifiers globally: seajs and define.

The seajs object has two Methods: Use and config. The structure of the define method is shown below.

We can see that both the first parameter of define and the attribute of module have an ID. in fact, they are the same thing. If an ID is passed in, the module uses it. If no, a default rule is used to generate the ID of each module.

The second dependencies parameter of define is also related to the dependencies attribute of the module. The dependencies attribute of the module is the dependent set passed in the dependencies set and obtained using the require method.

Define is an important method. It has three parameters: require, exports, and module. the construction of this method is completely included with the modules/wrappings specification under commonjs: Use require to obtain the "dependency" and use exports to export the "interface", while the module represents the defined module itself.

For details about how to use seajs objects and define methods, refer to the official document. in general, seajs. config. use each module. if you can understand this method, you should be able to quickly master this framework.

Next, let's talk about my understanding of using the seajs framework.

I. Code Organization

If the Js of a website is all organized by seajs, you will find that all JS will only appear in two places: define and seajs. in use. in define, because this is the position defined by the module; In seajs. in use, because this is the only place where the modules defined by define can be used. through the define definition module, all functions are encapsulated into JS objects, and these objects are closures, only through seajs. the second parameter of the Use method-the parameter of a callback function can use the defined objects.

Ii. Sequential Loading

Because seajs is only a module loader rather than a file loader, it cannot ensure that the script must be loaded in the order of code writing. To cope with this situation, seajs recommends using labjs with seajs.

Labjs is easy to use. Use the script method to load the script and use the wait method to execute the script. For more information, see the official documentation.

Iii. circular reference

See the following code:

//A. jsDefine (Function(Require, exports, module ){VaRB = require ("B"); Alert (B );ReturnB + 1;})
 

 
//B. jsDefine (Function(Require, exports, module ){VaRA = require (""); Alert ();ReturnA + 2;})
 

//HtmlSeajs. Use (["A. js"],Function(Result) {alert (result );})
 

What problems have you found. the answer is that there is a circular reference between module A and Module B. if this problem occurs in earlier versions of seajs, it seems that an exception will be reported, but not now. when an HTML page requests module A, module A finds that it is dependent on Module B, so Module B is executed. however, it is found that it depends on module A again. currently, seajs directly returns an empty object {}. Therefore, [object] is displayed, [object] 2 is displayed, and [object] 21 is displayed.

4. Script Rewriting

Other existing class libraries cannot be directly referenced by seajs. Instead, they need to encapsulate the existing library according to the module definition rules of seajs. Take the officially encapsulated jquery1.7.1 as an example:

(Function(Factory ){If(TypeofDefine = 'function') {Define ('# Jquery/1.7.1/jquery', [], Factory );}Else{Factory ();}})(Function(Require ){//Jquery native codeIf(Require)Return$. Noconflict (True);});
 

Its encapsulation rules are to add specific code to the native code of jquery. we can see that when typeof define = 'function', the current JS environment is the seajs environment and is encapsulated using the define method. Otherwise, the incoming factory anonymous function is called directly.

For anonymous functions, if the seajs environment is used, the passed-In require variable is not empty, and the jquery noconflict method is called back. This method allows you to customize jquery control variables.

This encapsulation is easy to handle. If there is no seajs environment, you can introduce the script in the script tag like a normal method. If it is a seajs environment, it will be introduced through seajs. the same script meets two execution environments.

V. debugging mode

Seajs also provides an official plug-in plugin-map.js that provides seajs's online local debugging mode. When you put it under the same directory as seajs, then add it after the URL? When seajs-Debug parameters are specified, an input box is displayed in the lower right corner of the window for you to enter the path of the script to be debugged. after you click Refresh, the source of the website script becomes your set source.

The above is my experience in studying seajs. in the course of the study, I took a look at the author's official reference and the research results of yuanyou. I would like to thank you here. I also wish yuber the rare domestic framework that has been widely recognized to get better and better written :)

 

References

1. From requirejs to seajs (1), (2), (3), (4), (5) (may need to flip the wall)

2. Online local debugging Overview (may need to go over the wall)

3. modularization of the jquery plug-in (may need to flip the wall)

4. Official seajs

5. Embrace modular Javascript

6. What is commonjs?

7. Use seajs for modular Javascript development

8. seajs Quick Start to modularize JS Code-revision and add references

9. seajs of JavaScript modular Development Library

10. seajs-Global Map, debugging tool

11.Some improvements to the previous Weibo demo

12.Decoupling of mutually dependent calls between seajs modules

13. Javascript file loading: labjs and requirejs

14. labjs Introduction

15. labjs

16. My module Loading System v3

17. Engineering front-end development

18. js modular development-solutions to code organization and multi-person collaboration in JS Projects

19. General Front-end development framework (I)