Today continue to try the version of Seajs 2.3, then do something about the demo good, just a simple data template bar, and then through some other details in-depth study
First look at the directory structure, according to the official demo erection
Index.html is just a simple entry file and SEAJS configuration item, at the bottom there is a seajs.use load Crontroller module and then callback the exposed combine method
<! DOCTYPE html>
Crontroller module, there are some official instructions and debugging, trial Require.async asynchronous loading, require way to load other modules (data and template module), how to successfully load non-CMD standard definition module
Define (Require, exports, module) {/* uses the path resolution mechanism inside the module system to parse and return the module path. * This function does not load the module, only returns the parsed absolute path */// console.log ( require.resolve ("./data.js") );// console.log ( module.id );// console.log ( module.uri );// exports is A reference to module.exports // console.log (module.exports === exports); // Reassign module.exports Assign (Inherit)// module.exports = new someclass ();// exports no longer equals module.exports //console.log (module.exports === exports); /* dependencies is an array that represents the current module's dependent */ // console.log (module.dependencies); /* Asynchronous Load module, When loading multiple modules you can use the array form ['. a ', './b '] */ require.async ('./async '); var data = require ('./ Data '), var temp = require ('./temp '); /* finally able to load */ var halo = require ('./hello '); console.log (Halo); exports.combine = function () { return temp.replace ("{{name}}", data.name); };});
The data module, which attempts to define multiple define in the same file, results in the latter overwriting the former!
If after the project optimization needs to merge JS file to resolve the HTTP link number problem, see official Seajs-combo plugin and official resolution Module.id and module.uri instructions may be clearer
Define ({name: "Jack"});/* Estimate the internal will determine the parameter type, when the function type is executed, * and then bind the returned result to the exports object, the same as the Exports.name = "Jack" effect; * Just a different way of writing *//*define (function (require) {return {name: "Jack"};}); *//* the same document cannot have more than one define *//* otherwise the definition of the latter will overwrite the former *///define ({interest: "Games"});
Temp module
Define ("Halo, My name is {{name}}");
Async module
Define (function (Require, exports, module) {Console.log ("Asynchronous Loaded module! So you can finally see Me ");});
Hello module, here is the main non-standard mode to define the module note
1, ID and deps details, start around here, if Module.id and module.uri inconsistent will cause other module load failure
2, the Deps array defines the dependent module and takes over the Require path load module mode, if not declared here, inside the module cannot successfully load other dependent modules through the path and alias
Read more about https://github.com/seajs/seajs/issues/930
/* ID and Dependencies parameters can be omitted. When omitted, it can be generated automatically through the build tool. The Define usage of the *//* with ID and deps parameter is not part of the CMD specification, but belongs to the Modules/transport specification *//* https://github.com/seajs/seajs/issues/930 is better understood here ID function */define ('.. /static/hello ', [' jquery '], function (require, exports, module) {/* When using this ID and deps, dependencies takes over all module dependencies *//* So the following kind of load other modules will fail, return null */var o = require ('./other '), Console.log (o),//null/* declare load in Deps, so can get the JQ object correctly */var j = Require (' jquery '); Console.log (j); Exports.halo = function () {return "Halo my Friends";};});
Other modules
Define ({name: "Other module", Varsion: "1.0.1"});
Final execution results, under Firefox's console
seajs2.3 Learning Log Simple try template + Data merge, module asynchronous load, non-standard CMD mode definition define Module