JavaScript modularity explained

JavaScript modularity explained

Preface:

1. Concept

  • Encapsulate a complex program into several blocks (files) according to certain rules (specifications) and combine them together;
  • The internal data and implementation of the block are private, and only some interfaces (methods) are exposed to the outside to communicate with other external modules.

2. The benefits of modularity

  • Avoid naming conflicts (reduce namespace pollution);
  • Better separation, loading on demand;
  • Higher reusability;
  • Higher maintainability.

3. Problems after introducing multiple script tags

  • Too many requests (too many dependent modules will result in too many requests);
  • Dependency ambiguity (the specific dependencies of the modules are unknown, resulting in incorrect loading order);
  • Difficult to maintain (the above two reasons will lead to this result).
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jQuery.js"></script>
  <script src="module.js"></script>
</head>
<body>
  <div>123</div>
</body>
<script>
  myModule.foo();
  myModule.bar();
  console.log(myModule.data);
  myModule.data = 'xxxx';
  myModule.foo();
</script>
</html>



//module.js IIFE (anonymous function self-calling)
;(function(window,$){
  let data = "www.baidu.com";
  function foo() {
    console.log(`foo() ${data}`);
    //You need to use the jQuery library here $('body').css('background', 'red')
  }
  function bar() {
    console.log(`bar() ${data}`);
    otherFun();
  }
  function otherFun() {
    console.log(`otherFun()`);
  }
  window.myModule = { foo, bar };
})(window, jQuery)

1. CommonJS

  • NODE is based on the commonJS module specification. Each file is a module. It has its own scope. On the server side, the module is loaded synchronously. On the browser side, the module needs to be compiled and packaged in advance.

Features:

  • All code runs in the module scope and does not pollute the global scope;
  • A module can be loaded multiple times, but it will only be run once, the first time it is loaded, and the results of the run are cached. When it is loaded again, the cached results are read directly. To get the module working again, the cache must be cleared.
  • Modules are loaded in the order they appear in the code.

grammar:

  • Expose module: js module.exports = value or js exports.xxx = value
  • Import module: js require('xxx') If it is a third-party module, xxx is the module name; if it is a custom module, xxx is the module file path

The CommonJS specification stipulates that within each module, the module variable represents the current module. This variable is an object, and its exports attribute (i.e. module.exports) is the external interface. Loading a module actually loads the module.exports property of the module.

The require command is used to load module files. The basic function of the require command is to read and execute a JavaScript file and then return the exports object of the module. If the specified module is not found, an error will be reported.

The loading mechanism of CommonJS modules is that the input is a copy of the output value. That is, once a value is output, changes within the module will not affect that value.

AMD

  • Compared with CommonJS's synchronous loading modules, AMD is more suitable for asynchronous module loading on the browser side because AMD allows the specification of callback functions.
  • Directory Structure

Using require.js

<!-- index.html -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>



//Define a module1 without dependencies define('module1', () => {
  let count = 0;
  const add = () => ++ count;
  const reset = () => count = 0;
  const upperCase = string => string.toUpperCase()

  return {
    add,
    reset,
    upperCase
  }
})



//Define a module2 with dependencies, which depends on module1
define('module2',['module1'], (module1) => {
  const showMsg = () => module1.upperCase('hello-amd');

  return {
    showMsg
  }
})



<!-- Use the module in the HTML file -->
<body>

<script>
  require.config({
    paths: {
      module1: './modules/module1',
      module2: './modules/module2'
    }
  })
  require(['module1', 'module2'], (module1, module2) => {
    console.log(module1.add()) // 1
    console.log(module1.reset()) //0
    console.log(module2.showMsg()) //HELLO-AMD
  })
</script>
</body>

3. CMD

  • CMD combines the advantages of CommonJS and AMD. The cmd specification is specifically used on the browser side. The module is loaded asynchronously and is loaded and executed only when the module is used (on-demand loading is realized, while AMD does not support on-demand loading)
  • Directory Structure

Using sea.js

<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>



//Define module module1
define((require, exports, module) => {

  let string = 'I am a string';
  const readString = () => 'module1 show() ' + string;

  //Exposing to the outside world exports.readString = readString;
})



//Define module module2
define((require, exports, module) => {
  exports.msg = "It is me"
})



//Define module
define((require, exports, module) => {
  //Introduce dependent modules (synchronous)
  var module1 = require('./module1');
  console.log(module1.readString()) // module1 show() I am a string

  //Introduce dependent modules (asynchronous)
  require.async('./module2', md2 => {
    console.log(`This is imported asynchronously: ${md2.msg}`) //This is imported asynchronously: It's me})
})



<!-- HTML file uses module -->
<body>
<script>
  seajs.use('./modules/module')
</script>

ES6 modularity

The design idea of ​​ES6 modules is to be as static as possible, so that the module dependencies, as well as the input and output variables, can be determined at compile time. Both CommonJS and AMD modules can only determine these things at runtime.
Two keywords import and export

  • import
  • export
//mian.js
export default {
  showMsg() {
    console.log('hahahahahah')
  }
}
export const msg = "It's a beautiful time with full moon and flowers!"

//index.js
import module1 from "./module1"; //corresponding to export default
module1.showMsg()
import { msg } from './module1'; //corresponding to export
console.log(msg)

/*tips: Don't use <script type="module"> in HTML
import ....., there are cross-domain issues, you can download a plug-in in vscode, or start a local service to solve it, I will not go into details.
</script>*/

This is the end of this article about the detailed explanation of JavaScript modularization. For more relevant JavaScript modularization content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Modularity in Node.js, npm package manager explained
  • Detailed explanation of NodeJS modularity
  • How to understand JavaScript modularity
  • A brief discussion on several specifications of JS front-end modularization
  • Detailed explanation of the working principle and solution of Js modularization
  • Tutorial on exporting and importing in javascript to achieve modular management

<<:  Detailed explanation of Mysql's concurrent parameter adjustment

>>:  CSS cleverly uses gradients to achieve advanced background light animation

Recommend

Comprehensive interpretation of MySQL master-slave replication, from principle to installation and configuration

Why do we need master-slave replication? 1. In a ...

Detailed introduction to Mysql date query

Query the current date SELECT CURRENT_DATE(); SEL...

Background gradient animation effect made by css3

Achieve results Implementation Code html <h1 c...

JavaScript to implement image preloading and lazy loading

This article shares the specific code for impleme...

Detailed explanation of the implementation process of ServerSocket default IP binding

When the server needs to be started during develo...

getdata table table data join mysql method

public function json_product_list($where, $order)...

Use of select, distinct, and limit in MySQL

Table of contents 1. Introduction 2. select 2.1 Q...

jQuery plugin to achieve carousel effect

A jQuery plugin every day - jQuery plugin to impl...

MySQL 5.6 zip package installation tutorial detailed

Previously, we all used files with the suffix .ms...

A complete guide on how to query and delete duplicate records in MySQL

Preface This article mainly introduces the method...

Zabbix uses PSK shared key to encrypt communication between Server and Agent

Since Zabbix version 3.0, it has supported encryp...

MYSQL Operator Summary

Table of contents 1. Arithmetic operators 2. Comp...

Introduction to common MySQL storage engines and parameter setting and tuning

MyISAM, a commonly used storage engine in MySQL c...

CSS uses the placeholder-shown pseudo-class to achieve the floating text effect of the input box

In this post, we’ll use the :placeholder-shown ps...

How to use resize to implement image switching preview function

Key Points The CSS resize property allows you to ...