My front-end tour--SEAJS Basic and SPM compilation tools using [Graphics]

1. Overview

This article is derived from the record I wrote in the actual application of the project. A bit overwhelmed by the initial installation and use of SEAJS and SPM. To this end, we write this document, through an illustrated way to explain the SEAJS and SPM build environment and basic use.

2. Understanding Seajs

Seajs is a front-end modular loading framework, and unlike JavaScript frameworks such as jquery, SEAJS does not extend the encapsulation language features, but only implements JavaScript modularity and load-by-module. The main purpose of SEAJS is to make JavaScript modular and easy to load, freeing front-end engineers from heavy JavaScript files and object-dependent processing to focus on the logic of the code itself. The SEAJS can be seamlessly integrated with a framework such as jquery. Using SEAJS can improve the readability and sharpness of JavaScript code, solve the problems of dependency confusion and code entanglement commonly existed in JavaScript programming, and facilitate code writing and maintenance.

3. Download the SEAJS and SPM compilation environment

1. First need to install Nodejs,nodejs is also one of the most popular technology, as for Nodejs, interested in the Www.nodejs.org official website to view the specific API. In general, after installing the NPM tool will be installed by default, you can enter the native cmd type npm-v view, normal words will prompt the following version information.

2. Set the global path (optional, if you do not perform this step, the default installation is installed on AppData): My understanding is that this path is the path that you store after NPM installation. It is recommended to set up the NPM global variables after installation, because the default is in AppData, you can set the global variable to its desired location, the method:

First create a new two folder on your local installation path (where you want to drop the file):

In cmd command:npm config set prefix "D:\Program files\nodejs\node_global"

and NPM config set cache "D:\Program Files\nodejs\node_cache"

Basically the global path is configured, and later installed plug-ins and tools will be placed here, I tried NPM install jquery-g (-G This parameter is installed in the global);

After the command is completed, jquery folders and JS files are automatically generated in the Global/node_modules directory.

3. Install the required plugins:

First, we need to use SEAJS's stuff, so download seajs:

If it is in the directory, the description is normal:

Then we need to install the SPM compiler Packaging tool, this step we recommend NPM install [email protected] -G, if the direct NPM install SPM default to use the highest version 3. X, in this version I found that the compilation tool can not compile my written JS (check the original reason is 3.X and 2.X there are some differences in the wording, so the compilation is not successful), because the previous contact is 2. The x version is written so it's a detour to the 2.x version.

At this point , our SPM compiler tool can be used.

4. How to use Seajs

The code is mainly the outer layer of some rules, specific wording and the current JS writing method Consistent, I will be based on the application of our project to do a demo, to step-by-step talk about how to use it.

? Frame construction

1. The project framework also uses a generic folder path for the front-end, such as:

2. Introduce the Seajs file we need to use, and copy it from the module we downloaded in the third step, such as:

3.SEAJS file path format (divided into modules and source files that is [Sea-modules and Static]), the module does not need us to write, but if the reference external JS will need to manually join, specific structure, in the JS folder under the static folder, to install the source file JS, That is, we wrote the JS file, we also first set up a demo folder to distinguish between different JS modules, in the demo directory need to have SRC folder, that is, source files, and Package.json, such as:

4. Write the code file we need:

SRC inside the JS file that we write, I write here is demo.js, the code is as follows :

/**

*demo

*/

Define (function (Require,exports,module) {

/**

* constructor function

*/

function Policyintladd (PARAMA,PARAMB,PARAMC) {

This.functiona ();

}

/**

* Define the method you need to use

*/

/**

*demo

*/

Define (function (Require,exports,module) {

/**

* constructor function

*/

function Demo (PARAMA,PARAMB,PARAMC) {

This.functiona ();

}

/**

* Define the method you need to use

*/

demo.prototype={

Initialize Method

Functiona:function () {

Alert (' This is a demo! ');

},

Submission Method

Functionb:function () {

To do songmeing ...

}

};

Module.exports=demo;

});

I wrote an alert method to print out some information,Packa.json inside the content:

{

"Family": "Demo",

"Name": "Demo",

"Version": "1.0.0",

"description": "Demo",

"Author": "[email protected]",

"SPM":

{

"Alias": {

},

"Output": ["Demo.js"]

}

}

Don't ask me why I wrote this , We'll give you the explanation you want in the second .

The following is to write our js compiled once, first cmd into the src directory run the SPM build, such as:

Once the compilation is complete, there will be one more Dist folder in the directory :

We are going to install the JS file we compiled .

Or in the cmd path, run the SPM install.-D. /.. /sea-modules/seajs, results :

Now let's go and look inside the JS/SEA-MODULES/SEAJS:

The demo module is more , then look at the inside of the thing:

Now we're going to write the root directory of the demo.html, and my code writes like this:

<title>demo</title>

<body>

</body>

<script type= "Text/javascript" src= "Js/sea-modules/seajs/sea.js" ></script>

<script type= "Text/javascript" src= "Js/sea-modules/seajs/seajs-style.js" ></script>

<script>

Seajs.use ([' Demo/demo/1.0.0/demo '],function (demo) {

var demo = new Demo (null,null,null);

});

</script>

Open the demo.html and run the result as:

5. Conclusion

The simple introduction of Seajs and his preliminary application in this step by step may seem complicated, but this modular idea is very helpful for the front-end of our large-scale projects, and we will introduce seajs in more depth next season.

My front-end tour--SEAJS Basic and SPM compilation tools using [Graphics]