Five, Vue modular development study notes-JavaScript original functions, anonymous function solutions, the use of modules as exports, the use of CommonJS, ES6 export and import

One, the original function of JavaScript

-In the early days of web development, js production was used as a scripting language to do some simple form validation or animation implementation. At that time, the code was still very few. How was the code written at that time?
Just write the code directly in the <script>label

With the emergence of ajax asynchronous requests, the separation of front-end and back-end clients has gradually formed more and more things, and the amount of code is also increasing day by day.
In order to cope with the rapid increase in the amount of code, we usually organize the code in multiple js files for maintenance. However, this maintenance method still cannot avoid some catastrophic problems.
For example, the problem of the same name of global variables: see the example below.

In addition, this way of writing code is almost mandatory for the dependency order of js files,
but when there are too many js files, for example, there are dozens of them, figure out their order is A relatively simultaneous thing.
And even if you figure out the order, you can't avoid the embarrassing problem that appears above.

Second, the solution of anonymous functions

We can use anonymous functions to solve the problem of duplicate
names. In the aaa.js file, we use anonymous functions.
Insert picture description here
But if we want to use flags in the main.js file , how should we deal with it?
Obviously, it is not easy to use in another file, because flag is a local variable.

Three, use the module as an export

We can use variables that need to be exposed to the outside, and use a module as an exit. What does it mean?
Take a look at the corresponding code:

Insert picture description here

What have we done?
Very simple, inside the anonymous function, define an object.
Add a variety of properties and methods that need to be exposed to the object (direct definition of exposure is not required).
Finally, the object is returned, and a MoudleA is used outside to accept it.

Next, how do we use it in man.js?
We only need to use the attributes and methods of our own module.
Insert picture description here
This is the most basic package of a module. In fact, there are many advanced topics in module encapsulation:

But we are here to understand why a module is needed, and the original prototype of the module.
Fortunately, there are many existing specifications and corresponding implementation schemes for front-end modular development.
Common modular specifications:
CommonJS, AMD, CMD, and ES6 Modules

Four, CommonJS (understand)

Modularity has two cores: export and import

CommonJS export:
Import of CommonJS:

Five, ES6 export basic use

The export instruction is used to export variables, such as the following code:

There is another way to write the above code:
Above we mainly output variables, but also output functions or output classes: the
above code can also be written in this form:
export default In
some cases, a module contains a certain function, we do not want to name this function, and let the importer name it himself

At this time, you can use export default.

We come to main.js, so we can use it.
Here myFunc is my own name, you can name it according to your needs.

In addition, you need to pay attention to:
export default is in the same module , No more than one at the same time

Six, ES6 import use

We use the export command to export the interface provided by the module, and then we can use the import command to load the corresponding module

First, we need to introduce two js files in the HTML code, and the type needs to be set to module
The import instruction is used to import the content of the module, such as the code of main.js:
If we want all the information in a certain module to be imported, it is obviously troublesome to import one by one:

Through *can import all export variables in the module
But under normal circumstances we need to give * an alias to facilitate subsequent use

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
</body>
</html>

var name = '小明'
var age = 18
var flag = true

function sum(num1,num2) {
    
    
    return num1 + num2
}

if (flag) {
    
    
    console.log(sum(20, 30));
}

// 1.导出方式一
export {
    
    
    flag,sum
}

// 2.导出方式二
export var num1 = 1000;
export var height = 188;

// 3.导出函数/类
export function mul(num1, num2) {
    
    
    return num1 + num2;
}

export class Person {
    
    
    run() {
    
    
        console.log('在奔跑');
    }
}

// 5.export default
/*
const address = '深圳市'
export {
    address
} */

/*export const address = '北京市'*/

/*
const address = '深圳市'
export default address*/

export default function (argument) {
    
    
    console.log(argument);
}

// 1.导入{}中定义的变量
import {
    
    flag,sum} from "./aaa.js";

if (flag) {
    
    
    console.log('小明是天才');
    console.log(sum(10,20));
}

// 2.直接导入export定义的变量
import {
    
    num1,height} from "./aaa.js";

console.log(height);
console.log(num1);

// 3.导入 export的function
import {
    
    mul, Person} from "./aaa.js";


console.log(mul(30, 50));

const p = new Person();
p.run();


/*import addr from "./aaa.js"
console.log(addr)*/
 // 4.导入export default中的内容
import arg from "./aaa.js"
arg("你好啊")


// 5.统一全部导入
/*
import {flag,num,num1,height,Person,mul,sum} from "./aaa.js"
*/

import * as aaa from './aaa.js'
console.log(aaa.flag)
console.log(aaa.height)

var name = '小红'
var flag = false

Insert picture description here