Seajs Source Reading Notes

Source: Internet
Author: User
Tags emit script tag

Code OverviewThe SRC directory file list is as follows: The code is organized in a modular way, and the build is merged into a JS file (Sea.js or sea-debug.js), where Intro.js and Outro.js are the head and tail of the JS file respectively. If you are accustomed to looking at the code of a file, you can read the sea-debug.js in the Dist directory directly, this is the code after all the modules are merged. Sea.js records the current version, "@VERSION" should be replaced with a specific version number when it is built. Util file is a tool method, such as path conversion, syntax enhancement, events, etc., Util-lang.js implements IsObject, Isstring, IsArray, Isfunction isundefined and other methods used to determine the type of object. Util-events.js implements the event mechanism, adding three methods to the Seajs object: On, off, emit;the on function is used to add an event listener function, the off is used to remove the listener function, and emit is used to trigger an event. all added event listener functions are stored in an events two-dimensional array, and when an event is emit, all the listener functions added for the event are found in events and then executed in a loop. Util-path.js has some methods for handling file path related, such as Id2url can convert a module ID into a complete url;seajs.resolve (module.resolve) method actually point to the id2url here. Util-request.js implements the Seajs.request method, which is used to load the JS script according to the URL, this method will determine whether the current browser supports Webworker, if supported, the script is loaded using importscripts, if the web is not supported Worker, the script node is created to implement the JS script loading, in order to prevent memory leaks in IE, after the scripts loaded onload, the node will be removed in a timely manner. Util-deps.js There is only one method Parsedependencies, the method can be based on a lump of JS code to parse out the other modules in these JS code, that is, require of those modules. Mainly to solve, in the Define method, the second parameter does not indicate the dependent module, but in the callback method uses require the other module case. Config.js implements the Seajs.config method for saving configuration information, module aliases, URL routing rules, Debug switches, and emit a config event when it is saved. Module.js is the core of a file, all the modular related code in this file, such as the Define method, Require,use, module loading, initialization, parsing, execution. The core code gloable.define is ultimately called Module.define, which finds the corresponding module object from the Cachedmods based on the ID (if it does not exist, creates one and saves it to cachedmods). Use the Deps (dependent module ID) in the Define parameter, factory (the third parameter) to initialize the corresponding module. If the Deps parameter is empty, the Define method calls Parsedependencies (util-deps.js), resolves other modules referenced by factory in require, and assigns the parsed result to this module. The main methods involved in  define  are Module.save, Module.get, call hierarchy: define       |--  Module.save: Create module and cache it in Cachedmods, and if the newly created module state is less than SAVED, set to SAVED

        '-- module.get:   Gets the module object from cachedmods based on ID, and if not, creates a module and caches it in Cachedmods In

Seajs.use (Module.use) is the gateway to the module, which loads directly dependent modules from the server, as well as dependent modules for dependent modules ... That is, all indirectly dependent modules; When all modules are loaded, the browser automatically executes the Define method of these modules, and the module objects corresponding to these modules are created in define and saved to Cachedmods ; After all modules trigger the OnLoad event (which occurs after define execution), Seajs executes the Exec method that directly relies on the module, and the Exec method constructs require, exports, module, which are passed as parameters to the factory method of this module. Use involves methods mainly, load resolve get pass fetch, call hierarchy as follows:seajs.use    |-- Module.use     & nbsp   |-- module.get:  new A module and caches the new module to the Cachedmods variable. Status -1        |-- module.prototype.load: Stores the current module's dependent modules in Cachedmod, Then load (Fetch) dependent modules from the server,                            &N Bsp                   after loading and after the browser finishes executing the Define method, the OnLoad event invokes the load method of the dependent module. So as to achieve the purpose of recursive loading direct and indirect dependence.             |-- module.prototype.resolve: Processes the URL of a dependent module, converts the ID of the dependent module to a URL, and returns.             |-- module.get:new dependent modules &nbsP           |-- module.prototype.pass: The ingress module (typically via seajs.using) is passed to the dependent module, which is eventually passed to the last dependent module, and when the last dependent module is loaded, the callback of the Ingress module is invoked through the OnLoad method to execute the Module.exec method.             |-- module.prototype.fetch: traverse the module that the current module relies on, load the dependent module from the server, and after loading, The browser executes the Define method of the module immediately, when the state of the dependent module is saved.             |--     Seajs.request : Loads a JavaScript script using Webworker or creating a script tag.             |--     Gloable.define scripts are called by the browser when they are finished loading.          '--module.prototype.exec: In the OnLoad method, this method is executed. Modify the state to executing, construct the require, exports, module, and execute the factory method (the callback method in Difine). The  require method obtains the module object based on the ID, and then calls the module's Exec method, calling hierarchy:  require: Gets the module object by ID and then calls the Exec method of the module         |-- Module.get   Get or create objects from Cachedmod.          '-- module.prototype.exec:  Modify the status to executing, construct require, EXports, module, executes the factory method (callback method in Difine).   in executing the above method, the module will have a status attribute that marks the state of the current module, and the life cycle of a module is as follows: var STATUS = Module.status = { //1-Executing fetch method   fetching:1, //2-Executed saved method   saved:2, //3-Executing Load method   loading:3, //4-already finished load &N Bsp loaded:4, //5-Executing EXEC method   executing:5, //6-exec method execution finished   executed:6, //7-error occurred, typically 404 。   Error:7} define, require, exec and so on, when executed, will trigger (emit) the corresponding event, in order to implement the plug-in way other than the SEAJS core functions, such as  seajs-combo.

Seajs Source Reading notes

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.