RequireJS introduction
RequireJS was founded by James Burke, who is also the founder of AMD specifications.
RequireJS will let you write JavaScript in a different way than usual. You will no longer use script tags to introduce JS files into HTML, and you will no longer need to manage dependencies through script tags.
RequireJS is a very small JavaScript module loading framework and is one of the best implementers of the AMD specification. The latest version of RequireJS is only 14K after compression, which is very lightweight. It can also work in conjunction with other frameworks, and using RequireJS will surely improve the quality of your front-end code.
There are a few points worth noting when using RequireJS for asynchronous module loading:
1. Two ways to write module definition
1. Functional definitions that exist in dependencies
If the module has dependencies: the first parameter is the name array of dependencies; the second parameter is a function. After all dependencies of the module are loaded, the function will be called to define the module, so the module should return an object that defines the module. The dependency relationship is injected into the function as a parameter, and the parameter list corresponds to the dependency name list one by one.
define(['a'], function(aJ) {var hello = function(){aJ.hello('i am c.js');}return {hello : hello}});PS: The return value type of the module is not forced to be an object, and the return value of any function is allowed.
2. CommonJS module format definition
require: Used to introduce methods that depend on other modules.
exports: exports an object that exports a module variable or method.
module: contains information about this module.
require.config({baseUrl: "",config: {'b': {size: 'large'}},paths: {a : 'base/a',b : 'base/b',c : 'base/c'}}); define(function(require, exports, module) {var aJ = require("a");var hello = function(){aJ.hello('i am b.js');}var hello2 = function(){aJ.hello('i am b.js22');}exports.hello = hello;console.log("b.js: exports", exports);console.log("b.js : module", module);console.log("b.js : config", module.config());// Can't be used together, return will overwrite the previous exports/*return {hello : hello2}*/});PS: The return object and exports cannot be used together, return will overwrite the previous exports.
The following is the information printed after the call:
exports: It can be seen that exports are an attribute of module.
module: It includes the alias, uri, export object, and config information method of the module.
config: We often need to pass configuration information to a module. These configurations are often application-level information and require a means to pass them down to the module.
In RequireJS, it is implemented based on the config configuration item of requirejs.config().
2. Beware of singleton variables
Beware of variables in singletons, because after RequireJS requires once, the subsequent require uses the previous cache. So when a variable is defined in the module, as long as this requirement is changed, other requirements will remain consistent.
define(function() {var index = 0;var hello = function(msg){console.log(msg);}var addIndex = function(){index++;}var getIndex = function(){return index;}return {hello : hello,addIndex : addIndex,getIndex : getIndex}});Called:
require(['a',], function (A) {require(['a'], function (A) {console.log(A.getIndex());A.addIndex();A.addIndex();});require(['a'], function (A) {console.log(A.getIndex());});});The above printed are:
0
2
3. Clear the cache
Because RequireJS has the function of caching, but during development, we do not want it to cache, so we can set urlArgs in require.config.
urlArgs: RequireJS appends additional query parameters after the URL when obtaining the resource.
Example:
urlArgs: "bust=" + (new Date()).getTime()
This is useful in development, but remember to remove it before deploying to the build environment.
4. Load modules from other packages
RequireJS supports loading modules from CommonJS package structure, but requires some additional configuration.
package config can specify the following properties for a specific package:
1. name: package name (for module name/prefix mapping).
2. location: The location on the disk. Positions are relative to the baseUrl values in the configuration unless they contain protocols or start with "/".
3. main: After the require call is initiated with the "package name", the module in a package to be applied.
The default is "main", unless otherwise set here.
This value is relative to the package directory.
example:
main.js
require.config({baseUrl: "",packages: [{name: "student",location: "package-stu"},{name: "teacher",location: "package-tea"}],urlArgs: "bust=" + (new Date()).getTime()});require(["student/store", "teacher/tea"], function (Sto, Tea) {Sto.hello(); Tea.hello(); });tea.js:
define(function(require, exports, module) {exports.hello = function(){console.log('i am a teacher.');}});stu.js:
define(function(require, exports, module) {exports.name = 'cape'; });store.js:
define(function(require, exports, module) {var stu = require("student/stu"); exports.hello = function(){console.log('i am ' + stu.name);}});I feel like there are two weird things about this way of loading modules from other packages (I don't understand very well):
1. If the modules in other packages refer to the writing method of other modules, will the user affect the writing method of the module?
2. The main.js in other packages seems to be useless, and there is no problem without content.
The above content is the details of RequireJS used by the editor, and I hope it will be helpful to everyone!