introduce
As we all know, front-end development modularization has become a general trend. There are many modular specifications at present, including commonJS, Module/Wrappings, AMD, etc., and ES6 has also begun to develop a modular mechanism to implement it. Similar to include in c/c++, in javaimportKeywords are also defined in jsrequireKeywords are used to introduce dependency modules.
Due to the diversity of specifications, the implementation of modularity is different.
nodejs follows the commonJS specification, which has some formal conventions:
1. Require is a function, which accepts a string as a module identifier
2. The return value of the require function is the module API
3. If an error occurs in the require function, an exception will be thrown.
4. Exports export module API
5. If there are multiple requirements, the dependencies will be loaded in turn
However, the modules loaded on the browser side are not like those on the server side. The dependency modules are not local and need to obtain files through http requests, which involves asynchronous loading. However, asynchronous loading does not block the code's operation. If the loaded dependent module is applied in the function context, and the dependent module is not loaded or parsed at this time, an undefined error will be thrown. To avoid the occurrence of this error, you can use the callback mode. When all dependent modules are loaded, the code is executed. This is the Module/Wrappings specification, and seajs basically implements this specification.
SeaJS is a module loader, and the module loader needs to implement two basic functions:
1. Implement module definition specifications, which is the basis of the module system.
2. Start-up and operation of the module system.
Analysis
Read the introduction demo of the official seajs website, first introduce the seajs file on the main page and set the entrance
// Simple configuration of seajs({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/"
}
})
// Load the entry module("../static/hello/src/main")
Next, define module ()
// All modules are defined by definedefine(function(require, exports, module) {
//Introduce dependencies through require var $ = require('jquery');
var Spinning = require('./spinning');
// Provide external interfaces through exports = ...
// Or provide the entire interface through = ...
});
This way, when the page is opened, it will be calledThe function and load the file. At this time, the dependencies of the main module are parsed, and the jquery and spining modules are loaded. After these two modules are loaded, the callback function is executed. The specific execution details will be mentioned when analyzing the source code.
Summarize
The above is all about the introduction and analysis of seajs. I hope the content of this article will be helpful to everyone's learning or using seajs. If you have any questions, you can leave a message to communicate. The editor will also update articles about seajs one after another. Interested friends, please continue to follow me.