Basic use modular development of import and -export

JavaScript original function

• In the early web development, js production as - scripting languages, do some simple form validation or animation realization that time code or small. The code is written directly in the <script>tag can
• With the advent of ajax asynchronous request, the client slowly formed a separate front and rear ends needs to be done more and more, the amount of code to be growing. In response to the sharp increase in the amount of code, we will usually organize the code in multiple js files for maintenance. But this maintenance mode, still can not avoid some catastrophic problem.
• Issues such as global variables with the same name:

<script>
document.getelementById('button'). onc1ick=function(){
console.1og('按钮发生了点击');
}
</script>

// mmmm.js文件中,小明定义了一个变量，名称是flag,井且为true
flag =true
// hhhh. js文件中,小红也喜欢用flag这个变量名称,只是为false
flag= false
//mmm2.js文件中,小明想通过flag进行-些判断。完成后续的事情
if (flag)
console. log('小明是个天才'):
)

But Xiao Ming is unable to run their own code 'Xiao Ming is a genius "is not displayed in the above case, since clashed with the red flag set

• Further, such a code written in a way dependent on the order file js almost mandatory. But when too many js file, such as dozens of time to figure out their order is a troublesome thing.

Anonymous function solutions

■ We can use an anonymous function to solve the problems of the same name
in mmmm.js document, we use the anonymous function

(function() {
	var flag = true
})()

■ But if we want mmm2.js file, use the flag, how to deal with it?
Obviously, the other - a document not easy to use, because the flag is a local variable.

Using the module as an outlet

• We can use will need to be exposed to the outside variables, use a module as an outlet, what does that mean?
  Code corresponding to look at:
  
  
• What did we do things?
  (1) is very simple, inside an anonymous function definitionsAn object.
  (2) to the subjectAdd toA variety of needs to be exposed to the outsideProperties and Methods(No exposure can be defined directly).
  (3) Finally, the object is returned and used to accept a MoudleA outside.
• Next, how we use mmm2.js in it?
  We just need to use the properties and methods of their own modules to
  
  
  
• This is the most basic package module, module encapsulation in fact there are many advanced topics: But we are here is to know about why the module, as well as the original prototype module. Fortunately, the front-end modular development has been a lot of existing specifications, and the corresponding implementation plan.
• Common modular specification:
  CommonJS, AMD, CMD, there's Modules ES6

CommonJS (understand)

■ Modular has two core: Export and Import
Export ■ CommonJS of:

module.exports = {
	flag: true,
	test(a, b) {
		return a + b
	}，
	demo(a, b) {
		return a*b
	}
}

■ CommonJS import

// CommonJS模块
let { test, demo, flag } = require('moduleA'); 
//等同于
let _mA = require('moduleA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag; 

Basic use export

■ export instructions for deriving the variables, such as the following code:

export let name = 'why'
export let age = 18
export let height = 1.88

. ■ The code above there is another - the kind of writing:

let name = 'why'
let age = 18
let height = 1.88

export {name, age, height}

Export function or class

. ■ above, our main output variable, function, or may output the output class
above code can also be written in this form:

export function test(content) {
	console. log(content);
}
export class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	run() {
		console. log(this.name + '在奔跑');
		}
}

function test(content)  {
    console.log(content);
}
class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	run() {
		console. log(this.name + '在奔跑'):
	}
}
export (test,Person)

export default

■ In some cases, a module contains a function, we do not want to give the function name, and let those who can import their own to name
this time we can use export default

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

■ We will be able to use this
port myFunc here is my own name, you can name it the corresponding name if necessary

import myFunC from './info.js '
myFunc()

■ Also, note:
Export default in the same module, a plurality allowed to exist simultaneously.
M;

Use of import

We use the export command to export the interface module is provided externally, here we will be able to load the corresponding module through the import command

• First, we need to introduce two js files in the HTML code, and module type needs to be set

<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>

• instructions for introducing the content import module

import {name, age, height} from "./info.js"
console. log(name, age, height);

If we want a module to import all the information, a inductions appears to be some trouble:

• By *may be introduced all variables export module
• But often we need to give * an alias to facilitate subsequent use

import * as info from ' ./info.js'
console. log(info.name, info.age, info.height, info. friends) ;

import {flag,sum} from "./mmmm";Does not
change the import {flag,sum} from "./mmmm.js";

Import and Export way:

import and export Second way:


import and export Three ways:


import and export mode IV:


import and export mode V:


or



import and export mode Six:


Export Seven:


(above micro-blog "coderwhy" video course of vue sort out)