Seajs Tutorial Seajs Learning Notes

0x0 Introduction

In the past few years, the front end of the world's most fire is jquery, it is a plug-in swirling era. Now, with the commonjs of the draft, Node.js makes JavaScript a service-side, and the front end is not the kid with the jquery.

In this new wave, JavaScript modular development has become popular. After the COMMONJS standard is established, Node.js Rise, Requirejs make JavaScript modular in the client hand in hand, ES6 module standards are ready to emerge a lot of modular programs, compatible with ES6 or incompatible, and domestic and foreign related projects springing up, who are likely to lead the standard. This series of articles will record my study of Sea.js.

Why 0x1 use Sea.js?

Sea.js the pursuit of simple, natural code writing and organization, with the following core features:

Simple and friendly module definition specification: Sea.js follows the CMD specification and can write module code like node.js. Natural intuitive Code organization: Rely on automatic loading, configuration of simple and clear, so that we can enjoy the fun of coding more. Sea.js also provides common plug-ins that are very helpful in developing debugging and performance optimization and have a rich extensible interface.

0x2, let's go.

First go to sea.js official website to download the latest file http://seajs.org/docs/. Or. After downloading to see the directory structure: Dist-sea.js, such as compressed files, directly available docs--use document Lib-to node.js version SRC-source tests--Test set tools-compression tools, can view build . XML gets the source code merge order Makefile--Execute build, test, etc commands

And then what? The files in the Seajs/dist file in the previously downloaded SEAJS files are scripts/seajs mainly sea.js.jquery.js and the application of JS

So we're going to start the code, and think about how excited it is.

The first step, of course, is to introduce sea.js.

The code is as follows	Copy Code
<script src= "Assets/scripts/seajs/sea.js" id= "Seajsnode" ></script>

Two explanations of id= "Seajsnode": A. Seajs other properties (such as Data-config, Data-main) that load its own script label to implement different function B. Seajs internal through the document.getElementById ("Seajsnode") to get this script tag (in fact, there is another way in seajs internal, but the other way is less efficient, so do not recommend, if interested, you can look at the source code/ Blob/master/src/util-path.js)

The second step began to write their own application of the JS code

The code is as follows

Copy Code

Define (function (Require,exports,module) { var util = {}; var colorrange = [' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F '; Util.randomcolor = function () { Return ' # ' + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)]; }; var helloseajs = document.getElementById (' Hello-seajs '); HelloSeaJS.style.color = Util.randomcolor (); Window.setinterval (function () { HelloSeaJS.style.color = Util.randomcolor (); },1500); });

All the code in the Sea.js is placed in the Define (function (Require,exports,module) {}), and within the body, define is a global function defined by SEAJS to define a module. Above we found is a JS file, in the Seajs a file represents a module, two files is to separate to write into two modules. Then we'll see how we can turn this one file module into two file modules. The first part is independent out of util.js

The code is as follows

Copy Code

Define (function (Require,exports,module) { var util = {}; var colorrange = [' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F '; Util.randomcolor = function () { Return ' # ' + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)] + Colorrange[math.floor (Math.random () * 16)]; }; Module.exports = util; });

We found that this module, in addition to define, we see module.exports = util, this sentence is more special. This is to say, I util module outward exposed interface on these, all the other things are internal use, you don't want to use. And look at another module application.js:

code is as follows	copy code
define ( function (require,exports,module) {      var util = require ('./util ');       var helloseajs = document.getElementById (' Hello-seajs ');      HelloSeaJS.style.color = Util.randomcolor ();      window.setinterval (function () {            HelloSeaJS.style.color = Util.randomcolor ();     },1500); });

In this module, we see var util = require ('./util '), which is quite special. This sentence is to say, I application module because business need, want to please util module to help, so put util to require come in. Now basically the above one module is divided into two modules, remember, a file is a module.

Finally began to introduce code here to use the Sea.js module load start, specifically see here/issues/260. It's easy to use seajs.use, like here we can

The code is as follows	Copy Code
<script src= "Assets/scripts/seajs/sea.js" id= "Seajsnode" > Add the following: <script> seajs.use ("application/application"); </script>

Well, we're almost done here. We can see our lovely Hello World effect, as for those packing and compressing things to learn next time. The specific home code is the following, and I add the above JS code to see the effect of it, (^__^) Xi hee ...

The code is as follows

Copy Code

<!doctype html> <meta charset= "UTF-8" > <title>hello world</title> <style type= "Text/css" > html,body,h1{padding:0px;margin:0px;font-size:18px;} #hello-seajs{ -webkit-transition:color 1.5s Ease; -o-transition:color 1.5s Ease; -moz-transition:color 1.5s Ease; Transition:color 1.5s Ease; Font-size:10em; Text-align:center; } </style> <body> &LT;H1 id= "Hello-seajs" > Hello World <script src= "Scripts/seajs/sea.js" id= "Seajsnode" ></script> <script> seajs.use ("application/application"); </script> <script src= "Scripts/application/util.js" ></script> <script src= "Scripts/application/application.js" ></script> </body>