Modularization with requirejs programming

download

Command line download: bower install requirejs or npm install requirejs
Download and click on official website Download requirejs

Main methods

  • define definition module
  • require load module

Case 1

directory structure

  • index.html
  • main.js
  • scripts
    • apple.js
    • student.js

index.html section

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs Modular programming</title></head>
<body>
<h3>requirejs Modular programming</h3>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js section

//Configure dependent paths
requirejs.config({
    baseUrl: './scripts'
});

//Depends on the student module and calls the module eat() method
require(['student'], function (stu) {
    stu.eat()
});

apple.js section

//apple is the current module name
define('apple', function () {
    return {
        name: 'apple fruits'
    }
});

student.js section

//apple is the name of the dependent module
//student is the current module name
define('student', ['apple'], function (apple) {
    return {
        eat: function () {
            console.log(apple.name);
        }
    }
});

characteristic:

  • Module name must be the same as file name
  • In fact, the module name can not be written

Case 2

directory structure

  • index.html
  • main.js
  • scripts/
    • appleModule.js
    • studentModule.js
  • bower_components/jquery/dist/

    • jquery.min.js

    index.html section

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs Modular programming</title></head>
<body>
<h3>requirejs Modular programming</h3>
<div id="box">Lorem ipsum dolor sit amet.</div>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js section

//The configuration item can be configured in the js file of the main entry. Other modules can call the paths module
requirejs.config({
    //All require dependency root paths are baseUrl
    baseUrl: './scripts',
    //The path can be an array. If the first load succeeds, it ends. Otherwise, the next file will be loaded
    paths:{
        'jquery': [
            '../bower_components/jquery/dist/jquery.min', //Load jquery locally
            'http://code.jquery.com/jquery-1.12.4' //cdn loading jquery
        ],
        'student': 'studentModule',
        'apple': 'appleModule'
    }
});

//student module named by dependent config configuration item
require(['student'], function (stu) {
    //Call the student module's eat() and say() methods
    stu.eat();
    stu.say();
});

studentModule.js section

//Note that the module is not named here, so the main entry can define the module name at will
//Relying on jquery and apple modules
define(['jquery', 'apple'], function ($, apple) {
    const student = {};
    student.name = 'zhangsan';
    student.eat = function () {
        console.log(this.name + ' like ' + apple.name);
    };
    student.say = function () {
        var str = 'I eat '
            + apple.num + apple.unit + ' ' + apple.name
            + ', and pay ' + apple.total().toFixed(2) + 'RMB everyday.';
        $('#box').text(str);
    };
    //All in all, just return an object
    return student;
});

appleModule.js section

//Note that the module is not named here, so the main entry can define the module name at will
define(function () {
    const apple = {};
    apple.name = 'apple';
    apple.num = 5;
    apple.price = 10;
    apple.unit = 'kg';
    apple.total = function () {
        return this.num * this.price
    };
    //All in all, just return an object
    return apple;
});

Key content

  • You do not need to define the module name, but you can also customize the module name through the configuration item

  • Because there is no module name, the file name is not constrained

  • One time configuration, multiple dependencies

Tags: JQuery Programming npm

Posted on Sun, 10 May 2020 08:40:54 -0700 by meepokman