Use requirejs to compile the Javascript Module

Modular JavaScript writing is a good refactoring technology when Web Front-end programs are constantly expanding.

The following example has two modules,

The artdialog module relies on the jquery and jquery. artdialog libraries to provide the pop-up error dialog box function.

Require. config ({paths: {"jquery ":".. /thirdparty/jquery-1.8.0.min "," jquery. artdialog ":".. /.. /plugin/artdialog4.1.6/jquery. artdialog "}}); define (" artdialog ", [" jquery "," jquery. artdialog "], function ($, artdialog) {return {canceltext:" ", language:" ", // language shocould be either 'cn' or 'en' init: function (language) {This. language = language; If (Language = "cn") {This. canceltext = "cancel";} else {This. canceltext = "cancel" ;}}, error: function (Message) {$. dialog ({icon: "error", content: Message, cancelval: This. canceltext, OK: function () {This. close ();}});}};});

Explanations:

1. The paths in require. config uses the key: value form. The key is short for the name, and the path is the path for finding the dependent file from the current location.

2. Define refers to the definition module. The first parameter "artdialog" refers to the name of this module. The array contains other JS modules that this module depends on,

3. After requirejs sees the dependent modules defined in 2, it will load these JS files. After loading, it will call the function ($, artdialog)

4. The callback function returns a JSON object containing member variables and functions.

The ajaxutility module uses the artdialog module to check the Code:

Require. config ({paths: {"jquery ":".. /thirdparty/jquery-1.8.0.min "," artdialog ":". /dialog "}}); define (" ajaxutility ", [" jquery "," artdialog "], function ($, artdialog) {return {canceltext:" ", language: "", // language shocould be either 'cn' or 'en' init: function (language) {This. language = language; artdialog. init (language); If (this. language = "cn") {This. canceltext = "cancel";} else {This. canceltext = "cancel" ;}}, // popup an error dialog defualterrorhandler: function (jqxhr, textstatus) {artdialog. error ("ajax request got an error:" + textstatus) ;}, // execute. ajax function and handle t the returned data type is JSON // handler (MSG) will be callback when. ajax succeeded // errorhandler (jqxhr, textstatus) willl be callback if. ajax failed EXE: function (urlpath, asyncway, method, datavalue, handler, errorhandler, context) {var error, request; If (errorhandler) {error = errorhandler ;} else {error = This. defaulterrorhandler;} request = $. ajax ({URL: urlpath, async: asyncway, type: method, datatype: 'json', data: datavalue}); // request. done (handler); Request. done (function (OB, HDL) {return function (MSG) {HDL (OB, MSG) ;}) (context, Handler); Request. fail (error) ;}, // post data to server using. ajax // handler (MSG) will be callback when. ajax succeeded // errorhandler (jqxhr, textstatus) willl be callback if. ajax failed post: function (urlpath, asyncway, datavalue, handler, errorhandler, context) {this.exe (urlpath, asyncway, 'post', datavalue, handler, errorhandler, context );}, // call web method with get to server using. ajax // handler (MSG) will be callback when. ajax succeeded // errorhandler (jqxhr, textstatus) willl be callback if. ajax failed get: function (urlpath, asyncway, datavalue, handler, errorhandler, context) {this.exe (urlpath, asyncway, 'get', datavalue, handler, errorhandler, context );}};});

1. Require. config indicates that the artdialog module is in the dialog. js file.

2. the define statement defines the ajaxutility module and loads the dialog. after the JS file and jquery file are complete, call the function ($, artdialog). Note that the artdialog parameter is the object returned by the previous module.

Description of dependency loading: chrome debugging found that jquery, which is jointly dependent, will be loaded twice, and requirejs is intelligent. There is no need to worry about the dependency order. As long as each module correctly defines its own dependency module, the order will be guaranteed.

The third module demonstrates how to depend on the two modules and other modules:

require.config({paths: {"ajaxUtility": "./ajax_utility","jquery.validate": "../../plugin/jquery-validation-1.9.0/jquery.validate.min","flexigrid": "../../plugin/flexigrid-1.1/js/flexigrid","flexigrid.pack": "../../plugin/flexigrid-1.1/js/flexigrid.pack","jquery.ui": "../../plugin/jquery-ui-1.8.23.custom/js/jquery-ui-1.8.23.custom.min"}});require(["ajaxUtility"], function(ajaxUtility) {ajaxUtility.init("cn");require(["jquery.validate", "flexigrid", "flexigrid.pack", "language", "jquery.ui"], function(util) {require(["log"], function(util) {$(document).ready(function() {log.init();})});});});

The require of the outermost layer loads ajaxutility, so it is first loaded, juery, jquery. artdialog and dialog. JS will be loaded, and other Dependencies such as jquery. the UI does not have to worry about jquery loading.