Let's talk about seaJs-A Tool for modular development and seajs modularization.

Let's talk about seaJs-A Tool for modular development and seajs modularization.

"Do only one thing and do one thing well ."

This should be the essence of seaJs.

I have used seaJs in some of my projects, so I know something about it. Now let's talk about it.

First of all, the words of DU Niang in the previous section:

"SeaJsIt is a JavaScript module loading framework that complies with CommonJs specifications. It can implement JavaScript modular development and loading mechanisms. AndJQueryUnlike other JavaScript frameworks, SeaJS does not extend the encapsulation language features, but only implements JavaScript modularization and load by module. The main purpose of SeaJS is to modularize JavaScript development and facilitate loading. It frees front-end engineers from the heavy JavaScript file and object dependency processing and can focus on the logic of the Code. SeaJS can be perfectly integrated with frameworks such as jQuery. The use of SeaJS can improve the readability and clarity of JavaScript code and solve common problems such as dependency disorder and code entanglement in JavaScript programming, facilitating code compilation and maintenance ."

1. Download seaJs

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

We can clearly see that docs is a document; dist is a compressed SeaJS code for the browser; src is the source code. Package. json + Gruntfile. js is the file required by the Grunt build tool to merge and compress.

After reading the code structure, let's talk about the basic usage in it.

2. Basic seaJs usage 2.1 use seajs. config for path and file dependency configuration.

For example:

Seajs. config ({// alias configuration 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'}, // ing configuration map: [['HTTP: // example.com/js/app/', 'HTTP: // localhost/js/app/'], // preload: [Function. prototype. bind? '': 'Es5-safe ', this. JSON? '': 'Json'], // debug mode debug: true, // Sea. base: 'http: // example.com/path/to/base/', // file encoding charset: 'utf-8 '});

More detailed configuration, can refer to: https://github.com/seajs/seajs/issues/262

2.2 use seajs. use to load one or more modules on the page. The callback parameter is optional. If this parameter is omitted, callback is not required.

Continue to read the code:

// Load the common module and execute the specified callback seajs when the loading is complete. use ('. /common', function (main) {common. init () ;}); // concurrently load module x and module y. when both are loaded, run the specified callback seajs. use (['. /X ','. /Y'], function (x, y) {x. init (); y. init ();});

2.3 use define to define and obtain modules.

The specific call is as follows:

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

2.4 requireObtain the interface of the specified module.

Define (function (require) {// obtain the Module x Interface var x = require ('. /X'); // call the method x of module x. doSomething ();});

2.5 use require. async to asynchronously load one or more modules in the module.

Define (function (require) {// load a module asynchronously. When loading is complete, run the callback require. async ('. /B ', function (B) {B. doSomething () ;}); // load multiple modules asynchronously. When loading is complete, run the callback require. async (['. /C ','. /d'], function (c, d) {c. doSomething (); d. doSomething ();});});

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

2.6 Use exports to provide external interfaces within the module.

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

3. Notes and specifications

After a basic usage, let's talk about things to pay attention.

3.1 The first parameter of the module factory constructor must be named require.

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

3.2 do not give requireYou cannot rename the function.

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

3.3 The require parameter value cannot be a variable other than the direct quantity of strings.

// Error! Require (todo); // error! Require ("to-" + "do"); // error! Require ("todo". toLowerCase ());

Conclusion: Using Sea. js improves code maintainability, efficiency, flexibility, particle size, and portability. Summary is a bit false, but seaJs does bring a lot of convenience to project development. If you don't need seaJs, you will be slow.

Note: This article is based on many articles on the official website. To learn more, please click here: http://seajs.org/docs/#docs

Author: Alone
Antroduction: Senior front-end development engineer
Sign: there is no failure in life, only success in life.

Recommended articles for bloggers:

I have read interesting front-end questions and don't regret them.

Mobile front-end development overview

Semantics of tags

Introduction to scroll wheel events

Without a long journey or even a thousand miles ---- highly adaptive textarea

Sass and less, excellent front-end style Preprocessor

What about parallax scrolling?
Small bugs about common pitfalls

Must vs2010 be used for ArcGIS Engine 101 development? Cannot Use vs2012? Can I talk about the development environment configuration in detail?

You are advanced. Many developers, including me and my colleagues, use arc engine10.0 and VS10.0. Of course you can. The problem is when you are in trouble. the solution is hard to find ,,,,

What is Shanghai haowei Electronic Co., Ltd? If I am working as a software development engineer, I hope people with knowledge can talk about the treatment and development prospects.

Technical Department Software Engineer 4 k-6 k

Use C # And WPF to participate in the development of related software UI.