Guide to Using the modular development framework of JavaScript Sea. js and the guide to getting started with sea. js

Guide to Using the modular development framework of JavaScript Sea. js and the guide to getting started with sea. js

All source codes of Sea. js are stored on GitHub: https://github.com/seajs/examples. the directory structure is:

Examples/| -- sea-modules stores seajs, jquery, and other files, this is also the module deployment directory | -- static stores js and css files of each project | -- hello | -- luky | '-- 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 (reference the root directory of the external file) base :". /js ", // set the alias (for reference later) alias: {" jQuery ":" jquery. js "}, // path configuration (used when calling across directories or when the directory is deep) paths: {'jquery ': 'http: // libs.baidu.com/jquery/2.0.0/'}, // sets the file encoding charset: "UTF-8", // preload file: ['jquery ']}); // reference the main entry file seajs. use (['main', 'jquery '], function (e, $) {// callback function alert ("all loaded") ;}); </script>

Seajs main portal file (main)

Define (function (require, exports, module) {// introduce other file dependencies to the main entry file // var testReQ = require ('index'); var testReQ = require. async ('index', function () {// asynchronous loading callback alert ("I am an asynchronous loading index callback function ");}); // Operation Method for releasing index // testReQ. testInit (); // run the index Release Interface (module) testReQ. textFun ();});

Seajs dependent file (index)

Define (function (require, exports, module) {// Release Interface 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 a module. exports object method ");} // module. exports receives the obj object module. exports = testObj ;});

File Loading Sequence

Let's start with hello.html to see how to organize code using Sea. js.

Load modules on the page

At the end of hello.html, after sea. js is introduced through script, there is a piece of configuration code:

// Seajs simple configuration seajs. config ({base :".. /sea-modules/", alias: {" jquery ":" jquery/1.10.1/jquery. js "}) // load the entry module seajs. use (".. /static/hello/src/main ")

After the download is complete, sea. js automatically loads the entry module. The code in the page is that simple.

Module code

This mini-game has two modules, "spinning. js" and "main. js", which follow the same syntax:

// All modules use define to define (function (require, exports, module) {// introduce the dependency var $ = require ('jquery ') through require '); var Spinning = require ('. /spinning '); // provides the interface exports through exports. doSomething =... // or use module. exports provides the entire interface module. exports = ...});

The above is the CMD module writing format recommended by Sea. js. If you have used Node. js, everything is natural.