seajs2.3 Learning Log Simple try template + Data merge, module asynchronous load, non-standard CMD mode definition define Module

Source: Internet
Author: User

Today continue to try the version of Seajs 2.3, then do something about the demo good, just a simple data template bar, and then through some other details in-depth study

First look at the directory structure, according to the official demo erection

Index.html is just a simple entry file and SEAJS configuration item, at the bottom there is a seajs.use load Crontroller module and then callback the exposed combine method

<! DOCTYPE html>

Crontroller module, there are some official instructions and debugging, trial Require.async asynchronous loading, require way to load other modules (data and template module), how to successfully load non-CMD standard definition module

Define (Require, exports, module)  {/*  uses the path resolution mechanism inside the module system to parse and return the module path.  *  This function does not load the module, only returns the parsed absolute path  */// console.log ( require.resolve ("./data.js")  );//  console.log ( module.id );// console.log ( module.uri );// exports  is A reference to  module.exports   // console.log (module.exports === exports); //  Reassign  module.exports  Assign (Inherit)// module.exports = new someclass ();// exports   no longer equals  module.exports //console.log (module.exports === exports); /*  dependencies  is an array that represents the current module's dependent  */ // console.log (module.dependencies); /*  Asynchronous Load module, When loading multiple modules you can use the array form ['. a ', './b '] */ require.async ('./async ');  var data = require ('./ Data '),  var temp = require ('./temp '); /*  finally able to load  */ var halo  = require ('./hello ');  console.log (Halo); exports.combine = function ()  { return temp.replace ("{{name}}",  data.name);  };});

The data module, which attempts to define multiple define in the same file, results in the latter overwriting the former!

If after the project optimization needs to merge JS file to resolve the HTTP link number problem, see official Seajs-combo plugin and official resolution Module.id and module.uri instructions may be clearer

Define ({name: "Jack"});/* Estimate the internal will determine the parameter type, when the function type is executed, * and then bind the returned result to the exports object, the same as the Exports.name = "Jack" effect; * Just a different way of writing *//*define (function (require) {return {name: "Jack"};}); *//* the same document cannot have more than one define *//* otherwise the definition of the latter will overwrite the former *///define ({interest: "Games"});

Temp module

Define ("Halo, My name is {{name}}");

Async module

Define (function (Require, exports, module) {Console.log ("Asynchronous Loaded module! So you can finally see Me ");});

Hello module, here is the main non-standard mode to define the module note

1, ID and deps details, start around here, if Module.id and module.uri inconsistent will cause other module load failure

2, the Deps array defines the dependent module and takes over the Require path load module mode, if not declared here, inside the module cannot successfully load other dependent modules through the path and alias

Read more about https://github.com/seajs/seajs/issues/930

/* ID and Dependencies parameters can be omitted. When omitted, it can be generated automatically through the build tool. The Define usage of the *//* with ID and deps parameter is not part of the CMD specification, but belongs to the Modules/transport specification *//* https://github.com/seajs/seajs/issues/930 is better understood here ID function */define ('.. /static/hello ', [' jquery '], function (require, exports, module) {/* When using this ID and deps, dependencies takes over all module dependencies *//* So the following kind of load other modules will fail, return null */var o = require ('./other '), Console.log (o),//null/* declare load in Deps, so can get the JQ object correctly */var j = Require (' jquery '); Console.log (j); Exports.halo = function () {return "Halo my Friends";};});

Other modules

Define ({name: "Other module", Varsion: "1.0.1"});

Final execution results, under Firefox's console

seajs2.3 Learning Log Simple try template + Data merge, module asynchronous load, non-standard CMD mode definition define Module

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.