AMD of JavaScript modular programming
requireJS basic use
Tags (space delimited): JavaScript
AMD specification
AMD is the abbreviation of "Asynchronous Module Definition", which means "Asynchronous Module Definition". It loads the module asynchronously, and the loading of the module does not affect the running of the subsequent statements. All statements that depend on this module are defined in a callback function, which will not run until the loading is completed.
Function of require.js
- Realize the asynchronous loading of js file to avoid the web page losing response;
- Manage the dependencies between modules to facilitate the code writing and maintenance.
First, introduce the requireJS file, and specify the entry file (main module) on the script tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript Modular programming</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/require.js/2.3.5/require.js" defer async data-main="js/main.js"></script>
</body>
</html>Next, you need to configure main.js:
// Module loaded configuration
require.config({
// Base directory if each module is not in a base directory
// Specify directly in paths without baseUrl
baseUrl: "lib",
paths: {
'jquery': 'jquery',
'vue': 'vue.min',
'pagination': 'my-pager'
},
// The ship property is used to configure incompatible modules. Each module is defined as follows:
// (1) The exports value (the variable name of the output) indicates the name of the external call to this module
// (2) The DEPs array indicates the dependency of the module
// For example, jq plug-ins can be defined in this way
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
// requireJS also has a series of plug-ins
// [Plugins](https://github.com/requirejs/requirejs/wiki/Plugins)
});
// The main module depends on other modules, so you need to use the require() function defined by the AMD specification
// require([modules], function (modules) { });
require(['jquery', 'vue', 'pagination'], function ($, Vue, pagination) {
console.log($);
console.log(Vue);
console.log(pagination);
});For example, pagination in the above example:
;(function (factory) {
if (typeof exports === 'object') {
// Node/CommonJS
factory(require('document'), require('window'));
} else if (typeof define === 'function' && define.amd) {
// AMD
define(factory(document, window));
} else {
// Browser globals
factory(document, window);
}
}(function (document, window) {
var Test = {
a: 1
}
if (typeof module != 'undefined' && module.exports) {
module.exports = Test;
} else if (typeof define == 'function' && define.amd) {
define(function () { return Test; });
} else {
window.Test = Test;
}
}));The end... Last updated by: Jehorn, Jan 04, 2018, 10:35 AM