Talk a little bit about the seajs--Modular development tool

"Just do one thing and do one thing ." "

This should be the essence of SEAJS.

I have used seajs in some of my projects, for which I know one or two, now swim, gently talk about.

First of all, a section of the Niang words:

"Seajs is a JavaScript module loading framework that follows the COMMONJS specification, enabling a modular development and loading mechanism for JavaScript. Unlike JavaScript frameworks such as JQuery, SEAJS does not extend the encapsulation language features, but only the modularity of JavaScript and the loading of modules 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. "

1. Download Seajs

Download Url:https://github.com/seajs/seajs

We can clearly see that docs is a document; Dist is a compressed, SEAJS code for the browser, and SRC is the source code. Package.json + gruntfile.js is the file required by the Grunt build tool for merging compression and so on.

After reading the code structure, let's start by saying the basic usage inside.

basic usage of 2.seaJs2.1 Use Seajs.config to configure path and file dependencies.

Such as:

Seajs.config {  //alias config alias  : {    ' es5-safe ': ' Gallery/es5-safe/0.9.3/es5-safe ',    ' json ': ' gallery/ Json/1.0.2/json ',    ' jquery ': ' Jquery/jquery/1.10.1/jquery '  },  //path configuration  paths: {    ' gallery ': ' Https://a.alipayobjects.com/gallery '  },  //variable configuration  vars: {    ' locale ': ' ZH-CN '  },  //Map configuration  map: [    [' http://example.com/js/app/', ' http://localhost/js/app/']  ,  //Pre-add  preload: [    Function.prototype.bind? ': ' Es5-safe ', this    . Json? ": ' JSON '  ],  //debug mode  debug:true,//  sea.js Base Path  base: ' http://example.com/path/to/base/' ,  //File Encoding  CharSet: ' Utf-8 '});

For more detailed configuration, refer to: https://github.com/seajs/seajs/issues/262

2.2 using Seajs.use to load one or more modules in a page, thecallback parameter is optional and omitted to indicate that no callback is required.

Continue to see the code:

Loads the module common and executes the specified callback Seajs.use ('./common ', function (main) {  common.init ()}) when loading is complete; Load module x and Module y concurrently, and execute the specified callback Seajs.use (['./x ', './y '], function (x, y) {x.init () when both load is complete  ;  Y.init ();});

2.3 Define modules and get modules with define.

The specific invocation is as follows:

Define (function (Require, exports, module) {  //code of modules you want to write});

2.4 with require gets the interface for the specified module.

Define (function (require) {  //Gets the interface of module x  var x = require ('./x ');  Method of calling Module X  x.dosomething ();});

2.5 Asynchronously loads one or more modules inside the module with Require.async.

Define (function (require) {  ///asynchronously loads a module that executes a callback  Require.async ('./b ', function (b) {    b.dosomething ()} When loading is complete  ) ;  Asynchronously loads multiple modules, executes the callback  require.async (['./C ', './d '], and function (d) {    c.dosomething () when loading is complete;    D.dosomething ();  });

PS: This code copy is from the official website reference document.

2.6 Use exports to provide external interface inside the module.

Define (function (require, exports) {  ///This sentence provides an external attribute todo  Exports.todo = ' wt ';});

3. Attention and Specification

After a superficial pass through the basic usage, let's talk about what to look for.

3.1 The first parameter of a module factory construction method must be named require .

Error! Define (function (req) {  //...}); Error Define (function (r) {  //...}); Correct Define (function (require) {  //...});

3.2 Don't give require re-assign the value or you cannot rename the function.

Error var Yilai = require, a= Yilai ("./mod");//error require = function () {};//error function todo (require) {}//error function todo () {  var require = function () {};}

the parameter value of 3.3require cannot be a variable other than the direct amount of the string.

Error! Require (TODO);//Error! Require ("to-" + "Do");//Error! Require ("Todo". toLowerCase ());

Summary: Use Sea.js to improve code maintainability, efficiency, flexibility, particle quality and portability. The summary is a bit false, but Seajs does bring a lot of convenience to the development of the project. You don't have to Seajs, you have a slow bump.

Note: This article refers to the official website of many articles, written. To know more children's shoes, please click here: http://seajs.org/docs/#docs

Author:alone
Antroduction: Senior front-end development engineer
Sign: Life is not a failure, only a successful one.

Blog related articles recommended:

Interesting front-end topic, look no regrets

Overview of Mobile front-end development

Talking about the semantic of label

Talking about mouse wheel events

No Kuibu to thousands of miles----highly adaptive textarea

Sass and less, excellent front-end style preprocessor

The thing that parallax scrolling
Little bug about the common pit daddy.

Talk a little bit about the seajs--Modular development tool