All Sea.js source code is stored on GitHub: https://github.com/seajs/examples, and the directory structure is:
examples/ |-- sea-modules stores seajs, jquery and other files, which is also the deployment directory of the module|-- static stores js and css files for each project||-- hello | |-- lucky | `-- todo `-- app stores html and other files|-- hello.html |-- lucky.html `-- todo.html
Introduce seajs main file
<script src="js/sea.js"></script><script type="text/javascript"> // seajs configuration item seajs.config({ //Set the basic JS path (referring to the root directory of external files) base:"./js", //Set aliases (for later references) alias:{ "jQuery":"jquery.js" }, //Path configuration (used when calling across directories or when the directory is deeper) paths: { 'jQuery': 'http://libs.baidu.com/jquery/2.0.0/' }, //Set file encoding charset:"utf-8", //Preload file preload:['jQuery'] }); // Reference the main entry file seajs.use(['main','jQuery'],function(e,$){ //Callback function alert("Load all completed"); });</script>seajs main entry file (main)
define(function(require, exports, module) { // The main entrance file introduces other file dependencies //var testReQ = require('index'); var testReQ = require.async('index',function(){ //Async loading callback alert("I am the callback function of the asynchronous loading index"); }); // Run the interface method released by index// testReQ.testInit(); // Run the interface method released by index (module) testedReQ.textFun();});seajs dependency file (index)
define(function(require, exports, module) { // Release the interface to the outside exports.testInit = function(){ alert("I am an interface"); }; // If you need to release a large number of interfaces, you can use module var testObj = { name:"qiangck", sex:"man", textFun:function(){ alert("I am an object method using module.exports"); } } // module.exports receive obj object module.exports = testObj;});File loading order
Let’s start with hello.html to see how to organize code using Sea.js.
Loading modules in page
At the end of the hello.html page, after introducing sea.js through script, there is a configuration code:
// Simple configuration of seajs seajs.config({ base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" }})// Load the entry module seajs.use("../static/hello/src/main")After the download of sea.js is completed, the entry module will be loaded automatically. The code in the page is that simple.
Module code
This little game has two modules, spinning.js and main.js, which follow the unified writing method:
// All modules define define(function(require, exports, module) { // Introduce dependency var through require $ = require('jquery'); var Spinning = require('./spinning'); // Provide the interface to the outside through exports exports.doSomething = ... // Or provide the entire interface through module.exports module.exports = ...});The above is the CMD module writing format recommended by Sea.js. If you have used Node.js, everything is natural.