A. Create a index.html file in the public directory, and the contents of all pages are
In this implementation, the files that need to be imported in index.html are:
1. sea.js file for CMD framework
<script src= "Js/seajs_modules/sea.js" ></script>
2. master configuration seajs_config.js file created by yourself
<script src= "Js/seajs_config.js" ></script>
3. Set an ID or other attribute on a div in the page so that other templates (pages)
can be loaded into index.html to implement a single page
Two. Creation of the master configuration seajs_config.js file
Create a JS directory under the public directory and create the Seajs_config.js file in the JS directory
Seajs.config ({
Base: '. '//Set current directory as relative directory
Alias: {
"Module1": "Js/.../m1",
"Module2": "js/.../m2",
......................
In the JS directory to obtain the various modules of the JS file, equivalent to Requirejs in the paths
Note: You can not write the path of the module when you get it. js this suffix
}
})
The main entry for the main configuration file is Seajs.use ():
Seajs.use (["Module1", "Module2",...],function (m1,m2,...) {
M1.load ();
M2.FUNC2 ();
})
Three. Definition specification for each module
The SEAJS (CMD) framework has its own usage specifications, so when we use it we need to follow its specifications to introduce
Module files and retrofit module files; In this case, all modules are defined using the Define function;
A. Wrap the module's JS code in a define (function (Require,exports,module) {...}) In
In the Seajs we try to load the module in a load-on-demand manner, that is, post-loading;
require obtain the module; Exports exposes the functions in this module; Module exposes the function in this module;
Both the exports and module are used to expose the interface, but generally we use the return {JSON object} to expose the interface.
B. Use return {individual JSON objects} to expose functions that need to be called externally so that we can configure the main
These exposed methods can be called in Files or other module files.
Example: return {
FUNC1:MYFUNC1,
FUNC2:MYFUNC2,
.............
The above methods are exposed
}
Four. The reference between the module and the module
For example, module A refers to the functions in module B and Module C, then add parameters to the Define function in module A, as follows:
A. How the front loading is introduced
Define (["Moduleb", "Modulec"],function (MB,MC) {
In this way, the method exposed by Module B and Module C can be used in a.
Note: Here the "Moduleb", "Modulec" represents the module in the main configuration file has been obtained JS;
Like this load of modules that need to be loaded at the beginning of the definition is called pre-loading
})
B. How the post-load is introduced
Define (function (Require,exports,module) {
var module1 = require ("Module1");
Module1.func1 ();
Here are three parameters that introduce require,exports,module in function,
Then through require to get to the module that has been acquired in the master configuration file,
When using a module to invoke a method in the module, this is a post-load.
})
Description: Exports,module These two parameters are used to expose the module interface (function) method,
But we typically use return {} to back the JSON object as a way to expose the interface
return {load:load};
Exports.load = load;
Module.exports = {Load:load};
Five. Modification of the introduction of three-party plug-in
1. Introduction of Jquery.min.js
jquery does not meet the CMD specification, but it meets the AMD specification and does not need to set the return when it is modified
Go back to the interface (function), which comes with an interface, but the $ symbol in jquery may conflict with the outside, so
At the end of the transformation, set return $.noconflict (); This will not happen with the external $
Conflict:
Define (function () {
JQuery.min.js all the contents of the central Plains in this place;
return $.noconflict ();
}
When jquery is acquired in the alias of the master configuration file, jquery is transformed and successfully introduced.
2. Introduction of Bootstrap.min.js
Bootstrap does not meet the CMD specification, nor does it meet the AMD specification, which needs to be exposed when it is modified.
The transformation is:
Define (function (Require,exports,module) {
return function ($) {//Expose it
Bootstrap.min.js all the contents of the central Plains in this place;
}
});
After obtaining the bootstrap.min in the alias of the master configuration file, this bootstrap is modified and successfully introduced.
References to bootstrap and jquery in each module are:
var $ = require ("jquery"); Set the $ variable to get to the jquery file
Require ("Bootstrap") ($); Must be written on ($) to get the bootstrap file correctly
CMD basic knowledge