Requirejs-javascript Modular (second, module dependent)

In the previous article, I briefly introduced the writing and use of Requirejs, and this section tries to write down dependencies

Requirement Description: We often write our own js, in the element selector, we may use jquery's $ ("#id") ID selector to replace the document.getElementById ("id") This native JS selector, then Our JS files need to rely on jquery, usually we need to introduce jquery in the

Project Structure Directory:

1, write our JS (js/my/sw.js)

function　　(window, $) {    var sw = {};  // Define a version number and assign the version number of jquery to the SW version number    sw.version = $ (). jquery;     = SW;     // define the Define () method, which complies with the AMD specification    Define (function() {        return  SW;    });} (window, $);

In Sw.js we define a version number, assign the version number of jquery to my version number, and then follow the AMD specification definition define () method to return our global variable SW.

2, write the entrance of Requirejs main.js (js/main.js)

Require.config ({baseUrl:"JS", paths: {jquery:"Jq/jquery", DR:"My/dr", SW:"MY/SW"}, shim: { "SW": ["jquery" ]}) require (["Dr", "SW"],function(DR, SW) {if(DR) {Console.info ("Dr.js is ready!"); Console.log ("Dr.version:" +dr.version)}if(SW) {Console.info ("SW is ready!"); if(sw.version) {Console.log ("SW depend on jquery successfully!"); Console.log ("SW Version:" +sw.version); }    }})

In Main.js, we define the JS API (Jquery, DR, SW) that we need to use, and only add the DR and SW two module in the Require method, so we can only use the DR and SW two APIs in the page.

Dependencies: SW relies on jquery, and we add a shim attribute to the Config method: This attribute describes the dependency relationship ("SW": ["jquery"], if you need to rely on other APIs, For example Bootstarp, append bootstrap to the array, similar to this: "SW": ["jquery", "Bootstrap"]).

In the Require () method, our callback function informs us whether the reliance on SW is successful, depends on success, and prints the SW version number.

3, index.html

<! DOCTYPE html> This is index.html</p>        <!--Click the button to get the version number of DR and SW--        <button onclick= "getversion (); > Get version </button>        <script>            function  getversion () {                Console.log ( "INDEX-->DR version:" + dr.version);                Console.log ("INDEX-->SW version:" + sw.version);            }         </script>    </body>
4. Test:
Dr.js is READY!DR.VERSION:V1.0SW are READY!SW depend on jquery successfully!sw version:1.9.1
Output after clicking the button
INDEX-->DR version:v1.0
INDEX-->SW version:1.9.1
Requirejs-javascript Modular (second, module dependent)